ASP。NET MVC5引导3模式表单未验证客户端，正在发回页面

Question

我有一个MVC5应用程序，我刚刚开始对它进行一些Ajax操作。我有一个带有按钮的页面，单击该按钮会打开一个引导模式，其中包含来自另一个操作的表单。但是，当提交该模式表单时，不会调用jquery非干扰性验证，页面会重定向到空白页面上的部分视图，而不是在模式对话框中。

因此，1：如何让jquery验证在模式内部工作，2：如何使表单不刷新页面，而是将返回的视图重新加载到模式中？第三：我对Ajax的使用方式感到困惑。BeginForm应该可以工作，因为我假设它不会创建页面刷新。

这是包含用于加载模式的按钮的页面：

@using Plus.ViewModels
@model UserViewModel
@{
    ViewBag.Title = "Personal Details";
}
@using (Html.BeginForm(null, null, FormMethod.Post, new { @class = "form-horizontal" }))
{
    @Html.AntiForgeryToken()
// A separate form here

<div class="form-actions">
    <button class="btn btn-primary" type="submit">
      <i class="fa fa-save"></i>
       Save
    </button> |

 <a class="btn btn-primary" href="@Url.Action("ChangePassword", "Manage", new object{})" data-toggle="modal" data-target="#myModal">Change Password</a>

</div>
}


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>

@section Scripts {
    <script type="text/javascript">
        $('#myModal').on('shown.bs.modal', function () {
            jQuery.validator.unobtrusive.parse($(this));
        })
    </script>   
}

包含要在模式对话框中提交的表单的视图：

@model Plus.ViewModels.ChangePasswordViewModel
@{
    ViewBag.Title = "Change Password";
    Layout = "";

    AjaxOptions options = new AjaxOptions();
    options.HttpMethod = "POST";
    options.Url = Url.Action("ChangePassword", "Manage");
    options.UpdateTargetId = "modalForm";
    options.InsertionMode = InsertionMode.Replace;
}

@using (Ajax.BeginForm("ChangePassword", "Manage", null, options, new { @class = "form-horizontal", role = "form" }))
{
    <div id="modalForm">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Change Password</h4>
        </div>
        <div class="modal-body">

            @Html.AntiForgeryToken()
            @Html.ValidationSummary("", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(m => m.OldPassword, new { @class = "col-md-6 control-label" })
                <div class="col-md-6">
                    @Html.PasswordFor(m => m.OldPassword, new { @class = "form-control" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.NewPassword, new { @class = "col-md-6 control-label" })
                <div class="col-md-6">
                    @Html.PasswordFor(m => m.NewPassword, new { @class = "form-control" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-6 control-label" })
                <div class="col-md-6">
                    @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
                </div>
            </div>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Change Password</button>
        </div>
    </div>
}

操作的控制器：

public ActionResult ChangePassword()
{
    ChangePasswordViewModel cpvm = new ChangePasswordViewModel();
    return PartialView(cpvm);
}

//
// POST: /Manage/ChangePassword
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> ChangePassword(ChangePasswordViewModel model)
{
    if (!ModelState.IsValid)
    {
        return PartialView(model);
    }
    var result = await UserManager.ChangePasswordAsync(User.Identity.GetUserId(), model.OldPassword, model.NewPassword);
    if (result.Succeeded)
    {
        return Json(new { success = true });
    }
    // Failed
    AddErrors(result);
    return PartialView(model);
}

Answer 1

第一个问题的答案：-只需将JS文件，即Jquery Unobtrusive JS文件包含在您正在以模态打开的局部视图中，即可正常工作，有时此问题在asp的局部视图中出现。net mvc。

只需在局部视图中包含此js文件：

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

或者在局部视图中尝试此操作：

$.validator.unobtrusive.parse($("form"));

第二个和第三个问题的答案：-正如我在你的问题中看到的，你已经在使用Ajax了。BeginForm（）因此在提交表单时不应重新加载页面。。。只需检查是否包含jquery。低调的ajax。是否为min.js文件。

并在web中添加以下代码。配置文件：

<appSettings>
  <add key="ClientValidationEnabled" value="true" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>