Ajax或Javascript在向导第二步上不起作用

Question

我在MVC 5项目中创建了一个简单的向导。 该向导包括两个步骤，分别呈现为部分视图和一个主视图，在该主视图上呈现了两个局部视图。 我的主视图（Register.cshtml）的代码如下，

@{
ViewBag.Title = "Register";
}

<div class="warper container-fluid">

<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
            <div id="divContainer">
                @Html.Partial("_RegisterBasic")
            </div>
        </div>
    </div>
</div>

第一个PartialView是_RegisterBasic，其代码如下所示，

@model MyProject.Models.PersonalDetail

@{
    AjaxOptions options = new AjaxOptions();
    options.HttpMethod = "POST";
    options.InsertionMode = InsertionMode.Replace;
    options.UpdateTargetId = "divContainer";
}

<div class="panel-heading">Registration Form - Step 1 (BasicDetail)</div>
<div class="panel-body">
    <div class="col-md-12">
    @using (Ajax.BeginForm("RegisterBasic", "Account", options, new { @class = "validator-form form-horizontal", role = "form", id = "RegisterBasicForm" }))
    {
        @Html.AntiForgeryToken()

        <div class="form-group">
            @Html.LabelFor(m => m.ContactName, new { @class = "col-sm-3" })
            <div class="col-md-9">
                @Html.TextBoxFor(m => m.ContactName, new { @class = "form-control", placeholder = "Contact Name (Optional)" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.Address1, new { @class = "col-sm-3" })
            <div class="col-md-9">
                @Html.TextAreaFor(m => m.Address1, new { @class = "form-control" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.Address2, new { @class = "col-sm-3" })
            <div class="col-md-9">
                @Html.TextAreaFor(m => m.Address2, new { @class = "form-control" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.Town, new { @class = "col-sm-3" })
            <div class="col-md-9">
                @Html.TextBoxFor(m => m.Town, new { @class = "form-control", placeholder = "Town name (Optional)" })
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-12">
                <button name="btnNext" type="submit" class="btn btn-success pull-right">Next</button>
            </div>
        </div>
    }
</div>

第二个PartialView是_RegisterAccount，其代码是

@model eFormation_MVC.Models.RegisterUser

@{
    AjaxOptions options = new AjaxOptions();
    options.HttpMethod = "POST";
    options.InsertionMode = InsertionMode.Replace;
    options.UpdateTargetId = "divContainer";
}

<div class="panel-heading">Registration Form - Step 2 (Account Detail)</div>
<div class="panel-body">
    <div class="col-md-12">
    @using (Ajax.BeginForm("RegisterAccount", "Account", options, new { @class = "validator-form form-horizontal", role = "form", id = "RegisterAccountForm" }))
    {
        @Html.AntiForgeryToken()


        <div class="form-group">
            @Html.LabelFor(m => m.Email, new { @class = "col-sm-3" })
            <div class="col-md-9">
                @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "Valid Email" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.Password, new { @class = "col-sm-3" })
            <div class="col-md-9">
                @Html.PasswordFor(m => m.Password, new { @class = "form-control", placeholder = "Password" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-sm-3" })
            <div class="col-md-9">
                @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control", placeholder = "Re-Type your Password" })
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-12">
                <button id="btnRegisterUser" name="btnNext" type="submit" class="btn btn-success pull-right">Register</button>
            </div>
        </div>
    }
</div>

各自的操作方法是

    [AllowAnonymous]
    public ActionResult Register()
    {
        return View();
    }

    [AllowAnonymous]
    [HttpPost]
    public ActionResult RegisterBasic(PersonalDetail data, string btnNext)
    {
        if (btnNext != null)
        {
            if (ModelState.IsValid)
            {
                Session["Personal"] = data;
                return PartialView("_RegisterUser");
            }
        }

        return PartialView("_RegisterBasic", data);
    }

    [AllowAnonymous]
    [HttpPost]
    public ActionResult RegisterUser(RegisterUser data, string btnPrev, string btnNext)
    {
        if (btnNext != null)
        {
            if (ModelState.IsValid)
            {
                Session["User"] = data;
                return PartialView("_RegisterUser");
            }
        }
        else if (btnPrev != null)
        {
            return PartialView("_RegisterBasic", (PersonalDetail)Session["Personal"]);
        }

        return PartialView("_RegisterUser", data);
    }

现在，Ajax在步骤1上运行正常。客户端验证也在步骤1上运行。当我通过输入基本详细信息在步骤1上单击“下一步”按钮时，它向我显示了第二步绝对正确。 但是在步骤2（“帐户详细信息”）上，验证停止了。 另外，当我在第2步上单击“提交”按钮时，该呼叫不是Ajax，并且页面是回发的。 现在看来，Javascript或已停止在JQuery的至少不引人注意的部分停止工作，因为没有任何验证在第2步（由jquery.validate.unobtrusive.js完成）和Ajax在由jquery.unobtrusive-完成。 ajax.js.

在控制台中，它们没有错误。 页面上脚本文件的调用顺序是：

<script src="/Scripts/modernizr-2.8.3.js"></script>

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

<script src="/Scripts/jquery-ui-1.11.4.js"></script>

<script src="/Scripts/jquery.blockUI.js"></script>

<!-- jQuery Backstretch Plugin -->
<script src="/js/jquery.backstretch.min.js"></script>

<!-- Bootstrap -->
<script src="/assets/js/bootstrap/bootstrap.min.js"></script>

<!-- Chosen -->
<script src="/assets/js/plugins/bootstrap-chosen/chosen.jquery.js"></script>

<!-- moment -->
<script src="/assets/js/moment/moment.js"></script>

<!-- NanoScroll -->
<script src="/assets/js/plugins/nicescroll/jquery.nicescroll.min.js"></script>

<!-- DateTime Picker -->
<script src="/assets/js/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>


<!-- Bootstrap Validator -->
<script src="/assets/js/plugins/bootstrap-validator/bootstrapValidator.min.js"></script>


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

请检查代码并帮助我确定问题所在。 谢谢

Answer 1

好。 我已经以某种方式解决了我的问题。 以前，我对文件jquery.unobtrusive-ajax.js遇到了一些问题，因为它使用的是过时的功能“实时”，需要将其替换为“开”才能工作。 这样就解决了错误。 但是，当我到处检查问题时，我找不到任何线索说明Ajax为何停止工作。 为了确保所有内容都是最新的，我一一更新了所有Nuget软件包。 问题仍然存在，但是当我更新jquery.unobtrusive-ajax.js程序包时，问题得到解决，并且一切正常（验证和Ajax）。 所以我发布了这个答案，所以这可能会有所帮助。