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

Question

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

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); });