Can i have One form tag inside Another in ASP.net MVC RC2

Question

Hi all, I am currently Developing application in MVC2 I have want to used mutiple form tags in My application In My View I have Created a table which has Delete option which i am doing through Post for Individual Delete so i have Create form tag for each button. i also want user to give option to delete mutiple records so i am providing them with checkboxes.This form should have all the values of checkboxes and all. so form gets render Like this

for Each delete button

 <form action="/Home/MutipleDelete" method="post">   
<input class="button " name="Compare" type="submit" value="Mutipledelete" style="margin-right:132px;"  />

<input id="chk1" name="chk1" type="checkbox" value="true" />

<form action="/Home/Delete" method="post"> 

    <input type="submit"  class="submitLink"  value="member1" />

     <input type="hidden" name="hfmem1" id="hfmem1" value="1"  />  

                 </form>
<input id="chk2" name="chk2" type="checkbox" value="true" />

<form action="/Home/Delete" method="post"> 

    <input type="submit"  class="submitLink"  value="member2" />

     <input type="hidden" name="hfmem2" id="hfmem2" value="2"  />  

                 </form>


           </form>

The following is not working . but IF i write my code that form renders in this way

    <form action="/Home/MutipleDelete" method="post">   

<input class="button " name="Compare" type="submit" value="Mutipledelete" style="margin-right:132px;"  />
</form>
<input id="chk1" name="chk1" type="checkbox" value="true" />

<form action="/Home/Delete" method="post"> 

    <input type="submit"  class="submitLink"  value="member1" />

     <input type="hidden" name="hfmem1" id="hfmem1" value="1"  />  

                 </form>
<input id="chk2" name="chk2" type="checkbox" value="true" />

<form action="/Home/Delete" method="post"> 

    <input type="submit"  class="submitLink"  value="member2" />

     <input type="hidden" name="hfmem2" id="hfmem2" value="2"  />  

                 </form>

it is working in Mozilla but not in IE.I have debug and Checked values in formcollection In contoller.What to do.?

Answer 1

Nesting of forms is not allowed and may result in an undefined behavior between browsers.

Answer 2

Conceptually, a form within a form doesn't really make sense. Can you not use Action Links in place of the buttons on the inner forms? You can still style them to look like buttons.

Answer 3

In XHTML, a form in a form is not allowed and it doesn't really make sense.

To accomplish what you are trying to do, you should use simple links/buttons in your table. These could, for example, send a 'delete' request to your server and, upon succesful completion of the request, also remove the entry from the UI using jQuery.

Example:

    [Authorize]
    [HttpPost]
    public JsonResult Delete(Guid id)
    {
         // do stuff, delete the item
         return Json(succeeded ? Id.ToString() : "error");
    }

in the view

<a href="#" onclick="$.post('/Stuff/Delete/' + id, function(data) { deleteCallback(data); }); return false;">delete</a>

function deleteCallback(data)
{
  if(data=="error"){
    /* error handler for UI */
  }
  else {
    /*remove the entry from the user interface*/
  }
};

If you want to do multi-delete, you should not transfer the list of IDs to delete using the URL (because there is a 2k limitation in IE and it looks nasty), but instead use the following syntax:

arrayVariable = new Array(); 
// fill array with ids associated to checked checkboxes' entries
$.post('/Stuff/Delete/' + id, {'IdsToDelete' : arrayVariable }, function(data) { deleteCallback(data); }); return false;">

This can be automatically serialized to a real .NET list, so you will just have to iterate list of integers or GUIDs, or whatever your PKs look like!

EDIT: This is still a bit simplified. For security reasons, you should protect yourself from CSRF (Cross-Site Request Forgery). Darin provided a great answer how to do that.

This will add the [ValidateAntiForgeryToken] to your controller's method and the view will need to contain something like

var token = $('input[name=__RequestVerificationToken]').val();
$.post("/YourUrl", { 'IdsToDelete' : arrayVar, '__RequestVerificationToken': token }, function(data) { deleteCallback(data); });

Answer 4

Why not just use a single form and use multiple submit buttons? You need to carefully interpret the result but that allows you to do it without javascript and without needing to do twisted html.

You may need to read the Request.Params directly but that's relatively easy enough to deal with.

<form action="<%= Html.Encode(Url.Action("Delete"))%>">
<ul>
<li>Item 1 <input type="submit" id="<%= IDSafe(item_id) %>" name="<%= IDSafe(item_id2) %>" value="Delete" /></li>
<li>Item 2 <input type="submit" id="<%= IDSafe(item_id2) %>" name="<%= IDSafe(item_id2) %>" value="Delete" /></li>
</ul>
<input type="submit" name="deleteall" value="Delete selected" />
</form>

Answer 5

I think this will not be possible using post. Since using post we can find which submit button was clicked but will not able to find the value of submit button if we want to display some value to show the user and other value which we want to submit to database.

in this case my submit button is generated Dynamically

<input type="submit" name="submitbutton"   id="<%= Html.Encode(item.ideletevalue) %>" class="submitLink"   value=" <%= Html.Encode(item.deleteitemname)%>"/>