How to post to 2 separate forms in different tab panels

Question

My ASP.NET MVC application includes a Razor view with 3 tabs with a bunch of fields.

tab 1-2 has a bunch of fields
tab 3 should have a file upload section which should be rendered from a partial view.

Here is the structure:

    <body>
        <div class="container well" >
            @using (Html.BeginForm(new { Action = "action X",id="publishingForm" })) {
                @Html.AntiForgeryToken()
    @Html.ValidationSummary()

                <div class="form-horizontal">    


                    <div class="tabbable"> 
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#requiredtab" data-toggle="tab"><span><strong>Step 1:</strong></span> Enter required fields</a></li>
                            <li><a href="#optionaltab" data-toggle="tab"><strong>Step 2:</strong> Enter optional fields</a></li>
                            <li><a href="#uplaodtab" data-toggle="tab"><strong>Step 3:</strong> Upload your video</a></li>
                        </ul>

                        <div class="tab-content">

                            <div class="tab-pane active" id="requiredtab">

                            </div>

                            <div class="tab-pane" id="optionaltab">         


                            </div>

                            <div class="tab-pane" id="uplaodtab">
partial view here

                            </div>

                        </div>

                    </div>

                </div>
                }
        </div>
        </body>
</html>

As you can see the tab Divs are wrapped in a form (post to Controller X).

The problem is the partial view for the file upload also includes a form which should post to a handler. But when I initiate a file upload in Tab 3 it is attempting to post to Controller X of the original form.

How can I structure my view to have the fields included in the form on tabs 1 & 2 post to Controller X and the Form in Tab 3 post to its correct handler?

The bottom line is I am trying to post separately to 2 different forms included in different tab panels

Answer 1

i suggest that you wrap your two forms with Ajax Forms, and you can submit them both asynchronously

   @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "updateDiv" }))
   {
      <input type="submit" id="submitForm1" value="OK" />
   }

   <div id="updateDiv"></div>


    @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "updateDiv2" }))
   {
     <input type="submit" id="submitForm2" value="OK" />
    }

  <div id="updateDiv2"></div>

 and call the  .click() for each submit button whenever your code needs to.

How to post to 2 separate forms in different tab panels

Question

1 answers

solution1
0 2013-09-09 01:38:24

How to post to 2 separate forms in different tab panels

Question

1 answers

solution1 0 2013-09-09 01:38:24

solution1
0 2013-09-09 01:38:24