Asp.net MVC利用Ajax.BeginForm实现bootstrap模态框弹出，并进行前段验证

1.新建Controller

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal with Model & Form</h4>
</div>
<div class="modal-body">
@using (@Ajax.BeginForm(new AjaxOptions() {HttpMethod = "Post",OnSuccess = "formSuccess(data)"}))
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
@Html.ValidationSummary(true)

<div class="form-group">
@Html.LabelFor(model => model.FirstName, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.LastName, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.LastName)
@Html.ValidationMessageFor(model => model.LastName)
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.BirthDate, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.BirthDate)
@Html.ValidationMessageFor(model => model.BirthDate)
</div>
</div>
</div>

<div class="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) {
var container = $('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.前段验证

需加入相关的js文件：jquery.validate.unobtrusive.min.js

view中增加相关js

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

5.相关演示