Multiple rows have multiple submit buttons, should I make a form for each button?

Question

I am listing about 20 rows, each row represents an Order.

Each row needs to have 3 buttons, each button click will perform a different action.

I have 3 actions to handle each button post request, I am just unsure how to setup the Html forms for each button.

<tr>
<td>
<form method="post" action="/orders/do1"><input type=button ... /></form>
<form method="post" action="/orders/do2"><input type=button ... /></form>
<form method="post" action="/orders/do3"><input type=button ... /></form>
</td>
</tr>

Should I create 3 forms for each button, per row in my listing?

(that would mean 20 rows x 3 forms = 60 forms on a page)

Is that 'ok' to do? (i.e. or is there a better way to do this?)

Answer 1

I'd use a jQuery postback rather than a form but that depends on what you are doing in your controller.

It'd be handy if you could expand on the question to include that detail.

For example, if the buttons are Create, Delete and Update then use a single form, going to a different ActionResult.

It's row should be a partial view IMHO and you should have a single form.

Answer 2

From the snippet you've posted, I'm going to presume that you don't care about actually submitting any form data to your action - just invoking the correct action (with maybe some data that can be specified directly in the action url, like an id/index)

If that is the case, then you don't even need a submit button for this. Just a plain link (which you can style to look like a button, either yourself or using jQueryUI, thus keeping things simple and pretty)

If you do need to submit form data to your action, just give your submit buttons the same name and different values and check (or have your model binder work out) exactly which one invoked the action and let your controller act accordingly.

See here (the second answer, hehe, the accepted one actually uses multiple forms) and here (this one is actually using some funky stuff that might be a bit of an overkill, and not entirely appropriate when generating an unknown number of submit buttons, but insteresting nonetheless)

Answer 3

No. Asp.net HATES seeing multiple forms. Just give the buttons a different ID/name/value or something.

Answer 4

No.. No.. No. Multiple forms are a bad bad idea. Yes, you can do this. And Yes you will experience weird behavior such as "what happens when the user pushes enter?"

Each of the browsers handle seeing multiple forms in the same html document slightly differently. Save yourself the trouble and handle this differently.

Answer 5

Is this not an asp.net question? Could you not use a repeater, datalist, datagrid? Then you could handle each button click with the controls OnItemCommand.

Answer 6

I think you should use javascript in this case, only one form for all or each form per row, shouldn't each form per button.

<input type=button onclick="do_action_one(row_i_value1, ....)" ... />
<input type=button onclick="do_action_two(row_i_value1, ....)"... />
<input type=button onclick="do_action_three(row_i_value1, ....)"... />

Answer 7

Supporting multiple submit buttons on an ASP.NET MVC view

Check this solution! I like this pattern, because fit MVC style.

Answer 8

There are two realistic options.

1. Use multiple forms
2. Use one big form and give each submit button a different name, which results in some long winded server side code, but works.

There are other alternatives, but they have limitations.

1. Depending on JavaScript violates rule 2.
2. One form per table row can't be achieved with valid markup.
3. Using <button> elements with one big form would let you have sensible labels and values, but breaks in Internet Explorer (until version 8 IIRC).

I'm working on the assumption that you want something like "Delete" and "Edit" for each row and want to avoid "Delete row 1", "Edit row 1" etc. If that is an incorrect assumption then it might be that you can have one big form, use <input type="submit"> and have consistent names and sensible values.