Developing an application with ASP.NET 2.0 – Part 1
Alexandre Tarifa e Andrey Sanches
This article debates:
This article uses the following technologies:
· ASP.NET 2.0 new features;
· Database creation;
· Definition of the site’s navigation structure.
.NET Framework 2.0; ASP.NET 2.0; Visual Studio .NET 2005; Visual Web Developer; Atlas .NET; SQL Server 2005.
Welcome to a Mr.Bool Magazine innovation: a course designed for you to get acquainted with the main resources of the ASP.NET 2.0 using Visual Studio 2005 or Visual Web Developer, which can be downloaded for free at HTTP://msdn.Microsoft.with/vstudio/express. As a database tool, the SQL Server 2005 Express will be used. In these three parts of the mini-course, you will meet the main new features for applications’ development brought by ASP.NET 2.0, that they will make the development of Web Sites easier, generating great productivity for you, developer.
We will show the main new controls, database access, tips and tricks that will be useful for Web Sites’ construction and organization. Being based on a simple commercial application, the resources will be demonstrated in a way that approaches mostly the routine of a developer.
In this course, we will create an online budgets control system, with the following requirements:
? Categories management;
? Products management;
? Budget request;
? Management reports;
? Web site security features, such as user control, groups and access permissions.
The goal is to create a simple system, which allows the maximum use of the resources of this new ASP.NET version. The mini-course will be organized as follows:
· Part I - Introduction, requirements, creation of the database, project and pages, master page and web site navigation;
· Part II - Creation of the management pages (categories and products);
· Part III - Security and budget request.
Creation of the application
Open Visual Studio .NET 2005 and click File> New Web Site; point to the ASP.NET Web site template; choose location File System; in the language field, select language Visual C#; inform “C:\ Demo” to determine the project’s path and confirm by clicking OK, as shown in Figure 1.
Figure 1. Creation of the new Web site type project
One of the great new features brought by Visual Studio 2005 is the creation of File System type projects. With this option, the tool will use a local server to run Web applications, instead of the IIS (Internet Information Services), as it as was in ASP.NET 1.x. There is no need to create a virtual directory or even to have the IIS installed to develop the project. Besides that, the resource makes the organization of the projects a lot easier, since now it is possible to store and open projects from any place. Just open the project and execute it.
After the creation of the project the tool will create the initial files. Apart from the default.aspx file, it will also be possible to visualize the App_Data special folder, which has for its function storing several kinds of data sources which will be accessed by the application such as, for example: database, XML archives, etc. During the development of the application, you will see other special folders that are part of ASP.NET 2.0.
You must have noticed also that the project did not automatically create the Web.config file (such as happened in the ASP.NET 1.x). This also is a new characteristic of the ASP.NET, no longer being necessary the diverse configurations that were stored in this file, in case we are creating a simple application.
Creation of the database
In the Visual Studio 2005 default installation, the SQL Server Express is included, in such a manner that it will already be installed. In case the development is being made in Visual Web Developer, proceed to the free download of the SQL Express at the HTTP://msdn.Microsoft.with/vstudio/express site.
In Solution Explorer (Control + Alt + L), right-click over the directory App_Data>Add New Item. In the window (Figure 2), select SQL Database and change the name of the database to MyDatabase.mdf.
Figure 2. Adding a database
The database was created. Notice that SQL Express works with mdf files, operating in a way similar to Access. Let us use the Visual Studio itself as a tool for the database management. Open the Server Explorer (Control + Alt + S) window, a connection to the database MyDatabase.mdf is already opened. Right-click over Tables > Add New Table. The structure for creation of table will be opened in the Visual Studio itself. Add the fields according to Figure 3.
Figure 3. Category Table
To configure the CategoryID field as being the primary key, just select it and click the Set Primary Key button. As this field is auto-increment, we have to configure it. Press F4 to open the Properties window and modify Identity Column to CategoryID. Save the new table with the name “Category”.
Following the same steps, create a second table called “Product”, using the structure shown in Figure 4. As the ProductID field is auto-increment, press F4 to open the Properties window and modify Identity Column to ProductID.
Figure 4. Product Table
To add the relationship between the tables, right-click over any field and choose Relationships. In the new window that will be opened, click Add to create a new relationship, expand the Tables and Columns Specification property and modify the settings according to Figure 5. Following, click OK and close the window to continue the example.
Figure 5. Relationship between Category and Product Tables
Creating the application’s structure
The majority of the applications have a common look and feel and similar navigation/visualization structure. Normally there are upper and side menus or options that will be available in all the pages. In ASP.NET 1.x, we used User Controls to create common areas in the Web applications. Despite the User Controls not having been specifically created for this purpose, they solved the major part of the problems.
ASP.NET 2.0 brought a very interesting resource called Master Pages, which allows the creation of several templates that will be used as a basis for all the pages. This being, we will begin creating the Master Page that will be used in the whole mini-course.
In Solution Explorer right-click over the project, point to Add New Item and select the Master Page template in the window that is opened (Figure 6). Name the Master Page as “Master.master”, select the language Visual C# and keep the Place code in separate file option enabled. This option will create the archive of Codebehind and keep the C# code (.cs) separated from the layout file (.aspx). Confirm with Add to make effective the creation of the Master Page.
Figure 6. Creating the Master Page
When creating Master Page, the tool presents a window containing a ContentPlaceHolder object, which represents the section where the specific content of each page created in the future will be stored. Everything that is left outside of this object will be shown in all the pages that make use of this Master Page; and in this area, where normally the company logo is placed, a navigation menu, information about the logged user, and other information that are necessary in all the pages of the Web site.
Set the layout in the manner you find more convenient, since we will carry on developing the Master Page with other important ASP.NET resources. After having set the Master Page, we will create the first page, which will be the application’s Main menu, containing links for the various system functionalities. For this, right-click over the project, point to Add New Item and select the Web Form template. Modify the Name of the WebForm to MainMenu.aspx; choose the Visual C# language and keep the place code in separate code option enabled. Notice that a new option was created, the selection Select Master Page, which is exactly the resource to select an existing Master Page. Select this option and confirm with Add for the selection of the Master Page.
The next screen (Figure 7) shows, on the left hand side, the project folders structure and, on the right hand side, the Master Pages available in each folder. Just select Master.master file and confirm with OK to make true the creation of the Main menu page.
Figure 7. Selecting the o Master Page
After the creation of the Main menu it is possible to visualize in Design Mode a screen similar to Figure 8, showing in the top part the content of the Master Page and in the lower section, the Content object which will store the entire page’s content. If, at some moment, it is necessary to modify the Master Page, just right-click over the area of the Master Page, select the Edit Master option and you will be redirected to the file, thus being able to make the necessary changes.
Figure 8. Use of the Master Pages in the main menu of the Web Site
The navigation of a Web application is something very important, and in ASP.NET 2.0 together with Visual Studio 2005 we have tools that facilitate this task very much. A new concept called Site Map was created where, through an XML file, we determine all the pages of the project according to the application hierarchy. From this resource we can take advantage of controls that use the Web.sitemap file as data source.
To add the file, in Solution Explorer, right-click over the project and then choose Add New Item. Select Template Site Map (Figure 9) and click OK.
Figure 9. Creation of the Site Map File
The XML file is opened and already brings the basic template for alteration. XML archives work in a hierarchic manner, where the nodes define which will be father and son in the relationship, with this we add as the main file node the system main page. From the main node the hierarchy follows until an infinite parents/children level. Modify the file according to Listing 1.
Listing 1. Site Map in XML file
xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="MainMenu.aspx" title="Home">
<siteMapNode title="Manage" description="Manage">
<siteMapNode title="Categories" description="Categories" url="Manage/Category.aspx"/>
<siteMapNode title="Products" description="Products" url="Manage/Product.aspx"/>
<siteMapNode title="Budgets" description="Budgets" url="Budgets/Budget.aspx"/>
<siteMapNode title="Search" description="Search" url="Search/Search.aspx"/>
After the definition of the hierarchy, we will get acquainted with the controls that benefit us very much in the navigation of the pages. Since navigation occurs in all the pages, we will modify the controls inside the Master Page, thus all the pages will have the navigation ready. Open the already created Master Page in Design Mode, and just below the heading text add the Menu control (Figure 10), which is located in the ToolBox in the Navigation category.
Figure 10. Main Menu
Select the menu control and modify the Orientation properties to Horizontal, with this the menu will be aligned with the heading, Static DisplayLevels for 2, to initiate exhibition from node 2 in the Site Map file hierarchy. Open the menu Smart Tag (Figure 11), select Auto Format and modify the model according to your taste. Again in the Smart Tag, select Choose Data Source > New Data Source, select Site Map and click OK.
Figure 11. Selection of the Smart Tag
The menu is ready, notice that the values contained in the XML file are already displayed (Figure 12).
Figure 12. Main Menu
Another very interesting control is the SiteMapPath of the Navigation tab, which shows the “path” where the user is found inside the site. Add it just below the menu (Figure 13). The only necessary customization is that of the template, which can be made from the Smart Tag. There, this is a great resource, very interesting and very simple of being used, and that enriches any application very much.
Figure 13. SiteMapPath
In this first part of the ASP.NET 2.0 mini-course, we saw how to create the application database in the SQL Server 2005, and also the definition of the structure that we are going to use in the application along the development. In the next editions, we will continue the development of our application in Visual Studio 2005, highlighting spectacular resources of productivity in the development of applications with ASP.NET 2.0.
Andrey Sanches (firstname.lastname@example.org) is ITGROUP Microsoft Consultant, MVP (Most Valuable Professional - Visual Developer ASP/ASP.NET) and works with systems development in the .NET technology since its beta version. MCP (Microsoft Certified Professional), Leader of the developers’ community, codificando.net - SP (www.codificando.net), Microsoft lecturer in several events of the area, gives training and mini-courses of .net in several companies and writes articles for sites as Dev Media Portal and magazines such as MSDN Magazine Brazil and Web Mobile. More new features can be found in his blogs: HTTP://weblogs.pontonetpt.com/andreysanches/ and HTTP://blogs.vstsrocks.com.br/andreysanches/
Alexandre Tarifa (email@example.com) – ITGROUP consultant (www.itgroup.com.br), MVP (Most Valuable Professional), MCAD (Microsoft Certified Application Developer) and MCT (Microsoft Certified Trainer). UMESP Bachelor and post graduate by the Universidade Federal de São Carlos in Computer science. One of the creators of the VSTSRocks community (www.vstsrocks.com.br). He writes articles for magazine MSDN Magazine Brazil and Web Mobile and for the sites MSDN Brazil and Enterpriseguys. Visit the blog on Visual Studio Team System in: HTTP://blogs.vstsrocks.com.br/alexandretarifa.