How to make a .NET MVC Form inside a Modal using jQuery with validation
I construct MVC Bootstrap modal forms with jQuery.validate() in 2 views, the "main" view that holds the modal div and the Html.BeginForm(...) and a partial view for the modal body that has the form elements, with a separate .js file that holds a jQuery method for opening the modal, binding the partial view and its form validation.
It starts with a CSS class on a link on the main view that calls an ActionResult() that returns the partial view, editChangeReason:
<a href="@Url.Action("_editCarrierChangeReason" ...)" class="editChangeReason">Add Exception</a>
From the controller:
public ActionResult _editCarrierChangeReason(string reasonId)
{
...
return PartialView("modals/_modalEditCarrierChangeReason", rule);
}
On that main view, there is a typical Bootstrap modal div with the addition of the @Html.BeginForm(...):
<!-- START Carrier Change Reason/Exception Edit Modal -->
<div id="editReason" class="modal fade in" data-backdrop="static" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
@using (Html.BeginForm("_editCarrierChangeReason", "TmsAdmin", new { area = "Tms" }, FormMethod.Post, new { id = "formCarrierChangeReason", autocomplete = "off" }))
{
<div id="editReasonContent">
</div>
}
</div>
</div>
</div>
<!-- END Carrier Change Reason/Exception Edit Modal -->
Then, it's a simple partial view for the modal body that holds the form elements:
@Html.HiddenFor(m => m.TypeId)
<!-- START Modal Body -->
<div class="modal-body">
<!-- START Carrier Exception Edit Form -->
<div class="form-row">
<div class="form-group col-6">
<label class="control-label">Code</label> <span class="required">*</span>
@Html.TextBoxFor(m => Model.Code, ...)
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label class="control-label">Description</label> <span class="required">*</span>
@Html.TextAreaFor(m => Model.Description, ...)
</div>
</div>
<!-- END Carrier Exception Edit Form -->
...
</div>
<!-- END Modal Body -->
For the .js file, that's a little more involved but has a logical flow. Picking up the button click from the class, editChangeReason, the modal is opened. There is also a switch, outside the $(document).ready() that handles the Bootstrap classes that manage the modal and binds the partial view to the "content" div:
$(document).ready(function() {
// Carrier Change Reason/Exception
$("body").on("click", ".editChangeReason", function (e) {
e.preventDefault();
$("#editReasonContent").load(this.href,
function() {
$("#editReason").modal({
keyboard: true
},
"show");
bindForm(this, "editChangeReason");
return;
});
return false;
});
});
// Allows modals to use partial views when using <a data-modal=""...></a> on parent View:
function bindForm(dialog, type) {
$("form", dialog).submit(function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function(result) {
switch (type) {
case "editChangeReason":
if (result.success) {
$("#editReason").modal("hide");
location.reload();
} else {
$("#editReasonContent").html(result);
bindForm();
}
return;
default:
break;
}
}
});
return false;
});
}
And finally, the validation, also outside the $(document).ready():
$("#formCarrierChangeReason").ready(function() {
$("#formCarrierChangeReason").validate({
rules: {
Code: {required: true},
Description: {required: true, minlength: 10}
},
messages: {
Code: "Please enter a unique code no longer than 10 characters",
Description: "Please add a description that explains this reason/exception"
}
});
});
You can use the built-in MVC validation scripts along with the data annotaions on your model
public class AccountProfileEditViewModel
{
[Display(Name = "Address")]
[Required()]
[StringLength(200)]
public string Address { get; set; }
}
Make a partial view to hold your modal form.
_AccountProfileEdit.cshtml
@model AccountProfileEditViewModel
@using(Html.BeginForm("AccountProfileEdit", "Account",
FormMethod.Post, new { id = "form-accountedit-appt" }) {
@Html.ValidationSummary(true)
@Html.LabelFor(m => m.Address)
@Html.TextBoxFor(m => m.Address)
@Html.ValidationMessageFor(m => m.Address)
<button type="submit">Edit</button>
}
Then reference this in your modal box. If you want pre-populated model you'll need to render an action:
<div class="modal-body" id="form-container">
@Html.Action("AccountProfileEdit", "Account", new { id=account.Id })
</div>
If you just want a blank form then you can just use:
<div class="modal-body" id="form-container">
@Html.Partial("_AccountProfileEdit")
</div>
The action uses the id parameter to fetch and populate the model
[HttpGet]
public ActionResult AccountProfileEdit(int id)
{
AccountProfileEditViewModel model = db.GetAccount(id); // however you do this in your app
return PartialView("_AccountProfileEdit", model);
}
AJAX POST
Now you'll need AJAX to submit this form. If you rely on a standard form submission the browser will navigate away from your page (and close your modal).
$("#myModal").on("submit", "#form-accountedit", function(e) {
e.preventDefault(); // prevent standard form submission
var form = $(this);
$.ajax({
url: form.attr("action"),
method: form.attr("method"), // post
data: form.serialize(),
success: function(partialResult) {
$("#form-container").html(partialResult);
}
});
});
You need to use the event delegate $(staticParent).on(event, target, handler) for the submit event because the form content may be replaced later.
Post Action
[HttpPost]
public ActionResult AccountProfileEdit(AccountProfileEditViewModel model)
{
// Request.Form is model
if (ModelState.IsValid)
{
// do work
return PartialView("_AccountEditSuccess");
}
return PartialView("_AccountProfileEdit", model);
}
Client-side validation scripts should prevent them from ever submitting. But if that somehow failed or if you can't validate something on the client then you have ModelState.IsValid. You might also invalidate something server-side manually.
_AccountEditSuccess.cshtml
And the "success" partial view.
<div>Success! <button>Click to close</button></div>
Not Valid is a Fail, Right?
From your AJAX success handler you have
success: function(partialResult) {
$("#form-container").html(partialResult);
}
But the problem here is we don't know if you are getting a "success" or "validation failure". Adding an error: function(err){ } handler won't help because the validation failure is considered a HTTP 200 response. In both cases the div content is replaced the user will need to manually close the modal. There are ways to pass additional data to distinguish both conditions but that's another long answer post.
Consider put an iframe inside the modal div, instead of rendering partialView, this way you can develop the modal section the same way you develop simple pages, which submit, model, required etc...
this way:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modalAE" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3><strong>Edit Account Profile - <span class="accountname"></span></strong></h3>
</div>
<div class="modal-body">
<iframe src='myApp/AccountProfileEdit'/>
</div>
<div class="modal-footer">
<button type="submit" id="accountprofileedit-submit" name="accountprofileedit-submit" value="Edit Account" class="btn btn-primary" style="margin-left:5px;">Edit Account</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
</div>
}
</div>
</div>