Post
Ask Question

Creating Web Forms Application Using Visual Studio 2013

Introduction

This article explains how to create a Web Forms application using the new empty web application in Visual Studio 2013. There are various types of ASP.NET features and NuGet packages used here to create a Web Forms application.

In that context, we'll select an empty project template in Visual Studio 2013 and develop it to the Web Forms application template. You will learn how to create a Web Forms application with no authentication.

As we create this application, you can see where and how various web technologies are leveraged by the template, that you take and similarly apply in your existing web projects as you need.

So let's proceed with the following sections:

  • Creating Web application
  • Adding Master and Content Pages
  • Working with Friendly URLs
  • Enabling the Bundling and Minification
  • Using ScriptManager Control
  • Adding Modernizr for HTML and CSS Features

Creating the Web Application

We'll create an application in Visual Studio 2013, so that you can use the ONE ASP.NET.

Step 1. Open Visual Studio 2013 and click on "New Project".

Step 2. Select the ASP.NET Web Application and enter the name.

Step 3. Select "Empty Project Template".

Empty Template in VS 2013

Now at this stage you have an empty project in Visual Studio 2013. So, let's make it more creative.

Adding Master and Content Pages

Before adding the master and content pages, we add the bootstrap theme for the application. Use the following procedure to do that.

Step 1. Open the Package Manager Console and enter the following command:

Install-Package Bootstrap

This will install the Bootstrap theme in your application.

Installing Bootstrap in Package Manager Console

Step 2. Now we add the master page, just right-click on your project and add a new item and select "Web Forms Master Page".

Adding Master Page in Empty Application

Step 3. Now add the content pages named Default.aspx, About.aspx and Contact.aspx. To add the content page select "Web Form with master page".

Adding WebForm with Master Page

Step 4. You'll now see the Content folder in the app. So right-click on the Content folder to add a CSS file named Site.css and enter the code in it. Now reference the bootstrap.css and site.css in your Site.Master page as in the following and update it:

<head runat="server">
    <title><%: Page.Title %>My Sample Application</title>
    <link href="Content/Site.css" rel="stylesheet" media="screen"/>
    <link href="Content/bootstrap.css" rel="stylesheet" media="screen"/>
    <link href="Images/google_earth-2.png" rel="shortcut icon" type="image/x-icon" />   
</head> 

Step 4. You can also add a favicon icon to your application that will show in the address bar or the browser tab. The syntax is as the following:

<link href="Images/google_earth-2.png" rel="shortcut icon" type="image/x-icon" /> 

You can design any type of content depending on you. I am creating this application as a Web Forms application. The following is my Home Page. You can now run the application and navigate to other pages like About and Contact from the Home Page. The following is my Home Page:

Home Page

Working with Friendly URLs

As you can see, the extension ".aspx" is present when you navigate to any web page. We can change this to generate a friendly URL without extensions and add routing to the web application as we see in the Web Forms or MVC projects. So, to enable this use the following procedure.

Step 1. Open the Package Manager Console and enter the following command:

Install-Package Microsoft.AspNet.FriendlyUrls

If your project does not have the RouteConfig.cs file then this will add it to your project in the App_Start folder. It will also add the SiteMobile.Master and ViewSwitcher.ascx that are useful to view the webforms in the mobile.

Step 2. Add the Global.asax file and modify the code as the highlighted code below:

protected void Application_Start(object sender, EventArgs e)
{
    RouteConfig.RegisterRoutes(RouteTable.Routes);
}

Now run the application and when you navigate to your About or Contact page, the extension will not show in the URL.

Page URL with No Extension

Enabling the Bundling and Minification

There are two web optimization techniques named Bundling and Minification to enhance the load time request by reducing the number of requests to the server and reducing the size of the requested assets, like CSS and JavaScript. Use the following procedure to enable this.

Step 1.  Open the Package Manager Console and enter the following command:

Install-Package Microsoft.AspNet.Web.Optimization.WebForms

This installation updates the Web.Config file.

Step 2. Add the config file in the project by right-clicking on the project and add a new item as in the following:

Adding Config File

Step 3. Add the following code to it:

