ASP. NET MVC uses Ajax.beginform to implement the Bootstrap modal box popup, and to perform the front-section verification

1. New Controller

 PublicActionResult Index () {returnView (); }         PublicActionResult person (int?ID) {//could add code here to get the model based on ID ....                returnPartialview ("_person"); //calling partial with existing model ....//return Partialview ("_person", model);} [HttpPost] [Validateantiforgerytoken] Publicactionresult person (Personvalidationviewmodel model) {if(!modelstate.isvalid) {varErrors =geterrorsfrommodelstate (); returnJson (New{success =false, errors =errors}); //return Partialview ("_person", model);            }            //save to persistent store; //return data back to post OR do a normal MVC Redirect ....            returnJson (New{success =true});//Perhaps you want to does more on return .... Otherwise this if the block is not necessary ....//return redirecttoaction ("Index");}

Controller related code2. Create the corresponding index

<divclass="Jumbotron"> class=" Lead">form binding to bootstrap modal with the Ajax helpers<p></div>@Ajax. ActionLink ("ADD Person"," Person",NULL,NewAjaxoptions () {HttpMethod ="Get", Updatetargetid ="modalcontent", Insertionmode = insertionmode.replace, Onbegin ="Onbegin", onsuccess ="onsuccess", onfailure ="onfailure", OnComplete ="OnComplete"},New{id ="Btnperson", @class ="btn Btn-lg btn-info" })<divclass="Modal Fade"Id="Mymodal"tabindex="-1"role="Dialog"aria-labelledby="Mymodallabel"aria-hidden="true"> <divclass="Modal-dialog"> <divclass="modal-content"Id="modalcontent"> </div> </div></div>@section Scripts {@Scripts. Render ("~/bundles/jqueryval")    <script type="Text/javascript">function Onbegin () {//alert (' begin ');} function onsuccess () {//alert (' success ');} function OnComplete () {//alert (' complete ');$('#myModal'). Modal ('Show'); } function OnFailure () {alert ('fail'); }    </script>}

Index related Code

3. Pop-up modal frame with Partialview

<divclass="Modal-header"> <button type="Button" class="Close"data-dismiss="modal"aria-hidden="true">&times;</button> class="Modal-title"Id="Mymodallabel">modal with Model & Formclass="Modal-body">@using (@Ajax. BeginForm (NewAjaxoptions () {HttpMethod ="Post", onsuccess ="formsuccess (data)"}) {@Html. AntiForgeryToken ()<divclass="Form-horizontal">@Html. ValidationSummary (true)        <divclass="Form-group">@Html. Labelfor (Model= Model. FirstName,New{@class ="Control-label col-md-2" })            <divclass="col-md-10">@Html. Editorfor (Model=model. FirstName) @Html. Validationmessagefor (Model=model. FirstName)</div> </div> <divclass="Form-group">@Html. Labelfor (Model= Model. LastName,New{@class ="Control-label col-md-2" })            <divclass="col-md-10">@Html. Editorfor (Model=model. LastName) @Html. Validationmessagefor (Model=model. LastName)</div> </div> <divclass="Form-group">@Html. Labelfor (Model= Model. BirthDate,New{@class ="Control-label col-md-2" })            <divclass="col-md-10">@Html. Editorfor (Model=model. BirthDate) @Html. Validationmessagefor (Model=model. BirthDate)</div> </div> </div> <divclass="Modal-footer"> <button type="Button" class="btn Btn-default"data-dismiss="modal">Cancel</button> <button type="Submit" class="btn Btn-primary">Save</button></div>        }</div><script type="Text/javascript">function formsuccess (result) {if(result.success) {$ ('#myModal'). Modal ('Hide');        Location.reload (); } Else{$.each (result.errors, Function (key, Val) {varContainer = $ ('span[data-valmsg-for= "'+ key +'"]'); Container.removeclass ("Field-validation-valid"). AddClass ("Field-validation-error"); Container.html (Val[val.length-1].            ErrorMessage);        }); }} $ (function () {//Allow validation framework to parse DOM$.validator.unobtrusive.parse ('form'); });</script>

Partialview

4. Front-section Verification

Need to add the relevant JS file: Jquery.validate.unobtrusive.min.js

Add the relevant JS in view

$ (function () {
Allow validation framework to parse DOM
$.validator.unobtrusive.parse (' form ');
});

5. Related Demos

ASP. NET MVC uses Ajax.beginform to implement the Bootstrap modal box popup, and to perform the front-section verification