JQuery mvc中的asp.net多步表单
JQuery mvc中的asp.net多步表单
提问于 2017-05-29 07:43:58
我有一个多步表单向导，它经过七个步骤。
控制器：
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 -->
问题如下：
- 如何验证每个步骤，以确保在进入下一个步骤之前输入值
- 完成这7个步骤后，如何有效地在保存之前正确地输入值。
- 完成第7步后，我单击Finish按钮，没有将记录保存到CONTRACTORS表中。
- 在step2中，当输入RC_NUMBER时，应该检查它是否已经存在。它应该使用它来填充COMPANY_NAME中的step3，但是如果它不存在，它应该允许用户在step3中输入COMPANY_NAME
- 在完成整个步骤并单击Finish按钮后，应该使用ActionResult欢迎重定向到欢迎模型
回答 1
Stack Overflow用户
发布于 2017-05-29 08:23:05
请核对以下问题的答案：
1.)jQuery SmartWizard允许我们在声明时添加onLeaveStep:leaveAStepCallback字段。leaveAStepCallback是在单击next按钮时调用的函数。您可以在这个函数中实现您的验证逻辑。请通过这网址获得完整的想法。
2.)jQuery SmartWizard还允许我们在声明时添加onFinish:onFinishCallback字段。在本例中，在完成所有步骤后将调用onFinishCallback函数。您可以在这里检查所有输入是否有效，然后提交表单。如果你已经通过了答案1中的链接，你一定有了这个想法。
3.)您需要进一步解释为什么没有将细节保存在DB中？您的控制器操作被呼叫了吗？如果是，请检查DB保存逻辑，以进一步查找问题，因为这不是SmartWizard的问题。
4.)正如我在步骤1中提到的，它绑定了单击next按钮时要调用的回调函数。在这个函数中，您可以使用context.fromStep获得步骤号。之后，您可以对服务器进行ajax调用，以检查该值是否已经存在。根据需要实现您的自定义逻辑。
5.)如果使用$('form').submit()提交表单，则可以在成功操作后从控制器重定向自定义视图。如果您正在进行ajax调用，请重定向到ajax调用的sucess函数中的另一个控制器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44237103
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号