Exercise 1: New ASP.NET Project Templates

In this exercise, you will explore the new ASP.NET 4 Web Forms project templates provided in Visual Studio 2010. In earlier versions of ASP.NET, the project templates provided only a simple structure with very little guidance on how to build a production Web application. Developers had to implement certain common scenarios, like simple forms authentication, each time from scratch.

ASP.NET 4 introduces three new templates, one for an Empty Web application project, and one each for a Web Application and Web Site project.

The Empty Web Application template is a stripped-down Web Application project, very similar to earlier versions, including a minimal Web.config file.

The other new templates contain major changes, for example:

  • Basic Membership Functionality: Most of the web sites or applications require some kind of security and authentication. The new templates have a simple implementation of a security module which lets you quickly get started in securing access to the new application.
  • Default Master Page: Frequently, master pages are used to define common rendering across a web application, like headers, menus, login status, etc. The new templates include a master page used by the default page.
  • Default CSS file: UI can be easily modified if the site was built using CSS. All the UI components that compose the project created by the new template make use of the provided cascading style sheet file definition, named Site.css. Moreover, ASP.NET 4 Web Forms include improvements on CSS support in the Web.config pages attribute controlRenderingCompatibilityVersion which indicates the level of backward compatibility.
  • Minified Web.config: With the Microsoft .NET Framework 4, all the configuration required for each module that is not application-specific, can be inferred from the machine.config file located inside the .NET Framework directory. This helps having a simpler Web.config which only includes the data that is application-specific, avoiding the needs of duplicating setting and thus having a much simpler and consumable configuration file.
  • jQuery Integration: The jQuery library is a very popular open-source JavaScript library that is included with both ASP.NET Web Forms and ASP.NET MVC. The Microsoft Ajax Library was designed to appeal to jQuery developers. You can mix jQuery plug-ins and Microsoft Ajax client controls seamlessly within the same Ajax application.

On this exercise, you will create a web application using the new ASP.NET 4 WebForms template, explore the created project to identify the elements mentioned above, and implement a simple example using jQuery.

Task 1 - Creating a new Web Application

