I'm running into what looks like a contradiction between jQuery Mobile and ASP.NET Forms. I have two pages that I'm transitioning between using jQuery Mobile page transitions. The basic structure looks something like this:
<html>
<body>
<div id="page1" data-role="page">
<form id="aspNetForm" runat="server">
Page 1
Page 2
<!-- Some more ASP.NET controls that require the aspNetForm -->
</form>
</div>
<div id="page2" data-role="page">
Page 2
Page 1
</div>
</body>
</html>
Notice that the form tag is only present in the first page. That's because ASP.NET only allows one form per page. When I try and move the form tag outside of the page divs jQuery Mobile starts acting strange (specifically the page transitions start looking strange). This becomes a problem when I want to use any sort of ASP.NET web controls that deliver input inside the second page.
Basically these rules exist that essentially lead to a contradiction:
ASP.NET:
1) All web controls that deliver an input must be within an ASP.NET form tag
2) Only one ASP.NET form tag can be visible (as in visible=True, not display: block) per page request
jQuery Mobile:
1) All content, including forms, must be within a page div
Can anyone think of a way to get around this? I guess I could restrict page2 to only use traditional HTML and not web controls but that doesn't seem like the most elegant solution. Any ideas? Has anyone else run into this?
Well. In my opinion, the simple solution would be to give each page its own .aspx-file. That would work just fine.
If your site is very big, it would also improve performance.
Related
I'm building up a website in ASP.NET Webforms and Bootstrap.
I have created a webform with masterpage page which contains a link to open up the Bootstrap modal with contents of another page ( Test.aspx ).
<a href="Test.aspx" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalTime">
Launch demo modal
</a>
The Test.aspx page is also a webform with masterpage file because without the modal it has to have the same content ( header, footer, ... ) as all other pages when you surf to it.
But in the modal it also adds the content of the masterpage ( header, footer, ... ). Which is normal, I understand this.
But is their another way or component or something else that when you surf to Test.aspx you see all the contents and in the modal you only see some content? Displaying only content within a Contentplaceholder?
Or is this only possible in MVC because of the use of views? Maybe there is something simular in webforms?
This can be solved in multiple ways. The two ways I would suggest is the following:
1) Move most logic out in an ASCX control. Then you can keep test.aspx, but also have a new one called Modaltest.aspx, and you can use that one for the modal window.
2) On the masterpage, you have a property called "IsAjax", that looks at the header. If the header is an AJAX call, you simply remove all its surroundings. We've done that at one of our legacy Web Forms project at work, which works OK.
I am new with ASP.net and having a following problem:
My Master Page has Body and Header tags with classes like this
<body class="bg">
<header class="header">
</header>
</body>
I want to remove the classes from content page when they load. Is it possible? Thanks
Yes. You can use JavaScript to remove it on the client side when the page loads. On the client side there is no concept of elements from a master page or from content pages. For client side JavaScript/jQuery, all elements are equally accessible.
Check the .removeAttr() jQuery function here :
http://api.jquery.com/removeattr/
Use body and head element selector for jQuery and it will work.
I am trying to get one of the webforms in my application to link to another website, outside of my application. I can get the page to load as a new webpage in my browser easily but I need to keep my masterpage in view.
Can this even be done?
TIA
You could use the IFRAME tag:
<iframe src="http://www.google.com" title="Google's Website">
<!-- Alternate content for non-supporting browsers -->
</iframe >
Whole code of Asp.net page renders in a form tag is it W3C valid to render everything in form tag?
<body>
<form runat="server">
remaining code.....
</form>
</body>
Considering this is how ASP.NET must operate, there's not much sense worrying about it.
All browsers support it and in all my complaint code that isn't ASP.NET I have to put all sorts of standard html tags between the <form></form> tag.
So yes, its valid.
Assuming you don't put another (non-runat="Server") form tag on this page, sure.
(because nested forms are invalid)
Technically Yes. However this is bad practice.
However Soviut is correct in stating that ASP.Net requires this to operate, and generally disregards web standards wholesale. So short of dumping ASP.Net you may need to focus on mitigating the number of web standards you break rather than sticking to web standards.
The issue with having a tag surrounding the whole page is that you post everything on the page at once. This means that if you have a simple search form at the top of the page, and another form that users enter data with you cannot separate these form requests. This unneccisasarily increases the quantity of data that the user needs to send, as well as introducing other potentital issues.
If you have the choice, use MVC or some other technology instead.
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!