Solved

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

Posted on 2014-07-21
16
2,616 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…
Finding and deleting duplicate (picture) files can be a time consuming task. My wife and I, our three kids and their families all share one dilemma: Managing our pictures. Between desktops, laptops, phones, tablets, and cameras; over the last decade…

752 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