0
Ich habe einen mehrstufigen Formular-Assistenten, die sieben (7) Schritte durchlaufen.JQuery Multi-Schritt-Formular in asp.net mvc
Controller:
private RegistrationEntities db = new RegistrationEntities();
public ActionResult Index()
{
return View();
}
Ausblick:
<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 -->Die Fragen sind:
- Wie II jeder Schritt Validate sichere Werte zu machen sind, vor dem gehen zum nächsten Schritt eingegeben
- Nachdem Sie die 7 Schritte ausführen, wie zu tun gültig ich, dass die Werte werden vor dem Speichern korrekt eingegeben.
- Nachdem ich den 7. Schritt abgeschlossen hatte, klickte ich auf die Schaltfläche Fertig, kein Datensatz wurde in der Tabelle CONTRACTORS gespeichert.
- In Schritt2, wenn RC_NUMBER eingegeben wird, sollte es überprüfen, ob es bereits existiert. Es sollte es verwenden, um COMPANY_NAME in Schritt 3 zu füllen, aber wenn es nicht vorhanden ist, sollte es dem Benutzer erlauben, COMPANY_NAME in Schritt 3 einzugeben
- Nach dem Abschließen der gesamten Schritte und die Schaltfläche Fertig klicken, sollte es um Willkommen Modell mit ActionResult Welcome umleiten