Xenu – One Great Link Checker Application

Xenu is an application I found while searching the internet for broken link checkers. The application can spider through your entire website in a matter of minutes checking all links (you can specify whether you want it to check external links as well). The website it is hosted on appears to be a little sketchy, but the application is great. It works great with masterpages, controls, and pages populated by database content.

The homepage for this application (Xenu) is located here.

PLEASE NOTE: Xenu is only the name of the application; all political messages appearing on the results screen and anywhere else in the application are not associated with Bombay Designs in any way, shape, or form.

Automatically create Google sitemap with ASP.net Web.Sitemap file

You can automatically generate a Google friendly sitemap simply by including this handler into your project and pointing the Google Webmaster Tools path to it. This code was originally posted at Bertrand Le Roy’s blog and is quite useful.

Web.Sitemap File for Page Titles <title> Tag

Using a web.sitemap file for your web applications is a very good idea for a wide variety for reasons. If you haven’t had a chance yet, please check out a prior posting on how to automatically generate your web.sitemap file.

Basically, I build websites with one masterpage and a bunch of content pages that utilize the masterpage. One of the cool tricks I found online (I do not remember where), it to use the web.sitemap file for page titles. Inside of the masterpage code-behind file you can simply use the following code in the Page_Load event to extract page titles from your web.sitemap:

protected void Page_Load(object sender, EventArgs e)
 {
     // Default Title (if no title)
     string title = "My Homepage";
          if (SiteMap.CurrentNode != null)
          {
               SiteMapNode current = SiteMap.CurrentNode;
               title = current.Title;
               current = current.ParentNode;
 
               while (current != null)
               {
                    title = string.Concat(current.Title, " :: ", title);
                    current = current.ParentNode;
               }
          }
          // Set the Page Title
          Page.Title = title;
        }

If you have not specified a page title in the web.sitemap file, the default string title “My Homepage” will be used.

Programmatically Add to <head> tag with ASP.net

Ok, so I wanted to programmatically access the head tag of a webpage to change the CSS file based on a Session. Now I know a bunch of people are like, ‘Hey you can just use themes and programmatically change them’. And that is true; unfortunately you cannot change browser specific styles that way, in fact, themes does not have any built-in handling of browser specific style sheets.
To access the head tag of your webpage, you can simply place an asp:PlaceHolder tag in the head of your document or masterpage. So you will have something like this:

<head runat="server">
<title>Untitled Page</title>
<asp:PlaceHolder id="phCSS" runat="server" />
</head>

Now to access this asp:PlaceHolder in the code-behind you will have to use the OnPreRender override as follows:

protected override void OnPreRender(EventArgs e)
{
	// Create a <link> tag
	HtmlControl myCSS = new System.Web.UI.HtmlControls.HtmlGenericControl("link");
	// Fill with W3C Valid Attributes
	myCSS.Attributes["type"] = "text/css";
	myCSS.Attributes["rel"] = "stylesheet";
	// Specify the path of the CSS based on the Session variable
	myCSS.Attributes["href"] = "../CSS/" + Session["Theme"].ToString() + ".css";
	// Bind to the <asp:PlaceHolder>
	phCSS.Controls.Add(myCSS);
 
	base.OnPreRender(e);
}

What your probably saying now is, how does this apply to Browser Specific style sheets? While, let’s say we want a style sheet read by all Internet Explorer browsers below version 7, you would use the following comment code:

<!--[if lt IE 7]>
<link runat="server" rel="stylesheet" href="IE6Hacks.css" type="text/css" />
<![endif]-->

Now the cool thing is you can just add another tag into the browser exception.

<!--[if lt IE 7]>
<asp:PlaceHolder id="phCSSHacks" runat="server" />
<![endif]-->

So your complete head tag code should look something like this:

<head runat="server">
<title>Untitled Page</title>
<asp:PlaceHolder id="phCSS" runat="server" />
<!--[if lt IE 7]>
<asp:PlaceHolder id="phCSSHacks" runat="server" />
<![endif]-->
</head>

And your complete code-behind file should look something like this:

