Web Application Development with ASP.NET and C# XXXXXXXXXXCEIL-865
LAB #6 – Using Master Pages, Themes and Menus in ASP.NET Applications
Student: ______________________
Purpose: The purpose of this Lab assignment is to:
Practice the use of Master pages in ASP.NET applications
Practice the use of Themes
Practice the use of ASP.NET navigation abilities
References:
Textbook.
Lecture notes
http:
msdn.microsoft.com/en-us/li
ary/ehszf8ax(v=VS.100).aspx
http:
msdn.microsoft.com/en-us/li
ary/zcsbskx7.aspx
This assignment may be completed individually by all the students. Submit the solution in a zip file using assignment link on blackboard. The file must be named according as indicated in previous labs.
Exercise #1
You have the task of developing a web site for a big retailer that has several departments (clothing, appliances, electronics, etc).
Use an ASP.NET application to implements the solution. Use a Master page to create the same look and feel for the web site. The Master page has 3 areas. The header area is used for top navigation (to allow the user to navigate through different department pages). The left area is used for displaying a set of links, and the right area (which is the biggest) is used for text content, such as news, etc.
Add menus to the navigation area. Allow the user to navigate through department pages using a Menu web control.
Add the necessary contents to the department pages (pictures, etc).
(8 marks)
Exercise #2
Use the above project for this exercise. Place a button web control on a content page. Apply a simple theme to this button.
(2 marks)
Lab #6 XXXXXXXXXXPage 1 of 1
.net/ceil865lessonweek0102ch4ch5-uivuybl4.doc
Web Application Development with ASP.NET and C# XXXXXXXXXXCEIL-865
Lesson Week#1,2: Introduction to .NET and ASP.NET
Based on chapters 4,5.
In this lecture you will learn about Web programming in .NET.
Visual Studio Help Documentation, MSDN and .NET (www.asp.net) documentation is used extensively throughout these notes to assure the co
ectness of definitions, concepts and terms.
Objectives
Upon the completion of this work the learner will have a good understanding of web programming in .NET.
The student will be introduced to AP.NET component model, event-driven programming, ASP.NET development stack and ASP.NET provider model.
Introduction to ASP.NET
ASP.NET is the new Microsoft’s server-side technology that can be used to create dynamic and interactive Web applications. An ASP.NET program is designed to run on any web server such as IIS, etc.
ASP.NET is replacing the old server-side scripting technology, Active Server Pages, which is very tied to IIS and is based on server-side scripting languages, such as VBScript or JavaScript.
ASP.NET programs are CLR (Common Language Runtime) compiled code and have all the advantages of .NET languages. The actual implementation of ASP.NET provides support for VB.NET, C#.NET and JScript.NET.
Common Language Runtime provides the infrastructure that enables execution to take place as well as a variety of services that can be used during execution.
Language compilers and tools that target the runtime use a common type system defined by the runtime.
When an ASP.NET page is first requested, it is compiled and cached on the server. This
ings better performance. Compiled code allows just-in-time (JIT) compiling to native code.
ASP.NET offers more flexibility than ASP because the entire .NET Framework is made available to ASP.NET developers. This allows you to separate the application logic from presentation layer and also to take advantage of the common Visual Basic model of event-driven programming.
ASP.NET and HTTP Methods
When the user requests an ASP.NET page (an .aspx file) from a
owser, the
owser sends an HTTP request to IIS . The IIS passes the request to worker process, which passes it to the HTTPHandlers defined in the configuration file Web.config.
The ASP.NET file is read from the cache or disk (if it’s the first time), loaded into memory and executed.
ASP.NET generates an HTML output and sends it to IIS, which returns it to the
owser.
Figure 1.1. ASP.NET model
The two most common HTTP request methods are GET and POST:
· A GET request gets (retrieves) information from the server. Common uses of GET requests are to retrieve an HTML document or an image.
· A POST request posts (or sends) data to the server. Common uses of POST are to send to the server information from an HTML form in which the client has entered data.
ASP.NET and the Web Servers
You may run the ASP.NET pages on IIS (Internet Information Server) that comes with Windows XP/7. When you install the Web Server, the installation wizard creates a default home directory C:\Inetpub\wwwroot, which will be used to store your .aspx files. Using the Internet Services Manager you can create as many virtual directories as you want and store your ASP.NET files into them. In order to be able to test ASP.NET programs the web developer must have administrator privileges on the computer running IIS.
To write an ASP.NET page you may use any text editor or the Visual Studio.NET IDE. Microsoft provides for free a very simple and useful tool that can make it easy for you to write ASP.NET applications. It’s called Visual Web Developer 2010 Express Edition. We will be using VWD 2010 Express edition in our course.
The Architecture of an ASP.NET page
An ASP.NET page can be simply consisted of HTML text and the code. You can write the code in Visual Basic.NET or C#. The ASP.NET files should be stored with the extension .aspx.
The actual implementation provides full support for the ASP scripts as well. This includes support for <% %> tag that is used to write code that can be intermixed with HTML content within an .aspx file. But unlike with ASP, the code included in percentage tags is compiled.
An ASP.NET page is composed of the following elements:
1 - Code declaration blocks used for defining variables and methods
script runat="server"
‘code
script
2 - Code rendered blocks:
% string strVar;
strVar = “Hello”;
Response.Write(strVar);
%
3 - Directives that specify optional settings for the page:
%@ Page Language="C#" %
4 - HTML syntax
5 - Server control syntax
asp:TextBox ID=”txtUserName” runat=”server”
Web Forms
Undoubtedly the most exciting feature of ASP.NET is introduction of the Web Forms. You can use the web forms to create the user interface of ASP.NET applications in the same way you build the GUI for VB applications. The web forms allow a clear separation of the presentation layer from business logic which can be implemented using VB.NET or C# classes. This is known as code-behind technique. Visual Studio .NET implements the code-behind by default.
With the web forms you can take advantage of event-driven programming techniques, and use a rich set of controls.
HTML Controls
These are the standard HTML controls like the text fields and buttons used in the previous example.
The HTML controls can also be executed as server-side controls by adding "runat=server" into their definition:
input type="text" name="txtUserName" runat="server"
In this case the HTML controls allow you to handle server events associated with a specific control, such as click event, etc.
Web Form Controls
Web Form Controls are a richer set of controls that run on the Server.
For example the Label control is a server side control that can be used to display information on a web form:
asp:Label id=Label1 runat="server">Label
asp:Label
All Web Form controls inherit from System.Web.UI.WebControls class.
A Web Form life-cycle follows a specified set of events. For example The Init event is the first event that occurs when the user visits the page. The Load event occurs when the page is loaded.
The control events such as Change event, occur next. The UnLoad event takes place before the page is disposed.
Web Form Example
Let’s write a simple ASP.NET application consisted of a simple web form.
Run Visual Studio .NET 2005. The Visual Studio .NET 2005 IDE will show the following window:
Select File, New, Web site.
Figure 1.2. Creating a Web site project
The New Web site window will open as is shown below:
Figure 1.3. Selecting an ASP.NET Empty project
Select Visual C# under the languages and ASP.NET Web site under the Templates. Change the location of your application as is shown in the Location combo box and click OK.
Add a new item to your project by selecting the project in Solution explorer and clicking on Add New Item.
Choose Web form as shown below and click Add.
Visual Studio will create a new web form and display the following page:
Figure 1.4. ASP.NET project view
Click on the tool box and by adding only labels, text boxes and buttons, design a simple web form (for example, a simple login screen).
Run the web application by clicking on the start button. You will get something like this:
Figure 1.5. Running the project
Select Run without debugging and click OK.
Here is the output:
Figure 1.6. ASP.NET web for at runtime
Simple eh!
Let’s add some code to handle the interaction with users. Add another label control to the web form.
Figure 1.7. Handling the interaction with use
Here is the C# code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System