引导模式和部分视图中的 ASP.net MVC 4 验证答案

【问题标题】：ASP.net MVC 4 Validation Within bootstrap Modal and PartialView引导模式和部分视图中的 ASP.net MVC 4 验证
【发布时间】：2014-05-06 19:46:33
【问题描述】：

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

Create 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部分视图：

@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") }

Index 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> }

那么我必须添加或更改以在我的模态中进行客户端验证并将服务器验证重定向到模态，而不是像图片中的新页面？

【问题讨论】：

我认为您需要为动态加载的新 HTML 元素重新解析验证器：stackoverflow.com/questions/6691958/… 此外，您可能需要将 Html.BeginForm 设置为类似 Html.BeginForm(action, controller, method, null) 以避免奇怪查询字符串。
@ALMMa 感谢验证我解决了这个问题，但是如何解决重定向问题？
@Chlebta 你有没有解决这个问题，它不会将你重定向到新页面并实际显示服务器端验证？我有同样的问题。
@Chlebta 您是否解决了客户端验证问题并重定向到没有模式的新页面（仅查看页面）并实际显示模式中的服务器端验证错误？我在 2017 年 7 月（3 年后）遇到了同样的问题。

标签： javascript jquery asp.net-mvc validation twitter-bootstrap

【解决方案1】：

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

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

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

首先修改 _Index 以加载部分视图并更新 modalDiv 以定义角色。

<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 将使用定义的角色和数据属性自动处理显示和隐藏对话框，并且 MVC 验证将正确显示。您可以保留控制器代码原样。

【讨论】：