Jquery Ajax loading form on asp.net webform

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

This is because the action property set in the form tag has an value that tells it where to submit...in ASP.Net this by default is the URL of the page.

e.g. a form from my current project outputs like this:

<form name="aspnetForm" method="post" action="/Admin/Report/497" id="aspnetForm" />

Answer 2

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.