protected override void OnPreRender(EventArgs e)
{
	// Regular CSS
	// Create a <link> tag
	HtmlControl myCSS = new System.Web.UI.HtmlControls.HtmlGenericControl("link");
	// Fill with W3C Valid Attributes
	myCSS.Attributes["type"] = "text/css";
	myCSS.Attributes["rel"] = "stylesheet";
	// Specify the path of the CSS based on the Session variable
	myCSS.Attributes["href"] = "../CSS/" + Session["Theme"].ToString() + ".css";
	// Bind to the <asp:PlaceHolder>
	phCSS.Controls.Add(myCSS);
 
	// Below IE7 Hacks
	// Create a <link> tag
	HtmlControl myCSSHacks = new System.Web.UI.HtmlControls.HtmlGenericControl("link");
	// Fill with W3C Valid Attributes
	myCSSHacks.Attributes["type"] = "text/css";
	myCSSHacks.Attributes["rel"] = "stylesheet";
	// Specify the path of the CSS based on the Session variable
	myCSSHacks.Attributes["href"] = "../CSS/" + Session["Theme"].ToString() + "_IEHacks.css";
	// Bind to the <asp:PlaceHolder>
	phCSSHacks.Controls.Add(myCSSHacks);
 
	base.OnPreRender(e);
}

Automatically Generate web.sitemap File

For the past year or so, I have been using a very handy Visual Studios 2005 macro for generating web.sitemap files. This code was originally posted on the OdeToCode.com site by K. Scott Allen (if you want to view his posting please click here).

To download the VB macro, please click here.

Basically this macro will build a web.sitemap file based on the physical layout of your application.

The easiest way to install this macro into Visual Studios is as follows:

  1. Download & Extract the file.
  2. Open Visual Studios 2005.
  3. Hit Alt + F8 to bring open the Macro screen.
  4. Create a new Module called SiteMapModule (it is case sensitive).
  5. Copy and paste the downloaded file into your new Module.
  6. Generate your web.sitemap files based on the projects you have opened.

And that’s it.

Using CSS to Control ASP:TextBox

When I first started working with .NET controls such as TextBoxes and DropDownLists, my experience with forms was limited to pure HTML forms and I found .NET TextBoxes and DropDownLists to be extremely hard to work with. Sure, in Visual Studios (VS) you can right click and select properties and change a bunch of stuff, but it is hard for a designer who uses Dreamweaver to know what the control will accept (let alone what will render properly), especially not coming from a .NET background.

So, as I started to move towards XHTML/CSS/table-less layouts I became forced to think of a way to better manipulate the .NET controls, as I no longer had a way to properly position most of the controls that would be rendered and I felt bad consistently bothering the .NET developer because of how VS assigns color values (for those of you that do not know, VS uses names instead of HEX values so the W3C validators would error, not sure if they still do). Anyways, here is what I came up with, .NET controls become rendered in a browser as HTML controls TextBoxes become input tags and DropDownLists become select tags, using CSS & HTML you can manipulate how the browser will render and position the controls.

Let’s say you would like to create a new user sign-up form, for this example you want the users first name, last name, login and password. You could put the following code into the body of the document:

  • First Name:
  • Last Name:
  • Username:
  • Password:

Notice how the components are in the actual list item, if you where to preview this page right now you would see the following:

Unstyled Ordered list

To begin using CSS with this unordered list you would probably use something like the following code:

ul#UserSignUp	 {margin:0 auto;
			padding:0;
			list-style-type:none;
			font-family:Arial, Helvectica, sans-serif;
			font-size:1em;
			}
#UserSignUp li 	{margin:0 auto;
			padding:0;
			list-style-type:none;
			}

Now with this styling applied you should see something like this:
Unordered List Semi-Styled

Notice how the textboxes are a little too close together leading wise and how they do not line up correctly on the left hand side. This is where you can use CSS to help you out. Since the textboxes render as input tags, you can control them in the CSS file like so:

ul#UserSignUp 	{margin:0 auto;padding:0;
			list-style-type:none;
			font-family:Arial, Helvectica, sans-serif;
			font-size:1em;
			}

#UserSignUp li 	{margin:0 auto;
			padding:0;
			list-style-type:none;
			padding-top:10px;
			}

#UserSignUp li input 		{position:absolute;
				left:150px;
				margin-top:-4px;
				}

This added code is doing a couple of things, first of all, the padding-top added padding to the top of each list-item by 15 pixels 10 pixels, I find that this method is better then using line-height because Firefox and Internet Explorer apply the line-height slightly different and you have to use IE only style sheets to correct it.

Secondly, using the ul#UserSignUp input line in the CSS we are able to easily left-justify the textboxes so they all start at the same location using absolute positioning. The textboxes will render slightly lower than what looks visually pleasing, so I added the tag margin-top:-4px to move the textboxes up slightly. You might want to take note of that last suggestion, what I originally tried to do was use the tag top:-4px, but that stacks all the textboxes on top of each other in the exact same location. So, if everything went correctly on your end, you should have something that looks like this:
Unordered List Styled