ASP.NET for web designers: Introduction
As I promised in the one-year-celebration article I am starting an "ASP.NET for web designers" series in order to introduce ASP.NET to web designers who mostly use PHP; as well as to introduce basics of web design in ASP.NET to developers who actively use this technology. For instance, I realized that many ASP.NET developers don't know HTML equivalents for server controls. On the other hand, there is a general opinion that ASP.NET produces bad HTML code. I will cite Dave Ward: "I reject the
notion that WebForms makes you write bad code (or that MVC ensures good
code). Bad developers do that, not frameworks."
If you are an experienced ASP.NET web developer, some things in this article (or all of them) might be familiar to you. However, you are welcome to share your thoughts and experiences!
The series will include:
- Introduction (this article)
- Data controls
- Navigation
- Working with Themes
- Working with Master pages
- Validation
- Checklist
- Sample application
In this article, I will cover introduction to ASP.NET including explanation of server controls, tools that you need for work and additional resources. Scope of this article, as well as all others in this series, is designing user interfaces in ASP.NET. It won't cover development in ASP.NET, but will provide additional resources for those interested in server-side development.
Introduction
A concise description of what ASP.NET is can be found on Wikipedia:
"ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language."
We can say that you actually don't do any coding in ASP.NET, but rather in HTML and some of the .NET languages. In examples in this series I will use C#.
To be able to work with ASP.NET you can use any text editor, but I would recommend you to use any of Visual Studio versions to get enhanced development environment. Visual Web Developer Express is lite version of Visual Studio that can be downloaded for free (including .NET Framework 3.5). It contains all that you need to design in ASP.NET. You don't necessarily have to have IIS installed because Visual Studio (and Web Developer Express) has built-in ASP.NET development server.
To create a new web project in Visual Studio, you choose File -> New -> Website and choose ASP.NET Website in dialog window. Visual Studio will create a solution with one web site. Solution is a placeholder for your projects; it enables you to organize related projects. As seen on the image below Solution Explorer is panel where you can see all projects and files under your solution. Panel on the left side is Toolbox which contains all the server control, but we'll talk about that later in this article.
When you create a new Web site, Visual Studio creates several files for you: Default.aspx, Web.config and App_Data folder.
All ASP.NET pages consist of two files - presentation file where HTML is stored (.aspx file) and code-behind file where server-side code is stored (.cs file). This enables clear separation of server-side code and presentation. Each .aspx page is being created with a template code. It contains page definition and some basic HTML structure including <FORM> element. Please note that you can have only one form element per page.
An interesting part for web designers who haven't worked with ASP.NET yet is a page element at the very top of each aspx page. It contains a definition of aspx page that may include server side language that will be used, name of code-behind file and so on.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
Web.config file is a configuration file for your web site based on XML structure. This simple XML file contains parameters and determines the behavior of some parts of your web site. You can define, for example, authentication mode and modules or you can define custom application settings. App_Data folder is where your databases might be stored.
To be able to work with ASP.NET you will need some basic understanding of server controls.
Server controls
Besides HTML elements, ASP.NET uses server controls which have similar definition to HTML elements. The important difference between the two is that, unlike HTML elements, server controls are accessible from the code-behind or: the server side. This is determined with runat="server" attribute in their definitions. Server controls have different attributes than HTML elements and they are called properties. For example, Image control (which is equivalent to IMG element) has ImageUrl property instead of SRC attribute. But Visual Studio has very useful feature called intellisense which is some kind of autocomplete for your code and that will help you explore various properties.
Imoprtan note: Always style elements using CSS insted of server controls properties.
Server controls are much simpler than you might think. Each server control is rendered to a known HTML element on the client. Here is a list of server controls with their HTML equivalents and selectors that can be used from CSS or jQuery.
| Server control |
HTML equivalent |
CSS/jQuery selector |
|
Label
|
<span> |
span |
|
TextBox |
<input type="text"> |
input[type="text"] |
| TextBox (TextMode="Password") |
<input type="password">
|
input[type="password"] |
| TextBox (TextMode="Multiline") |
<textarea>
|
textarea |
|
Button |
<input type="submit"> |
input[type="submit"] |
|
LinkButton |
<a href="postback options"> |
a |
|
ImageButton |
<input type="image"> |
input[type="image"] |
|
HyperLink |
<a> |
a |
|
DropDownList |
<select> |
select |
|
ListBox |
<select size="n"> |
select |
|
CheckBox |
<input type="checkbox"> with <label> |
input[type="checkbox"] |
|
CheckBoxList |
<table> with a list of
<input type="checkbox"> |
table or table
input[type="checkbox"] for items |
|
RadioButton |
<input type="radio"> with <label> |
input[type="radio"] |
|
RadioButtonList |
<table> with a list of
<input type="radio"> |
table or table
input[type="radio"] for items |
|
Image |
<img> |
img |
|
ImageMap |
<img> |
img |
|
Table |
<table> |
table |
|
BulletedList |
<UL> or <OL> based on BulletedStyle property |
ul or ol |
|
HiddenField |
<input type="hidden"> |
input[type="hidden"] |
|
Literal |
Literal doesn't have its HTML equivalent, it is usually used as a placehoder to
render HTML generated on the server |
|
|
Calendar |
<table> |
<table> |
|
FileUpload |
<input type="file"> |
input[type="file"] |
All server controls are placed in Toolbox positioned on the left side if Visual Studio window. The controls listed in the table above are placed in "standard" panel in the Toolbox. To see how ASP.NET renders controls let's have a look at one example.
Sample ASP.NET signup form
This is an example that simulates very basic signup form. Validation, for example, won't be included since it will come later in this series. Let's first see the difference between the HTML strucutre in design mode and rendered code. We can say that design mode represent a code that is accessible on the server and that will be rendered on the client (if anyone knows better definition, please share).
<form id="form1" runat="server">
<h1>Sample ASP.NET signup form</h1>
<asp:Literal ID="litMessage" runat="server"></asp:Literal>
<fieldset title="Please enter all data" id="signupForm">
<label for="txtFirstName">
<asp:Literal ID="litFirstName" runat="server" Text="Firstname">
</asp:Literal>
</label>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
<label for="txtLastName">
<asp:Literal ID="litLastName" runat="server" Text="Lastname">
</asp:Literal>
</label>
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
<label for="txtEmail">
<asp:Literal ID="litEmail" runat="server" Text="Email address">
</asp:Literal>
</label>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<label for="txtPassword">
<asp:Literal ID="litPassword" runat="server" Text="Password">
</asp:Literal>
</label>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
<asp:Button ID="btnSignup" runat="server" Text="Sign up!"
onclick="btnSignup_Click" />
</fieldset>
</form>
And the CSS code looks like this:
body { font-family:Arial, Sans-Serif; font-size:0.75em; line-height:130%;}
fieldset {border:none;}
label {display:block;}
input[type="text"], input[type="password"] { display:block; margin: 0 0 10px 0;}
.message { color:#f00; font-size:1.5em;}
We have a fieldset with four fields: Firstname, Lastname, Email and Password. Each field has an input element (TextBox) and corresponding Label with Literal control inside. If you take a look at the table above you will notice that Literal is just a placeholder, so each Literal will render its content of Text property. Also, each TextBox has its own HTML equivalent. It is not that hard to conclude that HTML structure would be very clear without clutter.
<h1>Sample ASP.NET signup form</h1>
<fieldset title="Please enter all data" id="signupForm">
<label for="txtFirstName">Firstname</label>
<input name="txtFirstName" type="text" id="txtFirstName" />
<label for="txtLastName">Lastname</label>
<input name="txtLastName" type="text" id="txtLastName" />
<label for="txtEmail">Email address</label>
<input name="txtEmail" type="text" id="txtEmail" />
<label for="txtPassword">Password</label>
<input name="txtPassword" type="password" id="txtPassword" />
<input type="submit" name="btnSignup" value="Sign up!" id="btnSignup" />
</fieldset>
The code above can be seen by looking at the source in your browser once you run your small website (just to make it clear, one of the ways to do that is by pressing F5 key).
Now let's see some (fake) action. When I click on Signup button, I want to generate a message on the server and show it on the client. Take a look at the "design" mode code. btnSignup has btnSignup_Click method assigned to onclick event. This is the method that is defined on the server and it looks like this:
protected void btnSignup_Click(object sender, EventArgs e)
{
// This is where some reall proccess would occur
litMessage.Text = "<p class=\"message\">You successfuly faked signup proccess :)</p>";
}
When user clicks on button postback occurs. New HTML code is generated and sent back to the client. The code fills Literal control with HTML code (paragraph that has "message" class and some text inside it). If you take a look at CSS code, you'll notice there is a class "message". This is how the message will look like.
When returned to client, the code will be almost the same as before postback. It will contain just one more paragraph:
<h1>Sample ASP.NET signup form</h1>
<p class="message">You successfuly faked signup proccess :)</p>
<fieldset title="Please enter all data" id="signupForm">
<label for="txtFirstName">Firstname</label>
<input name="txtFirstName" type="text" id="txtFirstName" />
<label for="txtLastName">Lastname</label>
<input name="txtLastName" type="text" id="txtLastName" />
<label for="txtEmail">Email address</label>
<input name="txtEmail" type="text" id="txtEmail" />
<label for="txtPassword">Password</label>
<input name="txtPassword" type="password" id="txtPassword" />
<input type="submit" name="btnSignup" value="Sign up!" id="btnSignup" />
</fieldset>
Download the example
This example shows that designing ASP.NET websites and web applications doesn't have to be a
problem as many people see it. If things set right from the beginning
it can be easy as designing for any other framework/technology.
Conclusion
For better understanding what is happening "under the hood", I recommend you to read more about ASP.NET page lifecycle, state management and viewstate. In next
part of the series we'll take a look at the tricky ASP.NET data
controls.
Additional resources
To get more information about ASP.NET you can visit:
More articles in
Blog archive or
elsewhere