ASP.NET MVC Tip #4 - Handling Multiple Form Actions on One View

Scenario:

You have a view which renders a list of customers.  You need to provide a way to delete customers from this table view of the data.  In your "CustomersController" you have a Delete action which takes a Customer ID.  How do we go about providing the user with a simple interface where multiple actions can be posted from one view?

Solution:

There's basically two approaches we can take to solve this.  One is to use javascript to get the ID of the customer from the DOM,  handle the "onclick" event and submit the form to a "javascript generated" action.  The other option is to render multiple forms on the view.  For this exercise, we'll concentrate on the latter technique.

In a typical web forms based ASP.NET application, we're used to having one form per page.  In the MVC framework, we're in ful control of the HTML rendered which means we can have more than one form on the page.  This means that each form can post to a different action.  Assume we have a collection of Smurfs which will be rendered on a view.  This ViewPage will use a strongly typed ViewData with the list of Smurfs.  As we're rendering the view, we simply need to set the parameters of the form accordingly.

 

At this point, we simply handle the controller action as any other form.  The actual HTML output looks like this.  Notice how the action uses the item.ID.


We'll explore the technique with JavaScript in a later post.  Hope this helps! 

6 Comments

  • Do you really need the form at all? Can't you instead just do a href pointing to /controller/delete/id or do you have server-side processing code that only allows deletes that come in via POST?

  • I just double-checked, in the current stock ASP.NET MVC bits you don't need to even wrap a form around everything if you're just using a "delete" link vs. a button next to your items, so this code works just as well without all the extra HTML generated for the form tags:





    ()




    Now there may be actual semantic issues why you'd want to use buttons over links and I'm sure someone more versed in the semantic web could set me straight but I see more action links these days when viewing multiple items vs. action buttons.

  • Yes you're right. I should have probably gone a little further in the example to show some edit functionality as well. I'm thinking more along the lines of what we typically see in a GridView control (edit / delete / update). The edit form would be another hidden div on the View. Thanks!

  • Shawn, ut's really important that you use a button for the delete function, so that the request can be sent as a POST.

    If you use a normal tag and allow GET requests, then anyone whose browser has one of those "speed up" add-ons, like Google Web Accelerator, will pre-crawl all the hyperlinks and delete all the customers.

    The only alternative to multiple FORM tags is to submit POST requests from Javascript.

  • I got the use of multiple form tags, but how to access elements of particular form tag using javascript...

  • Relying on javascript here would seem a bad apporach, affecting WAI accessibility and Section 508 compliance.

    More importantly, implemented wrongly, wouldn't it simply use whichever action was the originally rendered one on the form... or rely on having no action on the form in the first instance and failure to do anything in a non-js client environment.

    Is another option to allow a generic controller do delegate the handling of which ever button was clicked (looing for the request variable of that button on the HttpRequest) to then call the appropriate controller method?

Comments have been disabled for this content.