Question

I’m loading using $.load() a .aspx page on a div of a parent .aspx, let’s say. When the content is loaded a new form is placed in the code, inside the aspnetForm. I’ve done this before in a very similiar way, but this time the submit button is submitting the new form to the ajax loaded page, not the aspnetForm parent page.

Edit:
More details

When the user choose a set of items from a list, they’re loaded by ajax like this:

$("#gvContacts").load("MailingContacts.aspx?ids="+$("#filters").val() + "&removedContacts=" + $("#removedContacts").val() + "&action=<%=Convert.ToInt16(this.Action) %>", function());

MailingContacts is a aspx webForm with a GridView inside. When the .load puts the HTML on the div it goes like this:

<form id="form1" action="MailingContacts.aspx?ids=11&amp;removedContacts=&amp;action=2" method="post" name="form1">
<!-- GridView code -->

</form>

and for some reason, the Button that submits the page is using this new form instead of the original aspnetForm.

Answer 1

You’re not allowed to have nested forms – if you add a new set of <form> tags inside the main parent form you’ll end up in a world of pain.

Basically, you’re bypassing the server-side validation of this by creating the nested form in the client side. I imagine that your submit button is then using the last form action it finds on the page, rather than the “parent” action.

You should either:

1. Load the JavaScript created form into a <div> outside of the main ASP.NET form control (you are allowed multiple forms on a page, just not nested).
2. Build your main form in such a way that it can handle the form contents of MailingContacts, and remove the Form tags from it.
3. Rather than returning a whole page of HTML including a GridView over AJAX, just return collection of user details, and render them into a list with jQuery, etc – you’re sending a lot more data than you need to sending all that HTML.