ASP.NET MVC5 Bootstrap 3 模态表单未验证客户端并回发到页面

Posted 2023-05-08

【中文标题】ASP.NET MVC5 Bootstrap 3 模态表单未验证客户端并回发到页面

【英文标题】：ASP.NET MVC5 Bootstrap 3 Modal Form not validating client-side and is posting back to page

【发布时间】：2014-10-30 01:26:02

【问题描述】：

我有一个 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);

【参考方案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.unobtrusive-ajax.min.js js 文件。

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

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

【讨论】：

谢谢！ #1 是固定的。我以为它会从主视图加载，但显然没有。 #2，我已经在使用@Ajax.BeginForm，所以我认为它应该可以工作，但这就是为什么我有问题 3

我没有 jquery.unobtrusive-ajax.min.js。奇怪，我以为它会与一个新的 .NET MVC5 项目捆绑在一起。

@RhysStephens ..这就是你的问题的原因，只需添加 js 文件，一切都会好的..谢谢..

谢谢！现在一切正常。所以它对我来说很有意义#3，现在它确实有效！！！

@Kartikeya，感谢您的出色解决方案。它对我有用。