Saturday, June 29, 2013

Scaffolding for Webforms

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

With VS.Net 2013 we will have scaffold template included for web forms.  By scaffold template you can generate a boilerplate code for 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 web forms to generate CRUD operations.

Step 1: 
Download VS.Net 2013 Express Preview

Step 2:
Create 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
        public int ID { get; set; }

        public string ProductName { get; set; }
        public string Description { get; set; }
        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 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 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...

No comments:

Most Recent Post

Subscribe Blog via Email

Enter your email address:

Disclaimers:We have tried hard to provide accurate information, as a user, you agree that you bear sole responsibility for your own decisions to use any programs, documents, source code, tips, articles or any other information provided on this Blog.
Page copy protected against web site content infringement by Copyscape