Getting Started With Web Forms Scaffolding in ASP.Net

Introduction

There are various types of Project Templates available in the Visual Studio 2013 to create ASP.NET Web Applicaitons. We can select MVC, Web Forms and Web API and so on as a project template to create the web application in Visual Studio 2013.

We can use Scaffolding in project templates such as in MVC, Web Forms and there are generally two types of scaffolding available in these project templates, given below:

• MVC Scaffolding
• Web API Scaffolding

In this article, we'll learn about the Web Forms Scaffolding. We'll also learn how to perform the Create, Read, Update and Delete (CRUD) Operations in the Web Forms application using the Web Forms Scaffolding.

Overview

We can scaffold the Model class in the Web Forms application with the use of Web Forms Scaffolding. It generates automatically views for the Insert, Default (Read), Edit and Delete Views in the application. This support is added in the Web Forms application with which we can scaffold a model and it'll generate Web Forms pages for inserting, editing, reading and deleting the model.

Prerequisites

Before beginning, you need to use Visual Studio 2013 to create the ASP.NET Web Forms Application.

Getting Started

So, now let's create the Web Forms application in Visual Studio 2013 using the following procedure:

• Creating Web Forms application
• Web Forms Scaffolding
• Working with Web Forms application
• Running application and Performing CRUD Operations
• Data Context in Server Explorer

Creating Web Forms Application

In this section, we'll create the ASP.NET Web Forms Applicaiton in Visual Studio 2013 using the following procedure.

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

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

Step 3: Select the Web Forms Project Template from the "One ASP.NET" wizard.

Visual Studio automatically creates the ASP.NET Web Forms Application and adds some files and folders to the application.

Web Forms Scaffolding

As I said earlier, there are generally MVC and Web API Scaffolding available for Scaffolding in the application. Have a look:

As you can see above that, the Web Forms Scaffolding is not available for scaffolding. So, now we need to install it in the application. Use the following procedure:.

Step 1: Go to Tools-> Extensions and Updates

Step 2: Search for the Web Forms Scaffolding and download it

Working with Web Forms Application

After installing the Web Forms Scaffolding, now we'll create the model for the application. Use the following procedure.

Step 1: In the Solution Explorer, right-click on the Models folder and add a class.

Step 2: Enter the name of class and replace the code with the following code:

using System.ComponentModel.DataAnnotations;

using System.Data.Entity;

 

namespace WebFormsScaffoldingApp.Models

{

    public class Cricketer

    {

        public enum Category

        {

            A,

            B,

            C,

            D

        }

 

        public int ID { get; set; }

        [Required(ErrorMessage="Name is Required")]

        public string Name { get; set; }

        [Required(ErrorMessage = "Full Name is Required")]

        [Display(Name="Full Name")]

        public string FullName { get; set; }

        [Required(ErrorMessage = "Age is Required")]

        public int Age { get; set; }

        [Required(ErrorMessage = "Team is Required")]

        public string Team { get; set; }

        [Required(ErrorMessage = "Grade is Required")]

        public Category Grade { get; set; }

    }

 

    public class CricketerDbContext : DbContext

    {

        public DbSet<Cricketer> Cricketers { get; set; }

    }

}

In the code above, a class named Cricketer is created and some properties are defined and a enum type Category is created with 4 values in it. A second class named CricketerDbContext is created for the Data Context class of the application.

Step 3: Add the following highlighted connection string in the Web.Config file:

<add name="CricketerDbContext" connectionString="Data Source=(LocalDb)\v11.0;AttachDbFilename=
|DataDirectory|\CricketerApp.mdf;Initial Catalog=CricketerApp;
Integrated Security=True"

      providerName="System.Data.SqlClient" />

  </connectionStrings>

In the code above, a new connection string is defined for the data context class named CricketerDbContext. Please note that the class named and connection string name need to be the same.

Step 4: Build the Solution.

Step 5: In the Solution Explorer, right-click on the application and go to Add then click on New Scaffolded item

Step 6: Select the Web Forms in the next Add Scaffold wizard from the left pane and select the Web Forms Pages using Entity Framework and click on Add.

Step 7: Select the Model class, Data Context class in the next Add Web Forms Pages wizard.

Step 8: Click on Add.

The Web Forms Scaffolder generates the Cricketers folder in the application and web forms pages for inserting, reading, deleting and editing. The Web Forms Scaffolder also creates a DynamicData folder that contains Entity and Field templates.

Running Application and Perform CRUD Operations

In this section we'll run the application and perform the CRUD operations. So, let's begin with the procedure given below.

Step 1: Open the Site.Master file and update it with the following highlighted code:

<title><%: Page.Title %> - Cricketer Application</title>

 

<a class="navbar-brand" runat="server" href="~/">Cricketer Application</a>

</div>

 

<div class="navbar-collapse collapse">

    <ul class="nav navbar-nav">

        <li><a runat="server" href="~/">Home</a></li>

        <li><a runat="server" href="~/About">About</a></li>

        <li><a runat="server" href="~/Cricketer/Default.aspx">Cricketer</a></li>

        <li><a runat="server" href="~/Contact">Contact</a></li>

    </ul>

 

<footer>

    <p>© <%: DateTime.Now.Year %> - My Cricketer App</p>

</footer>

Step 2: Now run the application and click on Cricketer.

Now, we'll perform the CRUD Operations.

Create

Step 3: Click on the Create New on the next page.

Step 4: Enter the record and click on the Insert button.

Step 5: Create more records.

Read

Step 6: You can read the total records in the main Default page.

Update

Step 7: Click on the Edit link to update the record.

Step 8: Now edit the value and click on Update.

Delete

Step 9: To delete the record, simply click on the Delete link.

Step 10: Click on Delete if you are sure you want to delete the record.

Since we also applied the Data Annotations in the Model class, if any user does not insert the required record then the error message is displayed in the screen.

Data Context in Server Explorer

We can also check out the table data in the Server Explorer in the application. Check out the steps below.

Step 1: Open Server Explorer and after expanding the Data Context, select the table and right-click to open the record.

You can see the table.

That's it.

Summary

This article described the working process and use of Web Forms Scaffolding in the ASP.NET Web Applications in Visual Studio 2013. You need to install it to use it on the solution. Thanks for reading the article and Stay Updated.