What is ASP.NET?

Andrew Comeau   February 26, 2015   Comments Off on What is ASP.NET?

This article is based on the presentation from our Feburary 25, 2015 meeting. If you find this kind of information helpful, you can find information on our future meetings through our group on Meetup.com.


There are a number of ways to build a website and all of them have their advantages depending on the type of site that you’re trying to design. The one that I’ll talk about here is Microsoft’s contribution to the world of web design – ASP.NET.

ASP.NET is a development framework for designing dynamic websites and web applications. The word framework indicates that it’s a development system which includes one or more languages along with various tools for working with those languages. A framework can also allow for additional tools and code libraries to be added onto it by third parties. In this case, the ASP.NET framework includes all of the .NET languages, typically either C# or VB.NET, and a powerful IDE in the form of Microsoft Visual Studio, a free download from Microsoft.

This article is purely an introduction to ASP.NET and covers the basics of webforms and how they present dynamic content to site visitors. For more information, see Microsoft’s official ASP.NET site.

Static vs. Dynamic

ASP.NET is intended for the creation of dynamic websites and applications.. A dynamic page is one in which the page’s content is created, at least in part, at the time the user requests it. This is in contrast to static web pages where the content is set in an HTML file which the user requests and is then handed over by the web server.

To see the difference, first check out the homepage of the book Eloquent JavaScript. This is a static web page that is designed to provide information on a book so that customers can evaluate it before buying. It’s a relatively simple site with some HTML and some CSS to make everything presentable. If you view the page source, you’ll probably understand it easily. All of the content is already stored in that HTML file that you just requested from the server and the server responded by sending it to your browser. A hundred people can pull down that page a hundred times and it will always look the same.

Now consider Amazon.com. When you browse Amazon, it’s a completely dynamic experience. Even the home page is generated specifically for you based on the products that you’ve searched for or otherwise expressed interest in or simply the ones Amazon wants to promote at the time. If you view a specific product, the site will automatically display other related products along with it in hopes that you might be interested in buying them, too. The pages will display comments from other users, often with the latest ones first. If you go to the page tomorrow, there’s a good chance it feature different items than it did today. At Amazon, you’re not pulling down specific files but just requesting pages from their content management system. These pages are constructed as you request them.

Not all dynamic websites have to be as sophisticated as Amazon.com. ASP.NET sites might have just a few dynamic features on the pages which change according to the requirements of the user or the person running the site. As an example, see the screenshots below for a previous version of my professional site. Clicking on each will open a larger view in another window or tab.

css-screen1

css-screen2

In the highlighted sections of the screenshots, you’ll see two things that are different, the quote at the top of the page and the featured article in the middle. I decided that I would have random quotes appear at the top to accent the site and fill some space. I also wanted the front page to promote articles I’d written for the site and wanted to make sure that different articles got exposure.  So, I programmed dynamic features on the pages that would pull a random quote and a random article from the database in back of the site and display it each time a visitor loaded the home page.

ASP.NET Webforms

ASP.NET pages are referred to as webforms and are essentially a combination of HTML, the markup that you would normally see on a web page, and ASP.NET controls which run on the server and call server-side code written in one of Microsoft’s .NET languages. These calls are made in response to page events such as the page’s load event or events from individual controls such as button clicks and content changes.

Webforms are stored on the server with an ASPX extension that you’ve probably seen when requesting pages from various sites. These ASPX files contain the markup along with a reference to an accompanying file on the server that contains the .NET code which the page and its controls will use to generate the content. This is called the “code behind” model.

Click for larger view.

Click for larger view.

The screenshot above is a view of a Default.aspx file opened within the Visual Studio development environment. (Default.aspx is the typical name of the starting page for an ASP.NET site just as Index.html is the starting page for an HTML site.) Visual Studio is the primary development tool for designing webforms and ASP.NET sites. The new Visual Studio Community edition is a free download that’s equivalent to the Professional edition which usually sells for just under $400. It’s available for individual programmers and project teams of up to five developers.

The areas of the screenshot highlighted in green show some important features of the webforms.

  1. The Page Directive line at the top includes an instruction linking the markup page being shown to the code behind file ‘Default.aspx.cs’ which contains .NET code that it can call.
  2. On the right, under the Solution Explorer which displays all the file involved in the current project, you can see the Default.aspx page listed with two files associated with it, the Default.aspx.cs file and another designer file which is automatically generated by Visual Studio and contains background code for the objects on the page.
  3. Within the markup, you’ll notice three label controls which start with “asp:Label”, one of which is highlighted. These are ASP.NET label controls which have been placed on the page to display specific information. In addition to displaying information, they are also capable of interacting with the code behind the form.
Click for larger view.

Click for larger view.

In the screenshot above, you can see the code behind the Default.aspx page. There’s a lot going on there but the main thing you should notice is the sixth line down:

protected void Page_Load(object sender, EventArgs e)

Whenever the page loads or re-loads in the visitor’s browser, the page’s load event will fire and call this C# function. Page_Load is actually the default function that is created for every webform. In this example, the event is coded in the C# language and the following is a summary of what it’s doing:

  1. It declares three variables – startTime (“2/25/2015 18:30”), endTime (“2/25/2015 19:30”) and currentTime which is equal to whatever time it is in the Eastern Standard Time when the visitor loads the page (UTC – 5 hours).  The first two variables are for the start and end times of the Ocala I.T. Professionals meeting.
  2. Two of the ASP.NET labels on the page are set to show the current date and the current time.
  3. Now the code makes a decision: If the current date and time falls between the start and end times of the meeting, a third label on the page must state that the meeting is in progress. Otherwise, the label must state when the meeting is scheduled or that it is over.

The resulting page, when pulled up in the browser at the time of this writing, looks like this:

