Jquery Ajax loading form on asp.net webform - asp.net

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&removedContacts=&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.

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:
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).
Build your main form in such a way that it can handle the form contents of MailingContacts, and remove the Form tags from it.
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.

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" />

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.

Related

Not able to add form tag inside Content Page

I have a Master Page and a Content Page. I have Check In Check Out small form in Master Page and I have a Contact form in Content page. But while running the website, I am getting the error which says:A page can have only one server side form tag. When I remove the form tag from the Content Page. Then,it says the Textbox should be placed within a form tag. But I want both the forms,since both are necessary. So please help me so that I can have both the forms.
There can be only one <form> tag on the whole page, that is just how webforms work. In your case it is in the master page. The pages using the Master do not and should not have <form> tags.
But from your question it seems that you think you are using master pages, but are actually not. See this page as to how the .aspx pages are supposed to look with master and child pages.
https://learn.microsoft.com/en-us/aspnet/web-forms/overview/older-versions-getting-started/master-pages/creating-a-site-wide-layout-using-master-pages-cs
It is not possible to add more than one form in a single aspx file. Otherwise try to use iframe in that page.Inside the iframe we can use another aspx page.

ASP.NET two forms

I have been trying to integrate the jquery file upload component into my project. Currently it works fine when there is only that component on the page.
The component uses the form tag as the drag and drop area on the page. This is an issue since there can be only one form tag in an asp.net web form page. In addition, the form tag defines the action that uploads the file.
This is how the form code looks like:
<form id="fileupload" action="api/FileHandler" method="POST" enctype="multipart/form-data">
I want this component to be in the middle of the page. How do I go about doing this?
Thanks.
EDIT: This is the file upload component!
I am using this example!
As the link that #MikeSmithDev suggested I changed the form tag into a div tag and that fixed it. It seems having a form and an action where not being used as a form. The JQuery code did the setup of the drag and drop area, setup the event, and raised the event based on the tag with the specified ID. So the form tag was not really necessary.

Asp.Net nested form

I need to supply an html form (not a server form) for searching within an asp.net web-forms website. The form will post to another website where an indexed search is performed. Seeing as nested forms don't work well in asp.net, what is the simplest approach for this?
The nested form is a simple html form that performs a "get" against the search website, which I do not have programmatic control over.
Update: I resolved my issue by simply moving the server form to the appropriate place on the page, rather than having it surround the entire page. However, I'm still wondering how this would be handled if the html form needed to be placed physically between server controls (which require the server form).
However, I'm still wondering how this would be handled if the html form needed to be placed physically between server controls (which require the server form).
You can place controls on your page without requiring an HtmlForm.
In your case there's no issue declaring another form markup, but you could also just use some search control on your main form and make it issue a GET to that website.
Not only do nested forms "not work well," you basically can't have >1 form per page at all. The simplest approach is the approach you are forced to go with: write a page that only uses one <form runat="server"></form>. Since you need search functionality, is there no ASP.NET search box control that you could use?
Have a read here.
There are 4 workarounds:
Use an IFRAME
Force Submission to Navigate Using a GET Request
Dynamically Change the Form Action
Use a 3rd Party Form Handler
More details on http://www.revindex.com/Blogs/tabid/65/EntryID/21/Default.aspx
Nested forms don't work well in HTML full stop! You should never do it.
Perhaps you mean more than one form on page? Whilst it's true you can only have one form with runat="server", I can't see any reason why you couldn't have a standard form (not server form) that posted to another site at the same level (ie. not nested).
Try adding your HTML input elements to wherever you want the nested form to be. Then use JQuery to change the page form action to point to the external Website. The entire form is submitted, but with a different external Url. The minor downside is the values for all input elements on the page are posted, but most times that is not big deal.
(I only tried this using a POST, not a GET. This is basically Roman O's #3 workaround in more detail)
<div id="nested-form">
<input type="text" name="q">
<input name="searchbtn" value="Go" type="submit" class="search-button">
</div>
<script>
$(function() {
$("input.search-button").click(function() {
$('form').get(0).setAttribute('action', 'http://external.com');
});
});
</script>
maybe you try Server.Transfer() to your target page that do the search from a button for example!

How does one call method exists in a page from another page?

I'm working on a page, in which other pages are opened from it in a modal way.
I need to call function exists in opener page to update certain controls in it.
I'm using window.open to open another window but in this case Page.PreviousPage for opened page is null.
I'm using
<%# PreviousPageType VirtualPath="~/PreviousPage.aspx" %>
to refer to Previous Page.
Any suggestions?
FYI: all aspx pages are AJAX-Enabled.
You can't call a method in the code behind of a Page class to update controls in a page that is displayed. The instance of the Page class only exists while the page is rendered, once the page is displayed in the browser, the Page object no longer exists.
The PreviousPage property is used when you make a post from one page to another, but it doesn't contain the Page object that was used to render the page, it contains a recreated Page object that will not be used to render anything at all. You can only use it to read information from the fields based on the information that was posted from it.
If you want to update the opener page you either have to do it on the client side using Javascript (), or reload the page so that the server side code can repopulate it. A combination of them both would be to use AJAX to update the page.
Edit:
You can for example use Javascript to access the opener and change the content of an element:
window.opener.document.getElementById('Info').innerHTML = 'updated';
You can also call a Javascript function in the opener page:
window.opener.doSomething('data');
That which gives you more possibilities, like making an AJAX call to load data from the server.
You can submit the parent page back to the server using javascript. You can use window.opener function in the javascript to access the parent page.

Why .NET strips off one <form> tag from the page if there is already a form with runat server attribute?

It doesn't remove everything inside the 2nd form tag but just hides the and tags from the page
Any ideas and workaround?
Nesting of forms is not allowed in html. So you cant add another form inside the server-form.
But it is perfectly legal in ASP.NET to add get-forms outside of the server form.
I moved the nested form outside to solve this issue.
You cant have nested form tags. Either move to asp.net mvc if you want more control over the markup or consider not using asp.net server controls, this way you can include multiple form tags without having to ensure the controls are within a form tag with the runat server attribute but then you dont get the granular access in the code behind and have to start using the request.form colelction to retrieve the postback values.
.NET WebForms wraps the entire application in a <form> tag which can cause issues when adding additional <form> tags to the page. My coworker found a workaround for the nested form issue.
</form> <!-- This tag closes the WebForms form tag -->
<form action="/form/endpoint/foo">
...
</form>
By adding a solo closing </form> tag just above your custom form: WebForms will close it's wrapper form tag just before the start of your custom form so that you do not have a nested form block.
The reason ASP.NET encloses everything in a single form is so that when a postback occurs, the whole form is posted back to the server and you will have access over every element that is on the page.
That is you are able to modify the properties of elements (myTextbox.Text = 'Hello';) from the Code-Behind.

Resources