Validate multiple Partial view without BeginForm in a View

Question

I have a View (Index.cshtml) that it has two modals (Bootstrap modal).

I have loaded a Partial View in each ‍‍‍modal. So in this View, I have two Partial Views(AddContractHistory.cshtml and AddCompany.cshtml).

I have a model that it's fields should be validated in each of the Partial Views. I need to validate each of the partial views separately.

In same other issue, Html.BeginForm was used but I work on MVC module and DNN 8 that Html.BeginForm or Ajax.Html.BeginForm aren't supported.

For doing this work without having BeginForm, I tested many ways like below but I couldn't do it properly.

ASP.NET MVC Validation Groups?

ASP.NET MVC Multiple form in one page: Validation doesn't work

Index.cshtml (View)

@using MyProject.BusinessLogic
<div class="form-group">
    <div class="col-sm-12">
        <button type="button" class="btn btn-success" onclick="$('#AddContractHistory').modal('show');">
            <i class="fa fa-plus"></i>
            New ContractHistory
        </button>
    </div>
    <div class="col-sm-12">
        <button type="button" class="btn btn-success" onclick="$('#AddCompany').modal('show');">
            <i class="fa fa-plus"></i>
            New Company
        </button>
    </div>
</div>

<div id="AddContractHistory" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg" id="mymodal">
        @Html.Partial("AddContractHistory", new ContractHistory())
    </div>
</div>
<div id="AddCompany" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg" id="mymodal">
        @Html.Partial("AddCompany", new Company())
    </div>
</div>

AddContractHistory.cshtml (PartialView)

@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<MyProject.BusinessLogic.ContractHistory>

<div id="myform">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">contract</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="panel-body">
                    <div class="form-horizontal">
                        @Html.ValidationSummary()
                        @Html.HiddenFor(c => c.ID)
                        <div class="form-group">
                            <div class="col-sm-6">
                                @Html.LabelFor(c => c.PlaceName)
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-file-text-o" aria-hidden="true"></i>
                                    </span>
                                    @Html.EditorFor(c => c.PlaceName, new { htmlAttributes = new { @class = "form-control requierd-field" } })
                                </div>
                            </div>
                            <div class="col-sm-6">
                                @Html.LabelFor(c => c.ActivityDescription)
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-file-text-o" aria-hidden="true"></i>
                                    </span>
                                    @Html.EditorFor(c => c.ActivityDescription, new { htmlAttributes = new { @class = "form-control requierd-field" } })
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-success" formaction="AddContractHistory">
submit
            </button>
            <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
        </div>
    </div>
</div>

AddCompany.cshtml (PartialView)

@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<MyProject.BusinessLogic.Company>

<div id="myform">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Company</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="panel-body">
                    <div class="form-horizontal">
                        @Html.ValidationSummary()
                        @Html.HiddenFor(c => c.ID)
                        <div class="form-group">
                            <div class="col-sm-6">
                                @Html.LabelFor(c => c.PlaceName)
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-file-text-o" aria-hidden="true"></i>
                                    </span>
                                    @Html.EditorFor(c => c.PlaceName, new { htmlAttributes = new { @class = "form-control requierd-field" } })
                                </div>
                            </div>
                            <div class="col-sm-6">
                                @Html.LabelFor(c => c.ActivityDescription)
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-file-text-o" aria-hidden="true"></i>
                                    </span>
                                    @Html.EditorFor(c => c.ActivityDescription, new { htmlAttributes = new { @class = "form-control requierd-field" } })
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-success" formaction="AddCompany">
                submit
            </button>
            <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
        </div>
    </div>
</div>

Thanks in advance!

Draughtboard

Not familiar with DNN, but you need a <form> for jquery validation. #23871660 – Doran

@SteveGreene My problem isn't related to DNN. As a matter of fact, I will create two groups of controls and two submit buttons in a <form> with controls validation. Is there any way? – Draughtboard

I am not seeing a <form> tag in your example. Is your issue that validation is not working at all or that you want to validate the partial classes independently? – Doran

There is a Html.BeginForm in Index.cshtml and I need to load two partial Views inside it. But Both of partials shouldn't have <form> tag. Then I need to validate two groups of controls (related to two partials) inside index form tag. As you know, I need something like validation group in web form. – Draughtboard

Answer 1

You can implement your Html.BeginForm, which it's not supported in Dotnetnuke, in another way.

1. Change your buttons attributes

You should change buttons, which cause posting data to actions, like below:

<button id="btnAddContractHistory" type="button" class="btn btn-success">
    submit
</button>

<button id="btnAddCompany" type="submit" class="btn btn-success">
    submit
</button>

2. Add events click for buttons

Two click events call for posing data to desire actions. In this events, which are different in url, action attribute form are changed by your url and after that form.submit() causes pass data (model) to related action. Finally you would validate values of properties in two different actions.

<script>

    $('.modal').find('#btnAddContractHistory').on('click', function () {
        var url = 'AddContractHistory action url'; // It depends on your AddContractHistory action url
        var form = $(this).closest('form');
        form.prop('action', url);
        form.submit();
    });

    $('.modal').find('#btnAddCompany').on('click', function () {
        var url = 'AddCompany action url'; // It depends on your AddCompany action url
        var form = $(this).closest('form');
        form.prop('action', url);
        form.submit();
    });

</script>

Anemology

Answer 2

In general, I recommend you to integrate more JS code (JQuery ?) in your views. In that way you'll be less bounded to some framework (DNN) that doesn't support basic MVC functionality you're used to. After all - a web app boils down to HTML+JS+CSS, so the better JS knowledge you have - the better control and flexibility you gain.

Regarding your question, MVC injects JS code for you to handle validation errors upon submitting. You can imitate this behavior yourself. It'll take you some time, but you'll gain full control over this process.

When page is loaded (JS event), you can complete some work via JS, like wrapping your partial views with your desired <form> tag, and/or bind to the submit events. As simple as that.

But regular form submission will refresh your page, loosing the other partial view data/state. So, if you need, you can post/get your data via AJAX (again JQuery?) and update your page accordingly.

<form data-reza-ajaxform="true"
      data-reza-targetId="#your-htmlcontrol-id"
      action="@Url.Action("Your Action")"
      method="POST/GET">
          <div class="input-group">
               <input type="text" ...>
               ...
               <button class="btn btn-default" type="submit">Go!</button>
          </div>
</form>

Then, in your script you can do something like this:

$('form[data-reza-ajaxform]').on('submit', submitAjaxForm);
...
function submitAjaxForm(e) {
    var $form = $(this);

    var options = {
        url: $form.action,
        method: $form.method,
        data: $form.serialize()
    };

    $.ajax(options)
        .success(function(res) {
            var $target = $($form.attr('data-reza-targetId'));

            $target.html(res);
            $target.effect('highlight', 'slow');
    });

    e.preventDefault();
}

In this way you'll gain full control over your page and its parts. No matter in which framework you'll will work with. What can be better? :)

Vigesimal