I have inherited an ASP.net codebase and I have very limited ASP.net skills. I am struggling to understand why something works and also why it only works in IE.
The following code appears in a page :-
<%# Page Language="C#" AutoEventWireup="true" CodeFile="map.aspx.cs" Inherits="Romtrac.auth_map" Culture="auto" UICulture="auto" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>
<% = Resources.Resource.map %>
</title>
</head>
<body>
<form id="adminlw_map_form" action="<%=geturl()%>" method="post" >
<% = Resources.Resource.loading %>...
<textarea name="xml" id="xml" runat="server" style="display:none" cols="1" rows="1"></textarea>
</form>
<script language="javascript" type="text/javascript" >
//submit main form immediately
document.getElementById('adminlw_map_form').submit();
</script>
</body>
</html>
This code runs fine in ASP.net. The form is automatically submitted and the page returned is rendered correctly within an Iframe. My question is;
1) Does the javascript within the body just get executed when it is encountered? Is this good practice or should it be executed in response to an event?
2) Why does this not work in other browsers?
Yes
The javascript is being executed before the browser has fully rendered the page. In this case, the form has not been rendered and is not accessible via the DOM.
The execution needs to happen after the DOM is fully loaded by the browser and can be implemented by encapsulating the call within a function and calling that function via the onload event of the body or by using a javascript library like jquery to hook into the load event of the page.
1) Yes, No. jQuery does it best with it's $(document).ready() function, but you should wait for the page to finish loading before running Javascript.
2) Do #1 and you won't need to worry about this. However I'll leave the floor open to someone with a better answer.
Some browsers prevent the submission of a form without user interaction in the page's load 9it's a security risk). I've had this issue a number of times in the past. I would combine the page's load, with a window.setTimeout of say 100ms.
<body onload="window.setTimeout( document.getElementById('adminlw_map_form').submit, 100)">
....
Remember when using JavaScript to keep it unobtrusive. There are still people out there who have JS switched off and your page should not really on it. It should serve as an enhancement.
Same as Mike Robinson's answer but surely you can just use <body onload="myfunction();">?
Related
How can I include pages, style sheets, or links to them, automatically into my ASP VBscript pages? I read something about 'global' pages, but I am unsure what they mean and how it is that I can accomplish such a thing. I'm sure this is an easy question, but it's of great help to me as I've been writing VBscript for 2 days now! I'm not exactly an expert on HTML in general either, but I feel I have a reasonably good grasp of things. I would appreciate a good detailed example of how a 'global' page plays with my other ASP pages.
I'm setting up my first site...a management site for the main site I intend to build afterward. I want to get all my ducks in a row before moving forward with the public site. Can someone please give me some detailed information on how to include these pages/links automatically (page includes(header/footer), style sheets, etc) globally throughout my site without the need of using <!--#include file.... on each page I make, because that is kind of a pain and I'm sure there is an easier way. If there is, I know you can help! Thanks in advance, I look forward to hearing what options/possibilities are available.
If you insist on using ASP Classic you may find some method for handling masterpage like functionality but it is, to the best of my knowledge, not suppoerted as such by the framework.
[Edit] Given the edit of the original question the method first demonstrated is not so interesting, hence I suggest an alternative method too.
You could make a general ASP-page which serves all traffic to the site. A queryparameter then specifies which subpage should be displayed. Subpages are made as seperate ASP-pages which are executed by the general/master page or by another subpage. A very crude example of this could look like this:
<%
url = Request.QueryString("url") & ""
if url = "/" or url = "" then
subpage = "home.asp"
else
subpage = url & ".asp"
end if
%>
<!DOCTYPE html>
<html>
<head>
<title>Header for all pages</title>
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
<% Server.Execute(subpage) %>
</body>
</html>
The site should then be addressed in this fashion:
www.domain.com/default.asp?url=/contact
which would load the contact.asp subpage into the masterpage or:
www.domain.com/default.asp?url=/user/1234/profile
to load a user's profilepage (displayed by the profile.asp in the folder user/1234). This last example raises some issues because then every user has to have a folder containing all the asp-files (which is far from optimal) so you might want to employ some interpretation of the url queryparameter to redirect input in a more intelligent way.
Another issue is the fact that subpages are ASP-pages themselves which means someone could reference them directly. This calls for some action to protect those subpages from direct reference. It can be done but this would probably mean including some code => back to square one!
Another disadvantages of this approach is that subpages are rendered in their own context and hence can't access functionality and data from the calling page's context. This means that global data has to be shared in some other way (session, application, database or some other way). Data can't be passed to the subpage either (and no, Server.Execute doesn't allow query-parameters).
The include-way
Personally I think you get the most flexibility by using header/footer includes as demonstrated in my original post and shown below.
One way is to put your general stuff in includes and then includes those bits on each ASP-page. E.g.:
<!-- #include virtual="/includes/header.asp" -->
content goes here
<!-- #include virtual="/includes/footer.asp" -->
And your header.asp could look something like this:
<!DOCTYPE html>
<html>
<head>
<title>Header for all pages</title>
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
and footer.asp like so:
</body>
</html>
This strategy has some disadvantages. The header is fairly static which could present some problems with SEO; For one the title should fit the pagecontent which is hard to accomplish when the include contains the header-markup. This could be facilitated by some global variables that are set prior to the include-section i.e.:
<%
title = "Title for this page's content"
%>
<!-- #include virtual="/includes/header.asp" -->
content goes here
<!-- #include virtual="/includes/footer.asp" -->
and then in the header like so
<!DOCTYPE html>
<html>
<head>
<title><%=title%></title>
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
but that already begins to "smell" a little because you set up some expectations for the including page inside the include-file. At least you have to be very disciplined when constructing your pages.
The term you're looking for is Master Page, not Global Page, that may be why you're having a hard time finding what you're looking for on Google. Basically consider a master page a template. You create a master page, then load other pages into it. There are content place holders that you put in the master then populate on your other pages.
So a very basic example would look something like this.
<%# Master Language="VB" CodeFile="general.master.vb" Inherits="master1_general"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<link rel="stylesheet" type="text/css" href="/styles/main.css?v2"/>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ContentPlaceHolder id="body" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
Then your individual pages would look like this:
<%# Page Language="VB" MasterPageFile="~/master/general.master" AutoEventWireup="false" CodeFile="base.aspx.vb" Inherits="_Default" title="Opportunities" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
//any additional head stuff specific to this page goes here.
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="body" Runat="Server" >
//your body mark up goes here.
</asp:Content>
Notice how the Master page is actually a web page. Then it has place holders in certain spots. In this one there is a place holder in the head and one in the body. Then on individual pages I identify which master page to use and what data (if any) goes in the place holders. I always include a placeholder in the head so I can load js or resources that specific pages need on that page only.
Then the individual pages are just the content that goes in the placeholders.
I recently found out over the weekend that iframes are not valid in XHTML strict. What would the correct way to refresh certain content then? A friend said just use divs and have JavaScript refresh them, is this true?
Your friend is right in a sense. You can achieve a similar effect to iframes by using AJAX to load a page into a <div> container. The problem is that AJAX requests are usually limited within the same domain, so you will not be able to load other websites. You can load other pages from your own domain though.
AJAX is ridiculously easy with jQuery. Check out this function:
http://api.jquery.com/load/
<div id="externalcontent">This text will be replaced.</div>
<script type="text/javascript">
$('#externalcontent').load('separate_pages/page2.html');
</script>
This would be kind of pointless as you could just load the content using server-side methods, but it shows how easy loading another page can be with jQuery.
Use XHTML Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
http://www.jonasjohn.de/snippets/html4strict/frameset-example.htm
Javascript is good. Check out jQuery (http://jquery.com/) for easier DOM manipulation!
I'm attempting to precompile a few master pages (not update-able) to share them across multiple applications. The project I'm precompiling is a Web Site. The project that references precompiled assemblies is a Web Application. However, I'm getting a Could not load type 'ASP.xxx_master' every time i try to reference the master page from the client.
<%# Master Language="C#" Inherits="ASP.sitebase_master" %>
My precompiled master page looks like this.
<%# Master Language="C#" ClientIDMode="Static" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="AspNetHead" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=7" /><![endif]-->
<asp:ContentPlaceHolder ID="MetaContent" runat="server" />
<title>Web Portal</title>
<link href="/media/css/style.css" rel="stylesheet" type="text/css" />
<link href="/media/js/plugins/colorbox/colorbox.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="StyleContent" runat="server" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript" language="javascript"></script>
<script src="/media/js/plugins/colorbox/jquery.colorbox-min.js" type="text/javascript" language="javascript"></script>
<script src="/media/js/plugins/filestyle/jquery.filestyle.min.js" type="text/javascript" language="javascript"></script>
<script src="/media/js/portal.master.js" type="text/javascript" language="javascript"></script>
<script language="javascript" type="text/javascript">
PORTAL.debug.init();
PORTAL.init();
</script>
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
</head>
<body>
<div id="hld">
<div class="wrapper">
<form id="AspNetForm" runat="server">
<asp:ContentPlaceHolder ID="BodyContent" runat="server" />
</form>
<asp:ContentPlaceHolder ID="FooterContent" runat="server" />
</div>
</div>
</body>
I'm stumped. No idea why the type isn't resolved. Anybody got suggestions? Both projects (precompiled web site and client web application) are built for ASP.NET 4.0.
EDIT: Here is the list of dependencies of the precompiled assembly. No 3rd party references.
mscorlib,
System,
System.Web
UDPATE 1
Well, the quick fix to this issue is to specify the full path to the master page.
<%# Master Language="C#" Inherits="ASP.sitebase_master, App_Web_sitebase.master.cdcab7d2" %>
After doing that, I'm receiving the following error:
An error occurred while try to load the string resources (FindResource failed with error -2147023083).
After doing some research, this appears to be related to the way HTML markup is parsed within the master page. Not entirely sure yet. I haven't dug much deeper into it. Overall, I can't believe this is the recommended way to share controls as it is absolutely, mindbogglingly idiotic.
UPDATE 2
I couldn't make anything of value out of this. It appears to be hating "script" tags in the head section, but I don't know why. The Master Page works great with a single script include. As soon as i start adding more I keep getting that error. After wasting a full day on this I ended up submitting a bug report to Microsoft. If anyone wants to bump it, please do.
UPDATE 3
I spent a few more days debugging this after no response from MS. Here is my findings. I initially thought that the code generated by CodeDOM provider is looking for a .NET resource that somehow did not get embedded in the assembly when it was published. I was wrong. After some investigation it appears that what's happening is after the Master Page reaches a certain size, a chunk of it is stored in the Resource Table in PE Data Directories section of the assembly. In fact, after looking at the generated assembly in PE resource viewer, i was able to confirm this by finding all my script includes in the Resource Table. Now, here is the actual problem. What's happening is that the CodeDOM provider generates a call to Win32 FindResource to pull that resource from the Resource Table. However, FindResource doesn't work on assemblies in memory, only on disk. So it fails with the above exception. I'm getting close, but still no workaround.
I finally have a workaround. It's not pretty, but it resolves the issue. Apparently using LoadControl to pre-load precompiled MasterPages loads all of the resources that FindResource cannot find otherwise. So, here is all i did to make this work.
In my client application I created a dummy master page (i.e. Dummy.Master) which references my precompiled master page like so:
<%# Master Language="C#" Inherits="ASP.sitebase_master, App_Web_sitebase.master.cdcab7d2" %>
Now, any .aspx page which references Dummy.Master needs to preload the precompiled MasterPage type like so:
protected override void OnPreInit(EventArgs e)
{
ASP.sitebase_master mp = (ASP.sitebase_master)Page.LoadControl(typeof(ASP.sitebase_master), null);
base.OnPreInit(e);
}
I don't know why this works, but it does. This code must run before the MasterPage is resolved, so PreInit worked great. After glancing at the .NET code for a few seconds in Reflector, it appears that LoadControl actually does some assembly compiling voodoo when it attempts to load a certain control type. So perhaps something in there loads that PE resource data section. The best place to put it would be in the base class I suppose which all pages could inherit from. Also, each loaded control (master page in this case) ought to be cached. Here is a good article explaining just that.
Hopefully this helps someone as much as it helped me. It was a pretty big show stopper for me.
I am trying to add a panel as a child control of another panel in the codebehind of a master page, it's a simple as:
Panel1.Controls.Add(Panel2)
However when I try to do that, I get this error:
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
There are a number of questions that talk about having <%= %> elements in the head section, which I do not have. I have been so far as to remove all <% %> elements from this page, to no avail, the error still occurs. Can anyone suggest a way to get this to work?
* Example for Answer B *
=== code with error ===
<script type="text/javascript">
jQuery(document).ready(
function() {
alert('Hello!');
jQuery("#<%=TxtSampleId.ClientID %>").focus();
}
);
</script>
=== code without error ===
<asp:PlaceHolder id="dontCare" runat="server">
<script type="text/javascript">
jQuery(document).ready(
function() {
alert('Hello!');
jQuery("#<%=TxtSampleId.ClientID %>").focus();
}
);
</script>
</asp:PlaceHolder>
The "The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)." error can be very annoying to say the least. It's a bug that Microsoft refuses to fix because there are workarounds. It happens when you try to dynamically load controls from the code behind, but your page source conflicts. Could be a few things going on...
Note: Stack Overflow doesn't handle syntax of code examples well, so I'll reference each answer with a letter, and in a later post, I'll attempt to type out an example. But I don't want to clutter this post because I want to get my points across.
A.) you have a <% Response.Write("something") %> in your page source. Or a <% CodeBehindMethod() %>. Remove it and be creative to populate it a different way!! One way is to place an ASP.NET Panel control (like a Panel ==> turns into a div tag when it renders to HTML) onto your page and dynamically populate the inner HTML attribute of that control. There are other ways of dealing with this.
B.) you are trying to use jQuery inside of an inline script block within your control, you will also get this. Surround the inline javascript code block with an ASP.NET PlaceHolder tag. It's that simple. If you don't, some jQuery functionality will work, but not all of it!
C.) If you are using Script Manager without a Masterpage, I'd suggest you start using a Masterpage to avoid issues later. Then use an ASP.NET ContentPlaceHolder for your head and your body tags to make customizing pages easier. When you reference your javascript files within your masterpage, and you're using Script Manager, make sure to put a Scripts tag inside your ScriptManager tag. Then inside the Scripts tag, place a ScriptReference tag with a Path of the full path of your Javascript files in there. Make sure to put a tilda and forward slash "~/" in the beginning of your path from the root of your web app. Many will put their ScriptManager tag in their control. Don't do this. Put it in your masterpage! It makes life easier.
D.) If A, B or C didn't answer your question, then I'd suggest stripping away every piece of your page and all controls in it, and add each one at a time. If you have a huge hierarchy of page and control inheritance (if your application doesn't have a Masterpage), good luck! You'll eventually figure out what caused it.
* Example for Answer C *
=== code without error ===
Masterpage code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><meta http-equiv="X-UA-Compatible" content="IE=7" />
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Stack Overflow Example</title>
<link rel="stylesheet" type="text/css" href="/style/jquery-ui-1.8.10.custom.css">
<asp:ContentPlaceHolder id="head" runat="server">
<asp:ContentPlaceHolder>
</head>
<body>
<form id="Form1" method="post" runat="server">
<asp:ScriptManager ID="anything" runat="server">
<Scripts>
<asp:ScriptReference Path="~/scripts/md5.js" />
<asp:ScriptReference Path="~/scripts/jquery-1.4.4.min.js" />
<asp:ScriptReference Path="~/scripts/jquery-ui-1.8.10.custom.min.js" />
<asp:ScriptReference Path="~/custom_crap.js" />
</Scripts>
</asp:ScriptManager>
<asp:ContentPlaceHolder id="body" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
====================================================
Page source:
<asp:Content runat="server" ID="headcontent" ContentPlaceHolderID="head">
.. place your page specific header files here (js, css, etc..)
</asp:Content>
<asp:Content runat="server" ID="bodycontent" ContentPlaceHolderID="body">
.. place your page specific body HTML or ASP.NET code here
</asp:Content>
My testers have discovered that if you type free text into a file upload input then none of the buttons on the page work until that text is removed (so the page cannot be submitted).
I am able to replicate this with the following ASPX code (with no code behind):
<%# Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fuTest" runat="server" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</div>
</form>
</body>
</html>
(Note that I haven't bound any handlers to the page; despite this, the page is submitted when the submit button is clicked only if no text is entered into the upload text box)
Is there any way to prevent users from typing free text into a file upload control? It seems that this is only possible in IE - Firefox and Chrome natively prevent text from being entered into upload input fields.
I've seen solutions elsewhere which suggest hiding input and replacing it with a label / button combo, but this seems like it might cause more problems and work inconsistently across browsers.
Any thoughts?
As per #Jer's suggestion, I was able to prevent input into the file upload without breaking any of the other functionality by handling keypress events on the upload. Using jQuery:
$(document).ready() {
$('input:file').keypress(function() {
return false;
});
}
I'm not sure if this would work as expected, but have you tried: <input readonly="readonly">
The accepted answer is perfectly fine for all the existing file controls.
But in most of the practical situations, we provide functionality to add more file controls on the fly so that users can select more than one file.
Key for the solution in this case was the .live function.
The solution will be as follows:
$('input:file').live('keypress', function() { return false; });