Ajax或Javascript不工作的向导第二步
Ajax or Javascript not working on Wizard second step
我在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>
对应的Action方法是，
[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);
}
在控制台中没有错误。在页面上调用脚本文件的顺序是:
<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>
请检查代码并帮助我识别问题。由于
好吧。我总算解决了我的问题。以前我对文件jquery. unobtrusitive -ajax.js有一些问题，因为它使用了一个过时的函数"live"，它需要被替换为"on"才能工作。这解决了错误。但是，当我到处检查问题时，我无法找到Ajax停止工作的任何线索。为了确保一切都是最新的，我一个接一个地更新了所有Nuget包。问题持续存在，但当我更新jquery. unobtrusiu - Ajax .js包然后问题得到解决，一切都开始工作良好(验证和Ajax)。所以我把这个答案贴出来，可能会有帮助。
相关文章：
- 当单击第一个李时，它显示内容一，当单击第二个李时，它显示内容二
- 使用ajax将数据从一个步骤发送到下一个步骤的3步表单
- 对父作用域的指令更新延迟了一步
- 作为一个二维数组，从ajax接收
- 如何查找值是否存在于二叉树中
- 移动触发二'单击'事件
- 如何计算二十面体的法线
- 创建P5.js二维数组
- 在WebGL中绘制多个二维图像
- 如何在Javascript中从select标记的一系列选项中构建二维数组
- inArray，indexOf在二维数组中
- 比较二维数组js
- Parsley.js，多步骤表单，在移动到上一步时跳过验证
- 引导表单向导 - 防止在提交 ajax 响应的每个页面表单出现错误时滚动到下一步
- FuelUX向导组件-如何允许用户直接进入最后一步
- 引导向导:如何从JavaScript进入下一步
- 如何阻止jQuery智能向导在回车键上进入下一步
- 在向导表单上使用欧芹(3步)
- 如何在向导的 Rails 中使用 JavaScript 隐藏/显示返回/下一步按钮
- Ajax或Javascript不工作的向导第二步
