Solved

Html.Begin Form and Nested Ajax.Begin Form Submit Issue?

Posted on 2014-07-21
16
2,399 Views
Last Modified: 2014-08-02
I have a Ajax.Begin nested inside a Html.Begin via a PartialView. Everytime I use the Ajax submit button to update the product list it fires the Html.Begin form. Not sure if there's a way to make this work.

 @using (Html.BeginForm("New", "Tasks", FormMethod.Post, new { id = "form1" }))
  {    
         <table>
                 <tr>
                     <td>
                         @Html.Label("Task")
                         <br />
                          @Html.EditorFor(m => m.Title, new { @class = "form-control" })
                     </td>
                 </tr>
          </table>

          <div id="Tasks">
                  @{ Html.RenderPartial("_TaskBuilder", Model); }
          </div>

          <button type="submit" class="btn btn-default">Submit</button>
  }

[partialview]
@using (Ajax.BeginForm("Update", "Tasks", new AjaxOptions { UpdateTargetId = "Tasks" })) 
{
    <table>
            <tr>
                <td style="vertical-align: top">
                    @Html.ListBoxFor(model => model.Selected, new MultiSelectList(Model.Products, "GroupId", "Name", )
                </td>

                <td>
                    <input type="submit" name="add" id="AddProducts" value=">>" />                  
                </td>

                <td style="vertical-align: top">
                </td>
            </tr>
        </table>
}

Open in new window

0
Comment
Question by:WorknHardr
  • 9
  • 7
16 Comments
 
LVL 96

Expert Comment

by:Bob Learned
ID: 40212200
How is the nested action supposed to work?  Are there two separate actions for one submit button?
0
 

Author Comment

by:WorknHardr
ID: 40212347
The nested Ajax.Begin form posts to an Action which returns the PartialView the Ajax.Begin form is in.
0
 

Author Comment

by:WorknHardr
ID: 40212357
It's this project and I placed the Listboxes inside a PartialView...
0
Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

 
LVL 96

Expert Comment

by:Bob Learned
ID: 40212364
The nested Ajax.Begin form posts to an Action which returns the PartialView the Ajax.Begin form is in.

That doesn't make any sense.  Can you explain in more detail what you mean?  I would expect an Html.Partial, and not a form action...
0
 

Author Comment

by:WorknHardr
ID: 40212708
I have the project zipped so you can see exactly what I mean. I don't know how to get it you though, no .zip file upload allowed...
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 40212802
I believe that your issue is multiple submit actions in a single view, and this article talks about possible solutions:

Handling multiple submit buttons on the same form - MVC Razor
http://www.dotnet-tricks.com/Tutorial/mvc/cM1X161112-Handling-multiple-submit-buttons-on-the-same-form---MVC-Razor.html
0
 

Author Comment

by:WorknHardr
ID: 40213018
thx for the link. It doesn't address the issue of nested forms. Maybe this is an issue that hasn't any work-around. I might be able to replace the nested ajax form with some other kind of post device. Unsure if a model can be posted using Jquery...
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 40213307
What would be the issue if you remove the nested forms, by moving the <div> outside?

@using (Html.BeginForm("New", "Tasks", FormMethod.Post, new { id = "form1" }))
  {    
         <table>
                 <tr>
                     <td>
                         @Html.Label("Task")
                         <br />
                          @Html.EditorFor(m => m.Title, new { @class = "form-control" })
                     </td>
                 </tr>
          </table>

          <button type="submit" class="btn btn-default">Submit</button>
  }

 <div id="Tasks">
       @{ Html.RenderPartial("_TaskBuilder", Model); }
  </div>
0
 

Author Comment

by:WorknHardr
ID: 40213316
I've been doing much reading and discover that nested forms is a bad way to go even if I find a work-around it will be difficult to maintain. So, my new idea is replacing the forms with Jquery. The jquery posts the viewmodel to the action and refreshes the _ParialView. Problem now is ListBox1 always has the same number of items and ListBox2 never has more than one item.
I have the project zipped so you can see exactly what I mean. I don't know how to get it you though, no .zip file upload allowed...
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 40214098
You should be able to post a .zip file to http://ee-stuff.com/.  You would just need to use your normal E-E login, and follow the instructions to upload, and associate with this question.
0
 

Author Comment

by:WorknHardr
ID: 40214395
Please find file here, thx
0
 

Author Comment

by:WorknHardr
ID: 40224370
Any success?
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 40226675
The problem that I see, is that once you add an item to the Requested list, and you click on the Add button again, the model doesn't represent the correct state.  The model is not persisted between posts to the partial view.

Debugging snapshot
0
 

Author Comment

by:WorknHardr
ID: 40235065
Do you have a solution in mind?
0
 
LVL 96

Accepted Solution

by:
Bob Learned earned 450 total points
ID: 40235554
My suggestion would be to store the object in a Session variable, and pass it back to the View from the POST controller action method.
0
 

Author Closing Comment

by:WorknHardr
ID: 40236483
Thx, that's a great idea to build on, thank you for looking a the project :)
0

Featured Post

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This video shows how to use Hyena, from SystemTools Software, to bulk import 100 user accounts from an external text file. View in 1080p for best video quality.
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question