Asp.net MVC利用Ajax.BeginForm實現bootstrap模態框彈出，並進行前段驗證

轉（http://www.cnblogs.com/bobo-show/p/4679697.html）

1.新建Controller

 public ActionResult Person(int? id)
        {
            //could add code here to get model based on id....
                return PartialView("_Person");
                //calling partial with existing model....
                //return PartialView("_Person", model);

        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Person(PersonValidationViewModel model)
        {
            if (!ModelState.IsValid)
            {
                    var errors = GetErrorsFromModelState();
                    return Json(new {success = false, errors = errors});
                //return PartialView("_Person", model);
            }

            //save to persistent store;
            //return data back to post OR do a normal MVC Redirect....
            return Json(new {success = true});  //perhaps you want to do more on return.... otherwise this if block is not necessary....
            //return RedirectToAction("Index");
        }

2.新建相應的index

<div class="jumbotron">
    <h1>@ViewBag.Title</h1>
    <p class="lead">Form binding to bootstrap modal with the Ajax Helpers<p>
</div>

@Ajax.ActionLink("Add Person", "Person",null,
new AjaxOptions() {HttpMethod = "Get",UpdateTargetId = "modalContent", InsertionMode = InsertionMode.Replace, OnBegin = "onBegin", OnSuccess = "onSuccess",OnFailure = "onFailure",OnComplete = "onComplete"},
new { id = "btnPerson", @class = "btn btn-lg btn-info" })


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="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 相關代碼

View Code

3.彈出模態框用partialView _Person

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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

View Code

4.前段驗證

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

view中增長相關js

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

Model

 public class PersonValidationViewModel
    {
        [StringLength(10,MinimumLength=2)]
        public string FirstName { get; set; }
        public string LastName { get; set; }
         [DataType(DataType.Date)]
        public string BirthDate { get; set; }
    }

 

在上一篇在Views的多級文件夾中，咱們在Controlls文件夾下新建了文件夾，那麼對於partialView怎麼處理呢？在admin_routing方法中添加以下代碼

 PartialViewLocationFormats = new[]
 {
                "~/Views/Shared/{0}.cshtml",
                 "~/Views/{1}/{0}.cshtml",
                "~/Views/Admin/{1}/{0}.cshtml"//自定義QMRisk的視圖
 };

便可在Views/Admin/WebUser文件夾下添加PartialView _Person
效果圖