当表单条目已清除验证时，使用 jquery unobtrusive 不会触发服务器端代码

Question

我正在使用 GridMVC 在使用 Entity Framework6 的 ASP.net MVC5 中显示我的数据。

我可以使用每行上的编辑、删除按钮成功显示网格数据。我还在网格顶部添加了新记录按钮。

单击 "Add New" 或“编辑”按钮后，会打开一个 bootstrap 模式弹出窗口。我已将服务器端验证放入我的模型中，如下所示：-

public class QueSchedule
    {
        public int Id { get; set; }
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        [Required]
        public Nullable<System.DateTime> Date { get; set; }
        [Required]
        public Nullable<int> PersonelID { get; set; }
        [Required]
        public string OnCallType { get; set; }
        public string Comments { get; set; }

        public virtual PersonnelLocal PersonnelLocal { get; set; }
        public virtual QnsCallType QnsCallType { get; set; }
    }

我可以在单击 "Add" 和 "Edit" 时打开弹出窗口，但是当验证失败时，模态弹出窗口会在新页面中打开，而不是显示为弹出窗口。因此，为了解决这个问题，我使用了 Ajax 表单并添加了 jquery 验证脚本。（部分视图_Create.cshtml如下所示）

<script src="~/Scripts/jquery.validate.js"></script>

<script src="~/Scripts/jquery.validate.unobtrusive.js">
</script>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Add new Person</h4>
</div>

<div id="validation">
    <div id="ajaxform">
        @using (Ajax.BeginForm("Create", "Queens", new AjaxOptions() { UpdateTargetId = "validation", HttpMethod = "Post" }, new { id = "Create" }))
        {
            @Html.AntiForgeryToken()
            <div class="modal-body">

                <div class="form-horizontal">
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <div class="form-group">
                        @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-3" })
                        <div class="col-md-9">
                            @Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.PersonelID, htmlAttributes: new { @class = "control-label col-md-3" })
                        <div class="col-md-9">
                            @Html.DropDownListFor(model => model.PersonelID, (SelectList)ViewBag.PersonelID, "-Select-", htmlAttributes: new { @class = "form-control dropdown" })
                            @Html.ValidationMessageFor(model => model.PersonelID, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.OnCallType, htmlAttributes: new { @class = "control-label col-md-3" })
                        <div class="col-md-9">
                            @Html.DropDownListFor(model => model.OnCallType, (SelectList)ViewBag.OnCallType, "-Select-", htmlAttributes: new { @class = "form-control dropdown" })
                            @Html.ValidationMessageFor(model => model.OnCallType, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Comments, htmlAttributes: new { @class = "control-label col-md-3" })
                        <div class="col-md-9">
                            @Html.EditorFor(model => model.Comments, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Comments, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <button class="btn" data-dismiss="modal">Cancel</button>
                <input class="btn btn-primary" type="submit" value="Save" />
            </div>
        }
    </div>
</div>

现在验证只发生在弹出窗口上。但问题是当所有输入的数据都正确时，保存按钮事件不会触发 HttpPost 方法 Create 以使其正常工作。

 // GET: People/Create
        public ActionResult Create()
        {
            ViewBag.PersonelID = new SelectList(db.PersonnelLocals.Where(o => o.QueensLocal == true), "Index", "Text");
            ViewBag.OnCallType = new SelectList(db.QnsCallTypes, "CallTypeID", "CallType");
            return PartialView("_Create");
        }

        [HttpPost]

        [ValidateAntiForgeryToken]
        public async Task<ActionResult> Create([Bind(Include = "Id,Date,PersonelID,OnCallType,Comments")] QnsAttendingCallScheduleNew1 qnsattendingcallschedulenew1)
        {
            if (ModelState.IsValid)
            {
                db.QnsAttendingCallScheduleNew1.Add(qnsattendingcallschedulenew1);
                await db.SaveChangesAsync();
                return RedirectToAction("Index");
                //return Json(new { success = true });
            }
            ViewBag.PersonelID = new SelectList(db.PersonnelLocals.Where(o => o.QueensLocal == true), "Index", "Text", qnsattendingcallschedulenew1.PersonelID);
            ViewBag.OnCallType = new SelectList(db.QnsCallTypes, "CallTypeID", "CallType", qnsattendingcallschedulenew1.OnCallType);
            return PartialView("_Create", qnsattendingcallschedulenew1);
        }

为什么会这样。请帮忙。

此外，当单击“编辑”或“删除”时（在“创建”之后），它会显示相同的模式弹出窗口，而不会点击 Edit/Delete GET 方法。

为什么这些方法停止触发。

编辑1：- 观察到的行为是

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

data-dismissal 属性只是隐藏模态而不是破坏它。虽然其他网页上有代码显示破坏数据

$('#myModal').on('hide.bs.modal', function () {
   $('#myModal').removeData();
})

我已经把它放在我的索引页面上了：-

<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content" id='myModalContent'>
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

但是没用:( post 方法如果通过验证则不会触发事件的第一个问题仍然存在。

--更新2-- 如果我使用 @using (Html.BeginForm()) 而不是 @using (Ajax.BeginForm..) 行为保持不变。请帮忙。

Answer 1

问题在于使用了错误的 javascript 库。而不是

<script src="~/Scripts/jquery.validate.js"></script>

我用过这个：

<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>

所以我在 _Create 中更新的脚本标签如下所示：-

<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js">
</script>

当表单条目已清除验证时，使用 jquery unobtrusive 不会触发服务器端代码

Using jquery unobtrusive doesn't fire the server side code when form entries have cleared validation

ajax

jquery

unobtrusive-validation

twitter-bootstrap

asp.net-mvc-5