Click for larger image.

Click for larger image.

The page displays the current date and time and announces that the meeting is over because they fall after the end time of the meeting.

As for the HTML markup that’s sent to the visitor’s browser, there’s nothing really special about it other than a few span IDs.

 <h4>
 <br />
 Welcome to the Ocala I.T. Professionals February Presentation!</h4>
 <p>
 Date:&nbsp;
 <span id="ContentPlaceHolder1_lblDate">Thursday, February 26, 2015</span>
 </p>
 <p>
 Time:&nbsp;
 <span id="ContentPlaceHolder1_lblTime">12:41:48 AM</span>
&nbsp;(EST)</p>
 <p>
 <span id="ContentPlaceHolder1_lblProgress">The meeting is over.</span>
 </p>

 

So, in summary, an ASPX webform –

  1. Starts with a markup file which contains the basic page content and controls.
  2. Calls .NET code within a code behind file to respond to page and control events.
  3. Generates a page based on the markup and the code behind and …
  4. Outputs that page in HTML form that a browser can interpret.

 

In addition to displaying information, ASP.NET webforms can be used to collect and validate information for storage in a database. ASP.NET functions are used to manage all points in the process including displaying the collection form, validating the input, connecting to the database, sending the data and returning any errors or result messages.

inputform

The data entry form above collects some basic contact information for customers.  As with the previous example, the ASPX file calls a code behind file to supply the functions that will save the information when the user clicks on the Save button. The save button shows up in the ASPX markup as follows:

<asp:Button ID="cmdSave" runat="server" OnClick="cmdSave_Click" Text="Save Address" />

Notice that it contains an OnClick instruction which calls a function called “cmdSave_Click”. Because the ASPX file is calling it’s .cs counterpart, the button actually calls the function in the screenshot below.

Click for larger.

Click for larger view.

The comments in green explain pretty well what the procedure is doing. This is actually a very basic way of saving data to a SQL database from C# / ASP.NET but I chose it for this demonstration because, even if you use one of the more advanced methods for communicating with databases from ASP.NET, they’re basically abstractions that are still doing what you see above at some point.

  • A connection is formed with the database.
  • A command is created and the information is added as parameters.
  • The command is executed
  • The database connection is closed.

As with other websites, ASP.NET webforms are inherently stateless meaning that each request is treated as a separate request without relation to any previous requests. ASP.NET does, however, contain functions to recognize the current user session, maintain session data such as user identification and distinguish between a new page request and a request that is the result of data which has been posted back to the server such as though the clicking of a Submit button. The programmer can also create session variables that will persist during a user session and can be referenced across pages. This becomes important when you start developing applications such as the one above where the user is submitting information and Submit buttons like the Save button initiate postback operations to the server.

Master Pages

Webforms can reference master pages which provide a consistent look and feel for a web application across multiple pages. The master page itself functions as a master HTML document with header and footer sections. ContentPlaceHolder controls within the master page enable content from the child webform to be inserted at runtime. Going back to a previous example, click on the screenshot below and notice the MasterPageFile instruction in the page declaration at the top. This is how an ASPX webform references a master page.

Click for larger view.

Click for larger view.

When creating the webform, the programmer can specify a master page to be used and then insert any content specific to the webform within the Content sections on the new webform that correspond to the placeholders on the master page. Master pages also use the code behind model and can reference code that functions across all of the pages which reference them. The markup for the master page is shown below and will look a little bit more familiar to those who’ve worked with HTML.

Click for larger view.

Click for larger view.

 

ASP.NET and JavaScript

In addition to the code behind files, ASP.NET webforms can reference JavaScript code as any normal HTML page would. JavaScript is even created automatically as part of the output to the visitor’s browser. Despite ASP.NET’s power on the server, JavaScript is sometimes helpful for minimizing the trips to the server and avoiding unnecessary page refreshes. JavaScript code can reference the content in ASP.NET controls as it would HTML controls by using special syntax. Because the controls are rendered at runtime, JavaScript must reference a client ID in order to obtain the reference to the control object.

As an example, consider a dropdown box on a page that lists a number of images that have been stored. The control is represented as follows in the ASPX source view.

<asp:DropDownList ID="ddImageList" runat="server" onchange="updateImage(); return false;">

The onchange event calls a JavaScript function called updateImage() which is shown below.

 <script>
 function updateImage() {
 document.getElementById('<%= imgOne.ClientID %>').src = "../Images/" + document.getElementById('<%= ddImageList.ClientID %>').value;
 }
</script>

The function uses getElementByID as usual in order to reference the page control. The difference is that ASP.NET controls are rendered from the server rather than by the client HTML code so they don’t get IDs until runtime. For that reason, the JavaScript code references the ClientID property of the control in order to get the control reference. The ‘<%= syntax enables the Javascript to access the ASP.NET properties (and some intellisense).

JavaScript can be used on ASP.NET pages in order to alter page content without making a trip to the server.

JavaScript can be used on ASP.NET pages in order to alter page content without making a trip to the server.

 

In the next post, I’ll be talking about installing Visual Studio 2013 Community and starting your first ASP.NET project.

More Information

One of the advantages of using ASP.NET is the sheer wealth of information available online through various forums and websites. Whenever I have a question, I generally just type it into Google which often takes me to Stackoverflow.com. There is also Microsoft’s official site at http://www.asp.net/. I can also recommend Sams Teach Yourself ASP.NET 4 in 24 Hours by Scott Mitchell and Microsoft Visual C# 2012 Step By Step by John Sharp. These books will take you further into the process of designing professional websites and coding with C#.

 

Sign up for our newsletter …

Categories

About Andrew Comeau

Organizer of the Ocala I.T. Professionals. Software developer and consultant based in Ocala, Florida.