0

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.

Eduardo Mello
  • 925
  • 3
  • 15
  • 32

3 Answers3

4

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.
Zhaph - Ben Duguid
  • 26,785
  • 5
  • 80
  • 117
  • I'll try your suggestions. That thing is, even though I agree is not the best idea, I've done it the same thing on other webform an it just goes right. I've been trying to emulate it, but i'm missing something. Thank you – Eduardo Mello Jan 11 '10 at 16:13
  • Hi. Using jquery, json, and Asp.NET WebMethod I've managed to get the third option running. Beyond that, I've implemented pagination using a dynamic scroll that loads content by parts, as the user scroll down, like this: http://www.webresourcesdepot.com/dnspinger/ – Eduardo Mello Jan 14 '10 at 18:16
0

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" />
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • Yes, i know that. The problem is the page is submitting the new form not the aspnetForm. Did you understand what is my problem? – Eduardo Mello Jan 11 '10 at 12:12
0

How to add an IxQuick Search Box inside form tags "nested" in your asp.net form tags, complete with submit function.

Salve! I had a similar problem. I had an aspx page built on a master page which contained the asp.net form tag. Now, I wanted an Ixquick searchbox on that page, but I needed to enclose it inside of form tags to make it work; but, of course, you can't have nested form tags in the aspx page.

Here is how I solved my problem:

I created the entire searchbox in jquery and added it to the aspx page by using jquery to replace an empty div. Javascript runs in the client after the server serves up its code, thereby bypassing any issue with nested divs. This also avoids any issue with the master page's submit behaviour for the master page's form tag. You get your own form tag in the outputted html, and your own submit behaviour.

Put these two lines in your aspx page where you want your search box to appear.

<div id="search"></div>
<script type="text/javascript">AddSearchBox("#search");</script>

And in my .js file, I added:

function AddSearchBox(where){
var SearchingForm = "<form id='metasearch' name='metasearch' method='POST' accept-charset=' UTF-8' action='javascript:SearchBarSubmit()' ><input name='keyword' type='text' size='32' id='searchbox' /><input type='submit' value='WebSearch'  id='searchbutton' /></form> "
$(where).html(SearchingForm);
return false;
}

function SearchBarSubmit(){
var searchquery = $('#searchbox').val();
location.href="http://ixquick.com/do/metasearch.pl?query=" + searchquery + "&cat=web&language=english&cmd=process_search&frm=sb&linkback_url=http://www.mywebsite.com&linkback_sitename=mySiteName";
return false;
}

Now, whenever someone types into my searchbox, it automatically runs the searchquery in IxQuick and displays the results - just like it would in a normal html form. And what's better, if they don't have javascript turned on, they don't get a broken searchbox, because they get no searchbox at all! I don't mind that, because I am adding the searchbox for the sake of being nifty.

If you use this code, make sure to change "www.mywebsite.com" to your own website, and make sure to change the linkback of "mySiteName" to your website's name.

Community
  • 1
  • 1
bgmCoder
  • 6,205
  • 8
  • 58
  • 105
  • This works until your page/masterpage tries to do a postback, then your viewstate will be corrupt. (In IE only, Chrome and Firefox have no problem with this.) – Dustin Brooks Mar 21 '12 at 11:50