我有一个多步骤表单向导,经过七(7)步。
控制器:
private RegistrationEntities db = new RegistrationEntities();
public ActionResult Index()
{
return View();
}
查看:
<div class="title_right">
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Contractors <small>Pre-Registration</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li>
<a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">Settings 1</a>
</li>
<li>
<a href="#">Settings 2</a>
</li>
</ul>
</li>
<li>
<a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<p>Kindly Follow the Procedures for the Pre-Registration Process.</p>
<div id="wizard" class="form_wizard wizard_horizontal">
<ul class="wizard_steps">
<li>
<a href="#step-1">
<span class="step_no">1</span>
<span class="step_descr">
Step 1<br />
<small>Step 1: Ownership Confirmation</small>
</span>
</a>
</li>
<li>
<a href="#step-2">
<span class="step_no">2</span>
<span class="step_descr">
Step 2<br />
<small>Step 2: RC Number</small>
</span>
</a>
</li>
<li>
<a href="#step-3">
<span class="step_no">3</span>
<span class="step_descr">
Step 3<br />
<small>Step 3: Company Name</small>
</span>
</a>
</li>
<li>
<a href="#step-4">
<span class="step_no">4</span>
<span class="step_descr">
Step 4<br />
<small>Step 4: TIN Number/Company Details</small>
</span>
</a>
</li>
<li>
<a href="#step-5">
<span class="step_no">5</span>
<span class="step_descr">
Step 5<br />
<small>Step 5: Company's Email</small>
</span>
</a>
</li>
<li>
<a href="#step-6">
<span class="step_no">6</span>
<span class="step_descr">
Step 6<br />
<small>Step 6: Other Company Details</small>
</span>
</a>
</li>
<li>
<a href="#step-7">
<span class="step_no">7</span>
<span class="step_descr">
Step 7<br />
<small>Step 7: Captcha</small>
</span>
</a>
</li>
</ul>
<div id="step-1">
<form class="form-horizontal form-label-left">
<div class="form-group">
<div class="col-lg-12">
<div class="col-lg-3">
<div class="form-group">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<div class="radio">
@Html.RadioButtonFor(m => m.OWNERSHIP_STRUCTURE, 1, new { @class = "DoPopup", id = "Foreign Company", value = "" }) Foreign Company
</div>
<div class="radio">
@Html.RadioButtonFor(m => m.OWNERSHIP_STRUCTURE, 2, new { @class = "DoPopup", id = "Foreign Owned Nigerian Company", value = "" }) Foreign Owned Nigerian Company
</div>
<div class="radio">
@Html.RadioButtonFor(m => m.OWNERSHIP_STRUCTURE, 3, new { @class = "DoPopup", id = "Nigerian Company", value = "" }) Nigerian Company
</div>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
</div>
</div>
</div>
</div>
</form>
</div>
<div id="step-2">
@*<h2 class="StepTitle">Step 2 Content</h2>*@
<form class="form-horizontal form-label-left">
<div class="col-lg-12">
<div class="form-group">
@Html.LabelFor(model => model.RC_NUMBER, new { @class = "col-lg-2 control-label" })
<div class="col-lg-9">
@Html.TextBoxFor(model => model.RC_NUMBER, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.RC_NUMBER)
</div>
</div>
</div>
</form>
</div>
<div id="step-3">
@*<h2 class="StepTitle">Step 3 Content</h2>*@
<form class="form-horizontal form-label-left">
<div class="form-group">
<div class="col-lg-12">
<div class="form-group">
@Html.LabelFor(model => model.COMPANY_NAME, new { @class = "col-lg-2 control-label" })
<div class="col-lg-9">
@Html.TextBoxFor(model => model.COMPANY_NAME, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.COMPANY_NAME)
</div>
</div>
</div>
</div>
</form>
</div>
<div id="step-5">
<form class="form-horizontal form-label-left">
<div class="col-lg-12">
<div class="form-group">
@Html.LabelFor(model => model.COMPANY_CONTACT_EMAIL, new { @class = "col-lg-2 control-label" })
<div class="col-lg-9">
@Html.TextBoxFor(model => model.COMPANY_CONTACT_EMAIL, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.COMPANY_CONTACT_EMAIL)
</div>
</div>
</div>
</form>
</div>
<div id="step-6">
<form class="form-horizontal form-label-left">
<div class="col-lg-12">
<div class="form-group">
<div class="col-lg-2">
Alternative E-mail
</div>
<div class="col-lg-9">
@Html.TextBoxFor(model => model.COMPANY_CONTACT_ALTERNATIVE_EMAIL, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.COMPANY_CONTACT_ALTERNATIVE_EMAIL)
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<div class="col-lg-2">
Website
</div>
<div class="col-lg-9">
@Html.TextBoxFor(model => model.WEBSITE, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.WEBSITE)
</div>
</div>
</div>
<h3>Login Details</h3>
<hr />
<div class="col-lg-12">
<div class="col-lg-1">
</div>
<div class="form-group">
<div class="col-lg-2">
Username
</div>
<div class="col-lg-8">
@*<i class="glyphicon glyphicon-user"></i>*@
<input class="form-control input-lg" name="MERGE0" id="email" type="email" placeholder="Email address" required>
</div>
</div>
<div class="col-lg-1">
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-1">
</div>
<div class="form-group">
<div class="col-lg-2">
Password
</div>
<div class="col-lg-8">
@*<i class="glyphicon glyphicon-user"></i>*@
<input class="form-control input-lg" name="MERGE1" id="password" type="password" placeholder="Password" required>
</div>
</div>
<div class="col-lg-1">
</div>
</div>
</form>
</div>
<div id="step-7">
<form class="form-horizontal form-label-left">
<div class="col-lg-12">
<div class="col-lg-1">
</div>
<div class="form-group">
<div class="col-lg-10">
@Html.MathCaptcha()
@* @Html.Captcha(3)*@
<br />
<p class="Error"> @ViewBag.ErrMessage </p>
</div>
</div>
<div class="col-lg-1">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
}
<!-- jQuery Smart Wizard -->
<script>
$(document).ready(function () {
$('#wizard').smartWizard();
$('#wizard_verticle').smartWizard({
transitionEffect: 'slide'
});
$('.buttonNext').addClass('btn btn-success');
$('.buttonPrevious').addClass('btn btn-primary');
$('.buttonFinish').addClass('btn btn-default');
});
</script>
<!-- /jQuery Smart Wizard -->
&#13;
问题是:
答案 0 :(得分:0)
请检查以下问题的答案:
1。)jQuery SmartWizard允许我们在声明时添加onLeaveStep:leaveAStepCallback
字段。 leaveAStepCallback
是单击下一个按钮时将调用的函数。您可以在此函数中实现验证逻辑。请浏览this网址以获取完整的建议。
2。)jQuery SmartWizard还允许我们在声明时添加onFinish:onFinishCallback
字段。在这种情况下,将在完成所有步骤后调用onFinishCallback
函数。您可以在此处查看所有输入是否有效,然后提交表单。如果你已经通过答案1中的链接,你一定知道了。
3.。)您需要进一步详细说明为什么细节没有保存在DB中?您的控制器操作是否被调用?如果是,请检查您的数据库保存逻辑以进一步查找问题,因为这不是SmartWizard的问题。
4。)正如我在步骤1中提到的那样,在单击下一个按钮时绑定要调用的回调函数。在此功能中,您可以使用context.fromStep
获取步骤编号。之后,您可以对服务器进行ajax调用,以检查该值是否已存在。根据需要实现自定义逻辑。
5.如果您使用$('form').submit()
提交表单,则可以在成功操作后从控制器重定向自定义视图。如果您正在进行ajax调用,请重定向到ajax调用的sucess
函数中的另一个控制器。