在asp.net中的jQuery多步表单mvc

我有一个多步表单向导，需要经过七（7）个步骤。在asp.net中的jQuery多步表单mvc

控制器：

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 -->

的问题是：

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

来源

2017-05-29 Jibike

请检查问题的答案如下：

1）jQuery的智能向导让我们添加onLeaveStep:leaveAStepCallback场而宣布。 leaveAStepCallback是当你点击下一个按钮时将被调用的函数。你可以在这个函数中实现你的验证逻辑。请通过this网址获取完整的想法。

2.）jQuery SmartWizard还允许我们在声明时添加onFinish:onFinishCallback字段。在这种情况下，将在所有步骤完成后调用onFinishCallback函数。如果所有输入都有效，可以在此处查看，然后提交表单。如果你已经通过回答1中的链接，你一定有这个想法。

3.）您需要进一步阐述为什么细节未保存在数据库中？你的控制器操作是否被调用？如果是，请检查您的DB保存逻辑以进一步查找问题，因为这不是SmartWizard的问题。

4.）正如我在步骤1中提到的那样，绑定在下一个按钮被点击时调用的回调函数。在此功能中，您可以使用context.fromStep获取步骤编号。之后，您可以调用服务器的ajax来检查值是否已经存在。根据需要实施您的自定义逻辑。 5.如果您使用$('form').submit()提交表单，则可以在成功操作后重定向自定义视图。如果您正在进行ajax呼叫，请重定向至另一个控制器，该呼叫的sucess函数为ajax呼叫。

来源

2017-05-29 08:23:05 Saket

在asp.net中的jQuery多步表单mvc

回答

相关问题