javascript - Bootstrap 步骤选项卡在 html beginform() 中不起作用 - mvc 5

Question

我正在开发一个 View ，用户可以在其中逐步输入他/她的信息......

Step其实就是tabs你们都知道...

I am posting data to action, so i need to wrap all html code in Html.Beginform()...but wrapped code consists tabs which not works in html.beginform()

When i remove the Html.Beginform, the tabs work fine.....

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

可能的原因是什么，如果有人帮忙，请......任何类型的帮助或引用将不胜感激......谢谢你的时间

Answer 1

我看到您正在 form 中创建一个 form!!我希望您知道 Html.BeginForm 将再创建一个 form 并且在其中您将再放置一个 form 用于 stepy。 <强> Nesting Forms 在 HTML 中是不允许的。我认为您不需要在顶部编写 @Html.BeginForm 的 form 而是可以在下面使用其他 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">

我假设您只需要发布步数数据，相信我上述方法有效!