Getting Started With Web Forms Scaffolding in ASP.Net

Nimit Joshi

5y71.8k8100Article

ASP.NET Visual Studio 2013Scaffolding in ASP.NETWeb Forms Scaffolding in ASP.NET

8 Comments

Join the conversation! Your thoughts help the community grow.

Software Engineer10y ago
Does this scenario "Web Forms Scaffolding in ASP.Net" work in Visual Stdio 2012?
- Nimit Joshi10y ago
  Software Engineer I am not sure about this. You can check out this option in VS 2012.
Alejandro Villagomez11y ago
How can i change the default message "Select an Option" from DropDownList Scaffolded Item?
- Nimit Joshi10y ago
  Alejandro Villagomez You have to do it manually by adding list item.
Tom Lavin11y ago
Thanks for a really great article. What about if you had hundreds of Cricketers in your database? Is there a way to add a search box to find a particular one and then edit or delete? Thanks
- Nimit Joshi11y ago
  Well we can use the filter functionality in the program. It depends on the condition . You can follow http://www.c-sharpcorner.com/UploadFile/4b0136/perform-paging-searching-sorting-in-Asp-Net-mvc-5/ this link to use filter. Thanks
Terry11y ago
Thanks alot, Nimit. This article helped me a lot to sort out the puzzle I was in and helped me add Model & its views in my Asp.Net WebForm application. This part went successful. After this I created another model and using this DbContext that we had created in this article, performed Scaffolding. It did create the folder with all views, but the table isn't created in the database. Can you please help me with this part. I got to show this part tomorrow to client, so i would highly appreciate if you can help at the earliest. For code of the model & all is at : http://stackoverflow.com/questions/29059444/fail-to-create-data-table-while-scaffolding-in-other-dbcontext Please help me and guide me. I need to add other models also. Do I need to create different DbContext for each model or what is the problem !! Any help is highly appreciated. Thanks.
- Nimit Joshi11y ago
  Would you please check out your connection string. The connection string is the way to save your data in the database. Show me your con string.

Introduction

There are various types of Project Templates available in Visual Studio 2013 to create ASP.NET Web Applications. 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 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 Application 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

Create Web Application in VS 2013

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

One ASP.Net Wizard in VS 2013

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:

Add Scaffold Wizard

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

Downloading Web Forms Scaffolding

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.

Adding Models in WebForms App

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

Adding 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.

Web Forms Scaffolding using EF

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

Adding Web Forms Pages

Step 8: Click on Add.

Scaffolding

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.

Solution Explorer in Web Forms

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.

Web Forms Home Page

Now, we'll perform the CRUD Operations.

Create

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

Creating Records in Web Forms

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

Creating New Records in Web Forms

Step 5: Create more records.

Read

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

Controller Home Page

Update

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

Edit Record in Web Forms

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

Updating Record in Web Forms

Delete

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

Delete Record in Web Forms

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

Deleting Record in Web Forms

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.

Validations in Web Forms

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.

Show Table Data in Web Forms

You can see the table.

Table Record in Web Forms

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.