<?xml version="1.0" encoding="utf-8"?>
<bundles version="1.0">
  <styleBundle path="~/Content/css">
  <include path="~/Content/bootstrap.css" />
  <include path="~/Content/Site.css" />
  </styleBundle>
</bundles>

Step 4. Delete the CSS references in the Site.Master and replace it with the following code:

<webopt:BundleReference runat="server" Path="~/Content/css" /> 

Step 5. If you run the application now then by using the F12 tools we can see that the CSS files are not bundled yet.

Debugger Tools

So we need to enable it.

Step 6. We can enable this using the following:

  • Set the debug attribute to false in the Web.Config file as shown in the code below: 
    <compilation debug="false" targetFramework="4.5" /> 
  • Alternatively add a BundleConfig class in the App_Start folder and add the following code: 
    using System.Web.Optimization;
namespace SampleWebApp.App_Start
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            BundleTable.EnableOptimizations = true;
        }
    }
}
  • Update the Global.asax file with the highlighted code below: 
    protected void Application_Start(object sender, EventArgs e)
{
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

Step 7. Now in the F12 tools you can see that the references are bundled.

Updated Debugger Tools

Using ScriptManager Control

By using the WebOptimization feature, this ScriptManager Control makes it simple to register, manager and combine scripts. It is easy to integrate with bootstrap and jQuery. Use the following procedure to do that.

Step 1. Open the Package Manager Console and enter the following commands:

Install-Package Microsoft.AspNet.ScriptManager.jQuery

Install-Package Microsoft.AspNet.ScriptManager.bootstrap

Step 2. Update the following references used in the Site.Master:

<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.js"></script>

Update the preceding references in the body part with the ScriptManager control such as shown below:

<form id="form1" runat="server">
<asp:ScriptManager runat="server">
    <Scripts>
        <asp:ScriptReference Name="jquery" />
        <asp:ScriptReference Name="bootstrap" />
    </Scripts>
</asp:ScriptManager> 

Step 3. We can serve the scripts from the application script folder rather then using it from System.web. Now we remap the framework scripts. Install the following packages:

Install-Package Microsoft.AspNet.ScriptManager.MSAjax

Install-Package Microsoft.AspNet.ScriptManager.WebForms

Step 4. Update the BundleConfig.cs file with the highlighted code below:

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
                    "~/Scripts/WebForms/WebForms.js",
                    "~/Scripts/WebForms/WebUIValidation.js",
                    "~/Scripts/WebForms/MenuStandards.js",
                    "~/Scripts/WebForms/Focus.js",
                    "~/Scripts/WebForms/GridView.js",
                    "~/Scripts/WebForms/DetailsView.js",
                    "~/Scripts/WebForms/TreeView.js",
                    "~/Scripts/WebForms/WebParts.js"));
    // Order is very important for these files to work, they have explicit dependencies
    bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
            "~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
            "~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
            "~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
            "~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));
    BundleTable.EnableOptimizations = true;
} 

And update the reference in the Site.Master:

<asp:ScriptManager runat="server">
    <Scripts>
        <asp:ScriptReference Name="jquery" />
        <asp:ScriptReference Name="bootstrap" />
        <asp:ScriptReference Name="MsAjaxBundle" />       <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
        <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
        <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
        <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
        <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
        <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
        <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
        <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
        <asp:ScriptReference Name="WebFormsBundle" />
    </Scripts>
</asp:ScriptManager> 

Adding Modernizr for HTML and CSS Features

It is the JavaScript library for feature detection of HTML5/CSS3.

Step 1. Install the following package:

Install-Package Modernizr

Step 2. Update the BundleConfig.cs file with the highlighted code below:

bundles.Add(new ScriptBundle("~/Scripts/modernizr-2.7.1js").Include(
    "~/Scripts/modernizr-2.7.1.js"));
BundleTable.EnableOptimizations = true; 

And update the Head in the Site.Master page:

<title><%: Page.Title %>My Sample Application</title>
    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr-2.7.1") %>
    </asp:PlaceHolder>

Summary

You have now developed a Web Forms application with No Authentication using various NuGet Packages and ASP.NET features in the Empty Web application. You can use and add various technologies in the application leveraging it using ASP.NET. Thanks for reading.


Similar Articles