javascript - Bootstrap Modal 和 PartialView 中的 ASP.net MVC 4 验证

Question

在我的应用程序中，我使用简单的查看验证，客户端和服务器端验证都工作正常，但现在我已更改为 Bootstrap 模式和 PartialView。
问题是客户端验证不再起作用，对于服务器端验证，当我单击提交时，他将我重定向到新页面(参见图片)，而不是在当前模式弹出窗口中显示错误。

创建 Controller :

[HttpGet]
        public ActionResult Create()
        {
            ViewBag.CAT_ID = new SelectList(db.CATEGORIE, "CAT_ID", "LIBELLE");
            ViewBag.C_GARANT = new SelectList(db.GARANTIE, "C_GARANT", "LIB_ABREGE");
            return PartialView("_Create");
        }

        //
        // POST: /Taux/Create

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(TAUX taux)
        {
            if (ModelState.IsValid)
            {
                db.TAUX.Add(taux);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            ViewBag.CAT_ID = new SelectList(db.CATEGORIE, "CAT_ID", "LIBELLE", taux.CAT_ID);
            ViewBag.C_GARANT = new SelectList(db.GARANTIE, "C_GARANT", "LIB_ABREGE", taux.C_GARANT);
            return PartialView("_Create", taux);
        }

_Create 部分 View :

@model pfebs0.Models.TAUX
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="CreateTaux">Add</h3>
</div>
@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)


    <div class="modal-body">
        <div class="form-group">
           <div class="form-group">
            <label for="Categorie">Categorie : </label>
            @Html.DropDownList("CAT_ID", String.Empty)
            @Html.ValidationMessageFor(model => model.CAT_ID)
           </div>
           //Other Form input.
      </div>
       <div class="modal-footer">
            <button type="submit" class="btn btn-default">Submit</button>
       </div>
}

</div>
     <script>
            $("select").addClass("form-control");
            $("input").addClass("form-control");
            $("label").addClass("control-label");
    </script>
 @section Scripts {
    @Scripts.Render("~/bundles/jqueryval") }

索引 View 我放置模式的位置:

<p>
       @Html.ActionLink("Ajouter", "Create", "Taux",
                new { id = "btnAdd", @class="btn btn-default"})
</p

        <div id="modalDiv" class="modal fade" >
            <div class="modal-dialog">
                </div>
        </div>
    @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    $(function () {

        $.ajaxSetup({ cache: false });

        $('#btnAdd').click(function () {
            $('.modal-dialog').load(this.href, function () {
                $('#modalDiv').modal({
                    backdrop: 'static',
                    keyboard: true
                }, 'show');
            });
            return false;
        });
    });
 </script> }

那么我必须添加或更改什么才能在模式中进行客户端验证并将服务器验证重定向到模式，而不是如图所示的新页面？

Answer 1

您可以依赖 Angular 色和数据目标属性的内置 Bootstrap 功能。如果您将模式的 Angular 色定义为“对话框”并为其指定一个 id，那么您可以在具有 data-target 和 data-toggle 属性的 HTML 按钮中引用它。

您还需要避免从 ajax 请求加载 _Create 部分。只需使用@Html.Partial 将其与索引一起加载即可。如果属性设置正确，它不会出现在您的 View 中。

以下是我为使其正常工作所做的步骤:

首先修改您的 _Index 以加载部分 View 并更新您的 modalDiv 以定义 Angular 色。

<div class="modal fade" id="modalDiv" tabindex="-1" role="dialog" aria-hidden="true">
 @Html.Partial("~/{PathToView}/_Create.cshtml", new pfebs0.Models.TAUX())
</div>

现在，不要使用 @HtmlActionLink 和 JavaScript 来加载对话框，而是创建一个按钮，如下所示。确保删除 JS 点击事件代码。

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalDiv">Ajouter</button>

现在 bootstrap 将使用定义的 Angular 色和数据属性自动处理显示和隐藏对话框，并且 MVC 验证将正确显示。您可以保留 Controller 代码不变。