Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3060
  • Last Modified:

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

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
WorknHardr
Asked:
WorknHardr
  • 9
  • 7
1 Solution
 
Bob LearnedCommented:
How is the nested action supposed to work?  Are there two separate actions for one submit button?
0
 
WorknHardrAuthor Commented:
The nested Ajax.Begin form posts to an Action which returns the PartialView the Ajax.Begin form is in.
0
 
WorknHardrAuthor Commented:
It's this project and I placed the Listboxes inside a PartialView...
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Bob LearnedCommented:
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
 
WorknHardrAuthor Commented:
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
 
Bob LearnedCommented:
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
 
WorknHardrAuthor Commented:
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
 
Bob LearnedCommented:
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
 
WorknHardrAuthor Commented:
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
 
Bob LearnedCommented:
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
 
WorknHardrAuthor Commented:
Please find file here, thx
0
 
WorknHardrAuthor Commented:
Any success?
0
 
Bob LearnedCommented:
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
 
WorknHardrAuthor Commented:
Do you have a solution in mind?
0
 
Bob LearnedCommented:
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
 
WorknHardrAuthor Commented:
Thx, that's a great idea to build on, thank you for looking a the project :)
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 9
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now