asp.net mvc中的JQuery多步骤表单

时间:2017-05-29 07:43:59

标签: asp.net-mvc

我有一个多步骤表单向导,经过七(7)步。

image

控制器:

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>

}

&#13;
&#13;
    <!-- 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;
&#13;
&#13;

问题是:

  1. 如何验证每个步骤以确保输入值以进入下一步
  2. 完成7个步骤后,如何在保存前正确输入值。
  3. 完成第7步后,我点击了Finish按钮,没有记录保存到CONTRACTORS表中
  4. 在步骤2中,输入RC_NUMBER时,应检查它是否已存在。它应该使用它来填充第3步中的COMPANY_NAME,但如果它不存在,则应该允许用户在第3步中输入COMPANY_NAME
  5. 完成整个步骤并单击完成按钮后,应使用ActionResult Welcome重定向到欢迎模型

1 个答案:

答案 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函数中的另一个控制器。