Question

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

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

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

Answer 1

您可以依赖角色和数据目标属性的内置引导功能。如果您将模态的角色定义为＆＃34;对话框＆＃34;并给它一个id然后你可以在带有数据目标和数据切换属性的HTML按钮中引用它。

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

以下是我为实现目标而采取的措施：

首先修改_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 click事件代码。

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

现在，bootstrap将使用定义的角色和数据属性自动处理显示和隐藏对话框，并且MVC验证将正确显示。您可以按原样保留控制器代码。

ASP.net MVC 4验证在引导程序Modal和PartialView中

1 个答案: