ASP.NET MVC5 Bootstrap 3模式窗体未验证客户端并且正在回发到页面

Question

我有一个MVC5应用程序,我刚刚开始做一些Ajax.我有一个带按钮的页面,当点击它时会打开一个带有来自另一个动作的表单的Bootstrap模态.但是,当提交该模式窗体时,不调用jquery不显眼的验证,并且页面重定向到空白页面上的局部视图,而不是模态对话框内部.

所以,1:我如何在模态中使用jquery验证,以及2:如何使表单不刷新页面,而是将返回的视图重新加载到模态中？3:我对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>

或者在Partial View中尝试这个:

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

回答第2和第3个问题: -正如我在您的问题中看到的那样,您已经在使用,Ajax.BeginForm()因此在提交表单时不应重新加载页面...只需检查您是否包含了jquery.unobtrusive-ajax.min.js js文件或不.

并在web.config文件中添加以下代码:

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