jquery - 如何在 MVC 应用程序中使用 Jquery 创建向导？
问题描述
我创建了没有按预期工作的向导。它总是显示第一个和第二个向导步骤。但我只想要一个向导，然后当点击 时Next，应该显示第二个向导，并且第三个向导的显示方式相同。最后，我想实现previousand submit。
脚本
$(function ()
{
$(".wizard-step:first").fadeIn();
$("#back-step").hide().click(function ()
{
var $step = $(".wizard-step:visible");
if ($step.prev().hasClass("wizard-step")) {
$step.hide().prev().fadeIn();
if (!$step.prev().prev().hasClass("wizard-step")) {
$("#back-step").hide();
}
}
});
$("#next-step").click(function ()
{
var $step = $(".wizard-step:visible");
var validator = $("form").validate();
var anyError = false;
$step.find("input").each(function ()
{
if (!validator.element(this)) {
anyError = true;
}
});
if (anyError)
return false;
if ($step.next().hasClass("confirm")) {
$.post("/wizard/confirm", $("form").serialize(), function (r)
{
$(".wizard-step.confirm").html(r);
});
}
if ($step.next().hasClass("wizard-step")) {
$step.hide().next().fadeIn();
$("#back-step").show();
}
else {
$("form").submit();
}
});
});
看法
<div class="Wizard-step">
<div class="panel panel-default">
<h4>BASIC INFO</h4>
<div class="panel-body">
<div class="form-group has-success ">
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="input-group">
@Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
<span class="input-group-addon"><i class="glyphicon glyphicon-ok"></i></span>
</div>
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.EmailId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.EmailId, new { htmlAttributes = new { @class = "form-control" } })
<i class="glyphicon glyphicon-ok"></i>
</div>
@Html.ValidationMessageFor(model => model.EmailId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.DOB, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.DOB, new { htmlAttributes = new { @class = "form-control" } })
<i class="glyphicon glyphicon-calendar"></i>
</div>
@Html.ValidationMessageFor(model => model.DOB, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="CoursesStudiedYesNo" style="padding-left:6em;">
@Html.Label("Have you studied before?")
<br />
@Html.RadioButtonFor(m => m.StudiedYesNo, "Yes")<span id="SpacebetweenRadioandText">Yes</span><br />
@Html.RadioButtonFor(m => m.StudiedYesNo, "No", new { @checked = "checked" })<span id="SpacebetweenRadioandText">No</span>
</div>
</div>
<div class="form-group ">
<div class="CoursesDropdown" style="padding-left:6em;">
@Html.LabelFor(model => model.CoursesStudied, htmlAttributes: new { @class = "control-label " })
<br />
@Html.DropDownListFor(m => m.CoursesStudied, Model.CoursesStudiedList, "Choose the course you have studied here", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.CoursesStudied, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
</div>
<div class="wizard-step" style="display:none">
<div class="panel panel-default">
<h4>CONTACT DETAILS</h4>
<div class="panel-body">
<div class="form-group">
@Html.Label("Phone", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control" } })
<i class="glyphicon glyphicon-ok"></i>
</div>
@Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.Label("Mobile", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.mobileNumber, new { htmlAttributes = new { @class = "form-control" } })
<i class="glyphicon glyphicon-ok"></i>
</div>
@Html.ValidationMessageFor(model => model.mobileNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.Label("Address", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.Street, new { htmlAttributes = new { @class = "form-control", placeholder = "Street" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.Suburb, new { htmlAttributes = new { @class = "form-control", placeholder = "Sub" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control", placeholder = "City" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.Region, new { htmlAttributes = new { @class = "form-control", placeholder = "Region" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.Country, new { htmlAttributes = new { @class = "form-control", placeholder = "Country" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wizard-step" style="display:none">
<div class="panel panel-default">
<h4>SELECT A COURSE</h4>
<div class="panel-body">
<div class="form-group">
@Html.Label("Course", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(m => m.CourseName, Model.CourseNameList, "Choose a course", new { @class = "form-control" })
</div>
</div>
</div>
</div>
</div>
<div class="wizard-step" style="display:none">
<div class="panel panel-default">
<h4>SUMMARY</h4>
<div class="panel-body">
<div>
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.Name)
</dt>
<dd>
@Html.DisplayFor(model => model.Name)
</dd>
<dt>
@Html.DisplayNameFor(model => model.EmailId)
</dt>
<dd>
@Html.DisplayFor(model => model.EmailId)
</dd>
<dt>
@Html.DisplayNameFor(model => model.DOB)
</dt>
<dd>
@Html.DisplayFor(model => model.DOB)
</dd>
<dt>
@Html.DisplayName("Study History")
</dt>
<dd>
@Html.DisplayFor(model => model.CoursesStudied)
</dd>
<dt>
@Html.DisplayNameFor(model => model.PhoneNumber)
</dt>
<dd>
@Html.DisplayFor(model => model.PhoneNumber)
</dd>
<dt>
@Html.DisplayNameFor(model => model.mobileNumber)
</dt>
<dd>
@Html.DisplayFor(model => model.mobileNumber)
</dd>
<dt>
@Html.DisplayName("Address")
</dt>
<dd>
@Html.DisplayFor(model => model.Street)
</dd>
<dd>
@Html.DisplayFor(model => model.Suburb)
</dd>
<dd>
@Html.DisplayFor(model => model.City)
</dd>
<dd>
@Html.DisplayFor(model => model.Region)
</dd>
<dd>
@Html.DisplayFor(model => model.Country)
</dd>
<dt>
@Html.DisplayName("Selected Course")
</dt>
<dd>
@Html.DisplayFor(model => model.CourseName)
</dd>
</dl>
</div>
</div>
</div>
</div>
解决方案
推荐阅读
- azure - 为什么 Azure CLI 在尝试运行 New-AzResourceGroupDeployment 时报告 ResourceGroupNotFound？
- matlab - 为什么节程序不运行？
- java - 使用 MockMvc 对控制器进行单元测试时如何捕获 logger.error 消息？
- c# - 无缘无故得到“参数计数不匹配”
- swift - iOS 13 SearchController 后退按钮颜色
- javascript - 如何在 JavaScript 测验中更改正确答案的颜色
- html - 如何在水平子导航中居中项目
- javascript - 如何访问 JSCValue 对象的属性
- pip - 安装 OSMnx 和 GeoPandas 时出现错误消息
- java - 如何从自定义对话框中获取数据并在 recyclerview 中创建新项目？