Building a Website From Scratch | Part 4 – Bring It Home to ASP.NET

In Part 1 of the Building a Website Series, we talked about taking a graphic design and prepping it for the web by slicing it up.  In Part 2, we dove into a crash course on CSS to prep you for actually coding the website.  In Part 3, we put it all together in a static HTML page.  Now, let take a little dip into .NET land and convert our work so far into a ASP.NET web app.  This will be the first time where we start focusing on a specific server-side technology.  Up to this point, you could go with whatever server-side technology your heart desires.  But, since I am a .NET guy, it’s time to bring it home.

I am working with Visual Studio 2008, so that is the IDE I will be basing this talk around.  The plan is to take the static HTML page that we created in Part 3 and create a Master Page out of it.  Then, we will create a ASP.NET Server Control out of the container we created, so we can just drop the container control on the page wherever we want to use it.

Create the Project

For starters, you’ll want to create a new ASP.NET Web Application, giving it whatever name you want (I used MySweetWebApp).  You’ll want it as part of a solution, to enable clean separation when you actually start building out the functionality and guts of your web app.  Once you have the app created in Visual Studio, you will see a single file, Default.aspx.  That file will be of use to us later, so just leave it alone for now.  The first thing that we need to do is bring over the image files and css files that we used for the static page.  So, just copy those from their original location and drop them into the root folder of the web app.  Note that the root folder of the web app is likely a sub-folder of the solution itself, if you just went with the defaults that Visual Studio offers when you created your project.

Before you are able to see the files you just copied over in the Solution Explorer, you have to add them to the project.  To do this, right click on your web app project and choose Add > Existing Item…  This will open a file dialog to select the css files and the images folder.  Select them and click Add.

Now that the files are there, we will start adding our pieces, beginning with the Master Page.  Go ahead and find your web app project in the Solution Explorer (mine is called MySweetWebApp.csproj), right click on it and go to Add > New Item…  Once the Add New Item dialog is showing, click on the Web Category, to filter out the stuff we don’t need.  On the right, you should see an option for Master Page.  Click on the Master Page option and give it a name of your choosing (I will be using SweetMaster.Master).  Once you have added your Master Page, you will see that it looks something like this:

For the most part, it looks like a standard HTML page.  A few notable exceptions are the <%@ Master Language=”C#” … %> definition at the top and the tags in the and .  The first one is the server-side code that defines the page as a Master Page, this is required for it to function as a Master Page.  The second are ASP.NET server controls, specifically ContentPlaceHolder controls.  Those define where you can place variable stuff, the stuff that each page will define for itself.  Essentially, everything else defined in the Master Page will be exactly the same for every page that uses that Master.  It’s the ContentPlaceHolder controls that will give each page the capability of defining new elements.  With that in mind, it’s time to start modifying the Master Page to make it ours.

Flesh out the Master Page

Let’s start in the header.  Our original static page has the style sheets included in the header, so let’s bring those in.  There will be a slight modification, though, to make sure that the correct path is always used:

There are two differences to take note of here.  The first is the href attribute has ~/ added to the beginning.  The second is the addition of the runat=”server” attribute.  Those two attributes work together with ASP.NET to ensure that the file paths are injected on the server side and they are always relative to the root of the web app file structure.  Adding those two lines makes your Master Page header look like this:

Visual Studio added id attributes to both of my CSS links, but that doesn’t really affect us.  Note that by having the ContentPlaceHolder server control in the header, it gives pages that use this Master Page a chance to include other links into the header on an individual basis.

Now, for the body.  We’ll want to keep the ContentPlaceHolder control in the body as well, but we’ll want to move it into the middle of our markup.  So, you can do the fudging if you like, but I’ll just give you the code to make it happen:

Note that the only real difference between the static HTML body code and the code we are using for the Master Page is the addition of a <form> element and the ContentPlaceHolder control.  The <form> element allows ASP.NET to do postbacks, which some ASP.NET controls require.  The ContentPlaceHolder control is added to our content div, which his where the main content of the page is intended to go.

Another quick note…  The menu portion will be static in our case, so you will need to add links that you want to show up here by hand, as you add more pages to your website.  You will most likely want to convert to using the ASP.NET Menu control to make things easier going forward, but that control requires some background that I will not be going into with this post.

One more quick addition we will be adding is another ContentPlaceHolder control as the last element in the to give us a place to put any javascript includes that individual pages may require:

With that, our complete Master Page looks like this:

Now that we have our Master Page set up, let’s go back to our Default.aspx page and put it to use.  At the top of Default.aspx, add the attribute MasterPageFile="~/SweetMaster.Master" to the Page definition.  Then, you can delete the rest of the contents of the page and put in your Content controls (which match up to the ContentPlaceHolder controls we added to the Master Page):

If you run the web app now, you should see our page come to life with no content.  Play around with that page a little by added something to the ContentPlaceHolder1 control.  You should see the page change as you do that.  Next we will create a control for our container to give our content a place to hang out.

Our first Server Control: The Container

In the Solution Explorer, right click on the web app and choose Add > New Item…  Select the Web category and choose ASP.NET Server Control, giving it a name of your choosing (I’m using SweetContainer.cs).  You will see that it defines a class for you that derives from WebControl.  Visual Studio automagically adds a property called Text to show you how it is done.  That property is useful to us, but needs to be renamed to Title.  That gives us the following code:

There are three methods that you can override, which are of importance to us here: RenderContents (as shown above), RenderBeginTag, and RenderEndTagRenderContents will allow you to define what will be rendered for the guts of the control.  In our case, we want to be able to drop the control on a page (or even another control) and add content to it using markup.  So, the RenderContents function isn’t of much use to us here and can be removed.  RenderBeginTag and RenderEndTag do what their name suggests, render the beginning and ending of the control.  Those are the functions that matter the most for us.

RenderBeginTag will be where we put the code for rendering out the title and tags before the content and RenderEndTag will be where we put the code for rendering the tags after the content.  Also, to enable us to add markup to the content of the container, we need to set some class attributes: ParseChildren and PersistChildren.  So, here is the code for the container control:

You’ll notice that ParseChildren and PersistChildren are both added as class attributes.  You’ll also notice that RenderBeginTag and RenderEndTag are both fleshed out by outputting the tags required before the content and after the content as well as adding the title of the container.  Now we have a control that can just be dropped in wherever we want a container, without having to copy all the junk that comes along with it every time.  To use it, the page (or control) needs to register the control:

The control needs to be added with the prefix defined by that registration (in this case the prefix is cc1):

You’ll note that I added a paragraph for the content of the container.  If you want to use the Visual Studio designer, you can see that your control is added to the top of the tool box, when in design view.  Just drag it onto the page where you want it, setting the title if you want.  Sweet huh?

Conclusion

This time around we talked about taking your static HTML page Part 3 and bringing it into ASP.NET.  We created a web application for it and the Master Page to define it.  Then we created a custom server control to use for the container, saving time and effort for the future.

Now we are sitting comfortably in .NET land again (or uncomfortably, depending on your perspective, I guess).  You can use this web app foundation to go forth and multiply!  Or something like that…  Happy coding!

Share