asp.net mvc中的JQuery多步表单答案

【问题标题】：JQuery Multi-step form in asp.net mvcasp.net mvc中的JQuery多步表单
【发布时间】：2017-05-29 07:43:58
【问题描述】：

我有一个经过七 (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 -->

问题是：

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

【问题讨论】：

标签： asp.net-mvc

【解决方案1】：

请检查以下问题的答案：

1.) jQuery SmartWizard 允许我们在声明时添加onLeaveStep:leaveAStepCallback 字段。 leaveAStepCallback 是单击下一步按钮时将调用的函数。您可以在此函数中实现您的验证逻辑。请通过this URL 了解完整的想法。

2.) jQuery SmartWizard 还允许我们在声明时添加onFinish:onFinishCallback 字段。在这种情况下，onFinishCallback 函数将在所有步骤完成后调用。您可以在此处检查所有输入是否有效，然后提交表单。如果您浏览过答案 1 中的链接，您一定已经明白了。

3.) 您需要进一步详细说明为什么没有将详细信息保存在数据库中？你的控制器动作被调用了吗？如果是，请检查您的数据库保存逻辑以进一步查找问题，因为这不是 SmartWizard 的问题。

4.) 正如我在第 1 步中提到的，当单击下一个按钮时绑定要调用的回调函数。在此函数中，您可以使用context.fromStep 获取步数。之后，您可以对服务器进行 ajax 调用以检查该值是否已存在。根据需要实现您的自定义逻辑。

5.) 如果您使用$('form').submit() 提交表单，您可以在操作成功后从控制器重定向自定义视图。如果您正在进行ajax调用，请在ajax调用的sucess函数中重定向到另一个控制器。

【讨论】：