Scaffolding for Asp.net Webforms

Those who knows asp.net mvc, might already knows the power of scaffolding...

With VS.Net 2013 we will have scaffold template included for asp.net web forms.  By scaffold template you can generate a boilerplate code for asp.net web forms in a min.

The Web Forms scaffold generator can automatically build Create-Read-Update-Delete (CRUD) views based on a model.

Step by Step example of using scaffold template inside asp.net web forms to generate CRUD operations.

Step 1: 
Download VS.Net 2013 Express Preview

Step 2:
Create Asp.net WebForm Project

Step 3:
Add Model Class and named it as "Product.cs"  (Right click Model class and Add new class)

Step 4:

Create POCO Class with following content in it.  Yes you can take advantage of DataAnnotations of Entity framework.

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.Linq;

using System.Web;

namespace WebApplication3.Models

{

    public class Product

    {

        [ScaffoldColumn(false)]

        public int ID { get; set; }

        [StringLength(25)]   

        public string ProductName { get; set; }

        public string Description { get; set; }

        

        [DataType(DataType.Currency)]

        public int Price { get; set; }        

    }

}

In above code 

• [ScaffoldColumn(false)] will not generate any presentation code for that field
• [StringLenght(25)] will limit product name upto 25 characters only.
• [DataType(DataType.Currency)] will limit to enter only proper currency value.

Step 5:

Build your application.  (Cntrl + Shift + B)

Step 6: 

Now its time to use scaffold template to generate code for CRUD operations in asp.net web forms.
Right click on model class and add scaffold for Product class.

Step 7:
Click on Add button as shown in figure to "Generates Asp.net Web Forms pages for read/write operations based on a given data model."

Step 8:
Select Model class as "Product.cs", Since we haven't created or have any data context class, select "Add new data context" and Click on "Add" button.

Step 9:
If you wish you can change name of your data context class.  For this demo purpose I am keeping everything to default generated by VS.Net.  Press "OK" button.

Step 10:
You will noticed that VS.Net 2013 has generated new data context file inside model folder and has also created CRUD operations for Product class.

Step 11:
Run the application and enjoy the boilerplate code...  You will also noticed that web forms project has extension-less url and also has responsive design using Twitter bootstrap out of the box...

Type the url: /Product  notice it is extension-less url and

Click on "Create new" link and create new product

Data Entry few product.  Notice fancy validation on entering wrong values.  "Everything is out of box, you don't need to write a single line of code to make this working... Isn't that cool"

Product Listing

Similarly you can edit record, delete record...

Hope you enjoyed this post...