Solved

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

Posted on 2014-07-21
16
2,212 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
Comment Utility
How is the nested action supposed to work?  Are there two separate actions for one submit button?
0
 

Author Comment

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

Author Comment

by:WorknHardr
Comment Utility
It's this project and I placed the Listboxes inside a PartialView...
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

Author Comment

by:WorknHardr
Comment Utility
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
Comment Utility
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
Comment Utility
Please find file here, thx
0
 

Author Comment

by:WorknHardr
Comment Utility
Any success?
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
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
Comment Utility
Do you have a solution in mind?
0
 
LVL 96

Accepted Solution

by:
Bob Learned earned 450 total points
Comment Utility
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
Comment Utility
Thx, that's a great idea to build on, thank you for looking a the project :)
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

744 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now