In this task, you will create a new Web Application using the project template provided with ASP.NET 4 Web Forms.

  1. Open Microsoft Visual Studio 2010. Click Start | All Programs | Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010.
  2. From the File menu, select New | Project.
  3. In the New Project dialog, select the ASP.NET Web Application template, located under the Web templates.
  4. Type NewWebApplicationTemplate as Name and set its location to Ex01-NewTemplates\Begin\ (Choosing the folder that matches the language of your preference) inside the Source folder of this lab. Make sure that Create directory for the solution is checked, and click OK to create the project.

    Figure 1

    Creating a Web Application using the new templates(C#)

    Figure 2

    Creating a Web Application using the new templates(VB)

  5. Your solution should look like the following:

    Figure 3

    Web Application created using the new Project Template (C#)

    Figure 4

    Web Application created using the new Project Template (VB)

    You can easily identify the new features mentioned in the introduction by inspecting the project structure:

    Note:
    You will go through each of these items later on this exercise

    • Basic Membership Functionality: All the security functionality is implemented inside the Account folder of the project.
    • Default Master Page: The provided master page called Site.Master can be found at the root of the Web Application.
    • Default CSS file: A Styles folder with a Site.css file inside is automatically created by the template. This is where the styles for the whole site are defined.
    • Minified Web.config: Opening the Web.config file at the root of the Web Application will show a really simple and clean configuration file.
    • jQuery Integration: jQuery JavaScript library files are located inside the new Scripts folder.

      Note:
      You will notice that there are 3 .js files inside the Scripts folder. All of them are different versions of the jQuery Library:

      - jquery-1.4.1-vsdoc.js: This file has comments inline to support Visual Studio IntelliSense. You should not use it in your web site; it is intended for use at design time by Visual Studio.

      - jquery-1.4.1.js: This file is the jQuery library itself. You will use it while develop your application.

      - jquery-1.4.1.min.js: This file is the minified version of the jquery-1.3.2.js. Unnecessary blank-spaces have been removed and variables names were collapsed from the previous one. This file is optimized to be used on production environment saving user’s bandwidth.

    Note:
    Visual Studio 2010 also ships with an empty template if you not need all the features that the default template provides. To create an empty web application, simply choose the Empty ASP.NET Web Application template. This template only includes the Web.config.

Task 2 - Exploring Out-of-the-Box Authentication Mechanism

You are already aware that the new ASP.NET 4 Web Forms templates provide basic membership functionality to secure your web application; in this task, you will explore the implementation, identifying the key elements of it.

  1. In the Solution Explorer, expand the Account folder. You should see 4 pages and a Web.config file inside it.

    Figure 5

    Account folder inside the new Project Template (C#)

    Figure 6

    Account folder inside the new Project Template (VB)

    Note:
    the Web.config file located inside the Account folder allows unauthenticated users to access the Register.aspx page. Access to other pages is limited to authenticated users only.

    Permissions for the Login.aspx page is not required since it is defined as the Forms Authentication login page making it automatically accessible to any user (authenticated or not.)

  2. In the Solution Explorer, double-click on the Login.aspx file. This is the default login page which contains a Login control with a custom layout template.

    HTML

    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    FakePre-de2ddff50877494bad0f57b496a75352-8513ecdb687d4e68972e62584f73c4c2FakePre-3c4773e6901e4215ac8217fc92fe2795-2795fb20069f4f1181dab9bcdf4f379eFakePre-9b84669cd1394e66ba6ba854a0ffa943-e101864c5ccc44d1a6036981259d5e39FakePre-cdc22eeadf2146938f658cdfdad2016b-87969cbefe864da5919b91686e6187b7FakePre-4ddcabc62a774f7280eff5822278a278-acb9feefc80748c980d373ea53853cdbFakePre-31675a243edd4e3c86b1f0f281ddffc3-7601b827e9fc409dbd4bb5a3be09195eFakePre-b7f6585e6343432a82c370f461f02b52-a9764d0b41b347059620e96bda42c7a3 <asp:Login ID="LoginUser" runat="server" EnableViewState="false" RenderOuterTable="false"> <LayoutTemplate> ... </LayoutTemplate> </asp:Login>FakePre-218789c8a0b54307bd4cd04fc1f95716-60fe94177b104c73b62c4c9d4cf4db04

  3. Open the Site.Master file, located at root level of the NewWebApplicationTemplate project; and locate the LoginView control.

    Note:
    The LoginView control is used to show the login status, and provide the link to login/logout. Adding this control to the Master Page implies it will be rendered in all the web pages across the web application that has this master page set.

    Note:
    The control is configured to show the name of the logged in user, or a link to the login page when an anonymous user access the site.

    HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    FakePre-0ffb548e5f5d45c1afea552596b268a1-c70da131a94a47be92a30230d9449b0dFakePre-4dea3e03589043a5ab65131f0096a4f6-941e9d85eca84c649b3e22f4d75279fcFakePre-64a84752f9de457b9d4d0a59e35ba323-d55e0e5b1ef543a2a67c312f4309706cFakePre-4dbde1403552447b96df256fa49cf906-75b3ca3a898c46168c8bf5cc9da55200FakePre-3ce55e64daf2424d9d302d377bee9182-0e7c674f868f4865ac77fcc16e782ac2FakePre-5f920d1e2172430987df87e84db8a8d3-01f421cab5134f58a2e298b03744fc92FakePre-c181bb7db7cb4b6ab8ec435998b30510-7260bfa2eb9a4c5396d221a776cc1255FakePre-31b6b897400c42e4a8672a5a59f70225-3ca9c62fc0df4ceab0b8963bc4d58f3aFakePre-027a5421879c422bb14256e45fff8203-cb6ca6a73a1d40e5aebd93c0f2625444FakePre-f13664b8b5f44fd9b0bad7eee664d8f2-a31f73f4d4de4b639483f3d8d554c595FakePre-55dd6a81b71747fda6b642e340395391-309caf0c1f9a40059c1219b3e02eccb1FakePre-2736a7e308b540a29db8d13460fabe03-68b20507f2b34a168ece47c0a9ae7576FakePre-773addf6d3274246af96f12b4774440b-182f3ec0420c41aca66c2922b4bc1782FakePre-82c3a4b453c442cbaf16b7bdf26cb8a1-200f439d942d44e8b0fc42f7c83ac883FakePre-bc8813f8e683433c954fb5138a9277a1-40d97eeccaf745bc80dce42f9f867754FakePre-4b72be5f83284fca99f56bb29ddae956-453fced023414fb5b28d9e42ef298fb5FakePre-fd9d0253759b4fd78ea7d03d6acf1480-b32faad053684a808c901bbce4f63755 <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"> <AnonymousTemplate> [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ] </AnonymousTemplate> <LoggedInTemplate> Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>! [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ] </LoggedInTemplate> </asp:LoginView>FakePre-88a853fa777c48278298b8136384e6a9-ee852b742a4c4e2598c724651549da92FakePre-7487847cf8984c44a30c03528f3bf9af-0dd0461472664d46b5553e36e625ea8eFakePre-37f70602ac124a02a343c7c75413cec8-b9317636d340402484ce4d55fd33c836FakePre-fb91e77a38b04b94956fe5e7fd0634bd-fe86dcd3813a48fcb92d400f3302f6f8FakePre-5e4cdbde43794beca23993ef0767950f-2c3b34fcdfd44492a96b31be39d32e44FakePre-628eed18b9a34f60bd6bdad56aed54f4-c31a602837a94cbe890378ac14b33bb8FakePre-4d23961e7f8d41c2af91c8f7a8745568-dc3d94f1e8654ea3ba7a203d9ab7f9e8FakePre-7d03c67b85c046aeb17852587c186368-9c63626f810242eca70695b51f1974e5FakePre-78b62c3159334395aee4cbe2c0f6cc9f-d4770ad3104c4889b0d02c77d06ea58dFakePre-d247c5a8355045c9addcc85cac5e02c5-8a38a18049da4b129e6ab862a6a6c25eFakePre-a2705fb18d6348c3bb9d0b8eda37e0b3-30bcccb99d5f45ec92c10f32c0547972FakePre-161e534334bc443d9c3d78a819263504-0568ead0a3264013b9e0eeb7134a51b2FakePre-4eaa2811e7da4cff90364aa92179bfe7-0697b7dc7eec4ee7a1003ebc31ae1e0dFakePre-65e0bd1b2cd44ccbaeaf6c2b2bc26410-3bf0818afe2e4b33ab210a7f60cb044aFakePre-851a2bc3000e48029fcae46f5a0f03b8-b7879b71acfc40ee96d1d445263c08feFakePre-eb793c0f0892438cbfcd39887e6a5a33-686b02d201a043d0aa7989d685a6b330FakePre-209cf446fb54405a96a6a6766682e54f-4310a64db3714bddacab14e7098ad897FakePre-9c77f189eb604bccb8a331b4d377bfce-9d5769eb326045f0b894b14bdad50f24FakePre-b224b9628021470e8c5a130745d2874f-fa3877793d5543fd8eb45f4a8308a8e8FakePre-85b2df8afeb74bb5ba61702af1df7517-0d98454a98a34906b5c4d621fe4a0eb4FakePre-ac1e55775eb54b259dff24fd10e373ee-f3658d102aa74dfa89ef5639519d5af4FakePre-23a3ff4434984e2eb88f21e5695ac3f2-387f5e74050e4a7da59d64c36badc87c

    Note:
    Register.aspx and ChangePassword.aspx pages are also implemented using ASP.NET Login Controls.

    Register.aspx uses the CreateUserWizard control to guide the user through the registration process, while ChangePassword.aspx uses the ChangePassword control.

    All Login controls are configured to use Forms Authentication with a SQL Membership, Role and Profile provider. This configuration can be found in the Web.config located in the root directory of your application.

  4. In the Solution Explorer, double-click on the Web.config located in the root directory of your application to open it.
  5. Locate the <authentication> element located inside the <system.web> configuration section. This section configures the forms login authentication as explained above.

    XML

    <authentication mode="Forms"> <forms loginUrl="~/Account/Login.aspx" timeout="2880" /> </authentication>

  6. Below the authentication section, explore the membership, profile and role providers’ definition. By default, the template has all providers configured to use ASP.NET profiles database.

    XML

    <membership> <providers> <clear/> <add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="ApplicationServices" enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false" maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10" applicationName="/" /> </providers> </membership> <profile> <providers> <clear/> <add name="AspNetSqlProfileProvider" type="System.Web.Profile.SqlProfileProvider" connectionStringName="ApplicationServices" applicationName="/"/> </providers> </profile> <roleManager enabled="false"> <providers> <clear/> <add name="AspNetSqlRoleProvider" type="System.Web.Security.SqlRoleProvider" connectionStringName="ApplicationServices" applicationName="/" /> <add name="AspNetWindowsTokenRoleProvider" type="System.Web.Security.WindowsTokenRoleProvider" applicationName="/" /> </providers> </roleManager>

Task 3 - Exploring Minified Web.config

  1. In the Microsoft .NET Framework 4, the major configuration elements have been moved to the machine.config file, and applications now inherit these settings. This allows the Web.config file in ASP.NET 4 applications either to be empty or to contain just the a few lines.
  2. ASP.NET 4 Web Forms new templates take advantage of this new feature by removing redundant configuration from the configuration file. The Web.config file then inherits the common configuration, such as AJAX, routing, and integration with IIS 7, from the machine.config file by default.
  3. In this task, you will explore the default Web.config file detecting which elements are required.
  4. In the Solution Explorer, double-click in the Web.config file, located in the root directory of your NewWebApplicationTemplate project to open it.

    You will notice that it is shorter than previous versions ASP.NET’s Web.config files. In an Empty Web Forms application, the only required element in the Web.config file is the compilation element located in the <system.web> configuration section. This element indicates to the compiler the framework version that the application is targeted to.

    XML

    <!-- ... -->
    FakePre-c02f5e6807d044758d89d1c546afa7ed-75d07873d47b4ce78394d9d4e8532a32FakePre-364ff465082e442bbbdf27acabb593cd-263c17a058f848ada56a503a8d18dcd9 <compilation debug="true" targetFramework="4.0" />FakePre-dad2834f36d042d8ada9f2da0d534588-5435474d225b419cacfdfc8e09701e65FakePre-7dabb3da340742c5be2ada292b8e0242-f0d927d2d79c43b9afc779001d4d2304FakePre-93299900a6c3476b8ff8465dcb18f596-d96db00011cc4fdfbd6413c3edf29670FakePre-0bd2375dd01944a485cdf780f76e0365-3b4bce29767c42c5ade19a3e8fd8652fFakePre-d24d0a67a5fd4584b140082fe53f5bd6-5dfb81f80a8c4fcf9f7cccfd8d67ae34

    Since you have created an application that includes the authentication module, you will see the configuration sections described in the previous task. These elements are not required on an application that does not use ASP.NET authentication

    The following table shows to which component each configuration element applies:

    Component

    Configuration element

    Forms Authentication

    configuration/system.web/authentication

    ASP.NET Membership

    configuration/system.web/membership

    ASP.NET Profile

    configuration/system.web/profile

    ASP.NET Role Management

    configuration/system.web/roleManager

    Additionally, you will see a <connectionString> configuration section. This section defines the connection string that will be used by all preconfigured the SQL Providers.

Task 4 - Using Out-of-the-Box jQuery Scripts

As it was explained, jQuery is a very popular JavaScript library that provides developers with a framework for interacting with the UI components rendered in the web page. The new templates include this library out-of-the-box.

In this task, you will benefit from jQuery to change the color of the web page title.

  1. In the Solution Explorer, double-click on the Default.aspx file to open it.

    Figure 7

    Opening Default.aspx file inside the Web Application (C#)

    Figure 8

    Opening Default.aspx file inside the Web Application (VB)

  2. In the MainContent content, add a button that will be in charge of changing the color of the “Welcome to ASP.NET” title. To do this, paste the following bolded code at the bottom of the page markup.

    HTML

    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    FakePre-c85e4a20d6cd45139b85ae846bdbdae1-019683523bb4420c8009c0b4276553ebFakePre-afb3698671384157a2456cfd513e1314-36f6a31545a145c1beb491d0dc8d1bc0FakePre-b1f0e0f024e4453b82f410dda4cb27be-bfb57617cf7946f7968e052e72d15986FakePre-48bc0a0399b740c3b14fcfd0518c8699-04f74e816e684e639463c67b8c98da5fFakePre-7d66375ecffb42f8b510f78525477e72-7e1f6f88de4e4b129de09137bb17c8f0FakePre-c730063a7881491982762b35cd6ff800-9d876449ba204dcf8ffb3f68eeb201c8FakePre-ec4ee3e68b554096b0f7c41075ed1197-e77ba97ba7014a4dbb25761943024c4cFakePre-e8166166902d4f49a8a70f25dfd19f86-177ead7f7dc94d37a4e0f087f0340b30FakePre-8aeee24405ce414a94074aa9a88aaf98-ebe9c94999a34ad99de5e9cd4c175b07FakePre-2b8647e04a67412e82b1e6a76028f28e-0400a6298454423bb95dcc14a62f7e39 <input type="button" id="btnChangeTitleStyle" value="Change Title Style" />FakePre-5165ff7228754c9f9a97a6169004d033-0111b322b0fb4e4ab02fc76ee5265d7c

  3. To use jQuery, you must add a reference to the jQuery Library. To do this, add the following script element, which references the jQuery source file, inside the HeaderContent Content tag.

    HTML

    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>FakePre-d9766cd56b5b44be98568bd3d3149adf-11f56914844c4b1e9db2dcb393c6c401

    Note:
    jQuery libraries are also available in the Microsoft AJAX Content Delivery Network (CDN). It provides catching support for the most common JavaScript libraries like jQuery and AJAX.

    If you use it, users browsing your application will download the JavaScript libraries from the CDN instead from your Web Server.

    If you want to use the jQuery version provided by the CDN, you have to update the script element for:

    <script type="text/javascript" src="https://ajax.microsoft.com/ajax/jquery/jquery-1.4.1.js"></script>

  4. Inside the HeaderContent element, add the JavaScript implementation to change the color of the title. To do this, paste the following bolded JavaScript code below the jQuery reference.

    HTML

    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    FakePre-3536b00ef11a422cabaea1e447c67c81-911b1a3e11a443c588d554dc20b6306c <script type="text/javascript"> $(document).ready(function () { $("#btnChangeTitleStyle").click(function () { $("h2").css("color", "red"); }); }); </script>FakePre-b93b7af0ff024cd2b0e5a8e11b05c438-4c341fb261bf49bcafab2c8a145b2dec

    Note:
    The above implementation is fully implemented using jQuery, below you can find a brief explanation about what the preceding code does:

    When the document is loaded, an anonymous function is registered that in turn registers the click event functionality for the btnChangeTitleStyle button. When the button is clicked, the function uses jQuery selectors to set the color property on all the h2 elements to red.

    You can check the official jQuery web site where you can find a lot of tutorials to get started with it.

Next Step

Exercise 1: Verification