bootstrap stepy选项卡不能在html开始表单() - mvc5

时间:2015-07-01 03:20:26

标签: javascript jquery html twitter-bootstrap razor

我正在制作用户在步骤中输入他/她的信息的视图....

步骤实际上是你们都知道的标签...

  

我发布数据到行动,所以我需要包装所有的HTML代码   Html.Beginform()...但是包装代码包含不适用的选项卡   html.beginform()

     

当我删除Html.Beginform时,标签工作正常.....

我的HTML

@using (Html.BeginForm(FormMethod.Post))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
        <section id="main-content">
            <section class="wrapper site-min-height">
                <!-- page start-->
                <div class="row">
     <section class="panel">
    <header class="panel-heading">
        Registration
    </header>
    <div class="panel-body">
        <div class="stepy-tab">
            <ul id="default-titles" class="stepy-titles clearfix">
                <li id="default-title-0" class="current-step">
                    <div>Step 1</div>
                </li>
                <li id="default-title-1" class="disabled">
                    <div>Step 2</div>
                </li>
            </ul>
        </div>
        <form class="form-horizontal" id="default" name="myform">
            <fieldset title="Step1" class="step" id="default-step-0">
                <legend> </legend>
                <div class="form-group">
                    <label class="col-lg-2 control-label">Company Name</label>
                    <div class="col-lg-10">
                 <input type="text" class="form-control" id="Name" name="Name">
                    </div>
                </div>
            </fieldset>
            <fieldset title="Step 2" class="step" id="default-step-1">
                <legend> </legend>
           <div class="form-group">
            <label class="col-lg-2 control-label">Card Key</label>
           <div class="col-lg-10">
          <input type="text" class="form-control" id="CardKey" name="CardKey">
            </div>
           </div>
            </fieldset>
          <input type="submit" class="finish" value="Save" id="Free" />
        </form>
    </div>
</section>
                    </div>
                <!-- page end-->
            </section>
        </section>

Js功能

<script>
    //step wizard
    $(function () {
        $('#default').stepy({
            backLabel: 'Previous',
            block: true,
            nextLabel: 'Next',
            titleClick: true,
            titleTarget: '.stepy-tab'
        });
    });
</script>

可能的原因,如果有人帮忙,请给予任何帮助或参考......感谢您的时间

1 个答案:

答案 0 :(得分:3)

我看到你在form内创建form !!我希望您知道Html.BeginForm会再创建一个form,并在内部再添加一个form for stepy。 HTML中不允许使用 Nesting Forms 。我认为您在撰写form的顶部不需要@Html.BeginForm,而是可以使用下面相同的地方,而下面的form存在如下:

@using(Html.BeginForm("actionname","controllername",FormMethod.Post,new{@class="form-horizontal",id="default",name="myform"}))
{ 
   <fieldset title="Step1" class="step" id="default-step-0">
      <legend> </legend>
      <div class="form-group">
         <label class="col-lg-2 control-label">Company Name</label>
         <div class="col-lg-10">
            <input type="text" class="form-control" id="Name" name="Name">
         </div>
      </div>
   </fieldset>
   <fieldset title="Step 2" class="step" id="default-step-1">
      <legend> </legend>
      <div class="form-group">
         <label class="col-lg-2 control-label">Card Key</label>
         <div class="col-lg-10">
            <input type="text" class="form-control" id="CardKey" name="CardKey">
         </div>
      </div>
   </fieldset>
   <input type="submit" class="finish" value="Save" id="Free" />
}

以上Html.BeginForm助手将创建以下代码

<form action="/cname/ac" class="form-horizontal" id="default" method="post" name="myform">

我假设您只需要步骤数据发布并相信我上面的方法有效!