Category: ASP.NET
Today I was testing a website using a HTML W3C validation tool (XHTML 1.0 Transitional) and I found a problem in my links. Some URLs had the & symbol, since they linked to dynamic webpages which need parameters. The trivial solution is to replace the “&” occurrences on all links by the equivalent “&” expression. But while changing some dynamically generated URLs I found out an interesting fact about ASP.NET controls vs HTML controls that I was not aware of.
In the example bellow you can see 2 pairs of Links and Images. The first set are ASP.NET controls, the second one are HTML controls (markup) with runat attribute set to server in order to allow their manipulation by ASP.NET code.
When you look at the source code in the client side bellow you can spot a slight difference that can make your HTML validation fail. href and src attributes that originally contained the “&” and which are the result of ASP.NET controls rendering have “&” instead, but the HTML controls still have the invalid &-based URL’s.
Since I had both type of elements mixed in the website, and I was threating them in the same way I was getting different behaviors. Now I know why…
You can find several ways of putting some sample text in a HTML input text which fades away when you click it. Some of them use a few lines of javascript, others take advantage of Javascript frameworks, and there are even ways to achieve it using just CSS (but it doesn’t work in IE anyway). But I haven’t found any guidance on doing it to password inputs. So I did it my way.
The problem
The image bellow shows the desired behavior. When you open the webpage you can see an input with a grayed out message on it, telling the user that it is a password field. When you click the input, you can type your password (without being displayed on the page). If you click outside the input, and it is empty, the “Password” message appears again.
The solution I present is based in Javascript, and you can achieve it without using any server-side technology. But since I had to do this using ASP.NET, I’ll show you an example using this technology.
ASP.NET markup
First of all let’s take a look at the markup. I’ve create 2 textboxes, one using the Password text mode, where you can type text without displaying it on the browser, and another one which is a simple textbox with our “Password” message. I’ve grayed out this message and left the input as readonly, since we don’t need its value.
Disclaimer
As you may know I am a fan of C#, and I don’t like VB.NET that much… But since while writing this demo I accidentally created an VB.NET project, instead of creating another one I took advantage of the opportunity to test my VB.NET skills. 
Now I love C# even more…
Javascript Injection
Now lets the the Javascript part of the solution. I use ASP.NET to inject the Javascript into the page in the server-side. I use the Attributes property of the textboxes to set styles and client-site event handlers. In order to hide the real password input when the page is rendered, I set the style attribute of the input element with the value “display:none”. When the fake password input gets focus, the browser hides it, shows the real password input and changes the focus to it. The user doesn’t even notice the input switch, at least if you make sure that the two inputs have the same style. When the password input loses focus (onblur event), if it is empty, the fake input is shown again .
About ClientID
If you are not that familiar with ASP.NET, or at least with client-side scripting used with ASP.NET, you may be wondering that is ClientID. Well, in this example it has the server-side name of the textbox, but when you use User Controls or Master Pages, not always the server-side name of a control is the same that the name/id in the client-side. So the ClientID property gives you the name/id that will be valid while trying to access the control on the client.
What if there is no Javascript support…
Ok, it works fine. And it is pretty clean. But what if by some reason the Javascript is disabled in the client browser? Well… The user won’t have access to the real password input, and will get stuck with the fake input which has the “Password” text and is read only. Even if he could write on it, in the server side the password wasn’t expected from that input anyway. So we need a solution that works even when Javascript is disabled. The user will not have the fancy sample text inside the input, but he will be able to type and send the password to the server. How?
First of all the default visibility status of the inputs will have to change. When the page is rendered the real password input must be visible and the fake one invisible. This way if Javascript is disabled, the user will get a standard password input. After the page is loaded, if Javascript is enabled, we switch the inputs. This switch occurs before the user sees the page, so the final result is the same (while using a Javascript-enabled browser).
The code that the “…” hides is the code of the first VB.NET block.
RegisterStartupScript
This is the method used in order to register script that is supposed to be used in the client side. Page.ClientScript has other nice methods, that allow your to attach onSubmit client-side event handlers and do other client-side Javascript related tasks. Two nice links about RegisterStartupScript are this an this.
You can download the complete source-code of this post.
Today I had to generate files in ASP.NET for download which was supposed to open a save file dialog in the web brower. The file name was based on a title field extracted from a database. The title had spaces which I allowed to be used in the file name (I replaced accents and other invalid characters). In the source code bellow you can see a simple illustrative example.
Perhaps you have noticed that I am generating a plain text file, but I am not using the “text/plain” mime type. When you use “text/plain” the browser automatically knows which application to use for opening the file. If you use “application/octet-stream” instead, the browser uses the file extension in order to find out which is the operating system default program for that file extension. But when you have spaces in you file name as in the example above, you get different behaviours from different browsers.
In Internet Explorer 7, the spaces are replaced by underscores, the the browser recognizes the file extension “.txt”.
If you download the same generated file using Firefox, it cuts the file name ending at the first space. This way the browser considers that your file name is “Just” which has no extension. As a consequence Firefox doesn’t know which application to suggest you for opening the file.
I haven’t tried other browsers, but I took a safe approach. In the server side, while defining the file name I replace the spaces by underscores, this way the download has a consistent behavior in both browsers.
During this week I’ve been experiencing some problems with browser caching.
I’ve a dynamically generated XML file which contents change a lot (it is a photo gallery based on Slide.Show), and I want the people who see this gallery to see newly added photos immediately. Today someone asked me how to prevent the client-side caching (regarding Slide.Show too), so I did some searches and testing in order to enlight us both. 
I’ve found reference to a few lines of code which should be used in ASP.NET web pages to prevent caching.
Response.CacheControl = “no-cache”;
Response.AddHeader(”Pragma”, “no-cache”);
Response.Expires = 0;
I tried the first one alone both in IE 7 and Firefox 2 and it seamed to be enough, nevertheless, being care is never enough,so I’ll probably use the 3 lines together!
Just try to be careful and don’t feel tempted to prevent caching in every single web page in your web site, it leads to poor perfomance in both your servers and in the client side. And every one likes to see the content of a previously visited page rendered quickly, right?
A while ago I talked about Slide.Show. Some one asked me how to dynamically look into a folder and create a slide show based on its contents. I suggested using an ASP.NET page that looks into the folder and generates a XML output that can be used by Slide.Show as a data source.
I’ve implemented a simple version that shows how to do it. Download it and change it as you wish.
Take a look at DataProvider.js where I have changed the Data.xml reference to Data.aspx file.
In the Data.aspx file I’ve deleted all the HTML output, and in the Page_Load event handler generated XML output.
Response.ClearContent();
Response.ContentType = “Application/xml”;
Response.Write(”{XML output}”);
Response.End();
I’ve included in the zip file only the required files to let the example work. It has only 1 image. I hope it will be useful to someone.
As you might know, it is possible to use Windows Live ID Web Authentication SDK in your websites as an authentication mechanism. You put an iframe in your homepage, which links to the Windows Live ID sign in page. After a successful authentication the user is redirected back to your website, where you receive the user’s ID. With this ID you can find your user data in your database, and do whatever you need.
Since ASP 2.0, you can use the ASP.NET Membership/Roles Provider as an authentication/authorization mechanism in your websites. You even have controls that make these tasks easy. If you are not familiar with these functionalities take a look at a nice video available in the ASP.NET website: Securing your Web Site with Membership and Login Controls.
Yesterday I started to build a new website, and I wanted to use Windows Live ID as the authentication mechanism. But since I was using an existing website framework that used ASP.NET Membership/Roles Provider not only for authentication but also for authorization purposes, I tried to integrate both. I wanted to eliminate the need for a new user/password for the user to remember, and maintain the benefits of Membership Provider.
You can download the demo website that I wrote which is a simplified version of the website that I am building. It is pretty simple. Do not forget to register you application and change the corresponding parameters in web.config.
The first step is to configure ASP.NET Membership provider. You can use a tool that allows you to add the membership provider tables to your database (C:\Windows\Microsoft.NET\Framework\v2.XXXXXX\aspnet_regsql.exe) or use Web Site > ASP.NET Configuration menu in Visual Studio that creates an SQL Server Express database to store the data.
In your web.config file you must setup the Membership Provider. I’ve done some configuration which allows you to create users using just an user name and a password (eliminating the usual e-mail, question and answer of password recovery, etc). You will be using Forms authentication.
I have a default.aspx page which has an iframe that has a link to Windows Live ID sign in page. When you click the sign in link you are redirected to the sign in page, and the forwarded back to your website, to a authentication handler page named webauth-handler.aspx. This page is part of a sample that comes with Windows Live ID Web Authentication SDK.
You will have just to add a few lines of code, that maps the Windows Live ID authentication to the Forms authentication of your website. You can see these lines in the demo website.
When you sign in with an account that is not registered in your website, a user account is created (only using the user ID as username and password), and you are redirected to a page where you can edit your profile.
Profile Provider is another great functionality of ASP.NET that allows you to assign custom data to your website users. In web.config you define which properties does a user profile has. Then you can access the Profile object from anywhere in your code, and read/write the current user profile properties. These properties can be changed, and Profile object has a Save method that persists the profile information into the Profile Provider (usually a database).
In default.aspx the current user profile is printed out into the page.
