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
Solved

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

Posted on 2014-07-21
16
2,459 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
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.

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

809 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