Validating multiple partial views without a BeginForm in a view

Question

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

I 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 fields should be checked in each Partial Views .

I need to check individual partial views separately.

In the same problem, other people used Html.BeginForm , but I am working on the MVC module, and DNN 8 does not support Html.BeginForm or Ajax.Html.BeginForm .

For this work without BeginForm , I tested many ways, as shown below, but I could not do it.

ASP.NET MVC Validation Groups?

ASP.NET MVC Multiple forms on one page: validation does not 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!

Answer 1

In general, I recommend that you integrate more JS code into your views (JQuery?). This way, you will be less limited by any structure (DNN) that does not support the basic MVC functions that you are used to. In the end, the web application comes down to HTML + JS + CSS, so the best knowledge of JS you have is the best control and flexibility you get.

As for your question, MVC introduces JS code to handle validation errors on submit. You can simulate this behavior yourself. It will take you some time, but you will get full control over this process.

When the page loads (JS event), you can do some work through JS, for example, wrap partial views using the <form> and / or bind to send events. So simple.

But regular submission of the form will refresh your page, losing other partial data / partial view state. So, if you need to, you can send / receive 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 the 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(); } 

Thus, you get full control over your page and its parts. No matter in what framework you will work. What could be better? :)