Understand View Scaffolding Template in Asp.Net MVC 4 with CRUD Operations Example

  Total Views : 1751
  Comments : 0
 
  Keywords : What is scaffolding in asp.net mvc?, Asp.net mvc view scaffolding template example, Perform curd operations using scaffolding template in asp.net mvc, Scaffolding in asp.net mvc with example

Here we will learn how to use view scaffold templates in asp.net mvc. Before understanding view scaffolding templates in asp.net mvc we will learn what is scaffold in asp.net mvc and how we can use it in our asp.net mvc applications.

 

Scaffolding is technique used in asp.net mvc to generate basic CRUD operations (Create, Delete, Details, Edit and List) from Model but it is basic code from that we need to edit and customize code according to our requirement. 

Create Application in Asp.Net MVC

Now let’s create a basic ASP.NET MVC 4 application to understand View scaffolding Template for that Open visual studio studio à Go to File à Select New à Select Project

 

create new asp.net mvc project from visual studio 2012

 

After that you will see new dialog will pop up for selecting your Template and Project type. From Templates select Visual C# à inside that select Web and then project type select ASP.NET MVC 4 Web Application and here we are giving name as “MVCDemo” then finally click on OK button.

 

Now new dialog will pop up for selecting template in that Select Basic Template and click ok it will create our MVCDemo project that will be like as shown below

 

scaffolding project structure in asp.net mvc

 

After completion of creating application now it’s time to create database. For showing demo we already created a Database with name EmployeeDB and table with name EmployeeDetails like as shown below

 

EmployeeDB Database

 

EmployeeDB Database in asp.net mvc application for database approach in entity framework

 

EmployeeDetails Table

 

Employee Details Table in Database First Approach in EF

Installing Entity framework

For adding Entity framework just right click on your application and from above list select “Manage NuGet Packages” like as shown below 

 

add manage nuget package in asp.net mvc application to install ado.net entity framework

 

After select a new dialog will popup of “Manage NuGet Packages” inside search box enter “Entityframework”. After getting search value select Entityframework click on install button.

 

Installing Entity Framework in Asp.net mvc application

 

After adding it will show an ok sign in green color like as shown below

 

Installed Entity Framework in asp.net mvc web application

 

After adding Entity framework now we are going to add ADO.NET Entity Data Model

Adding ADO.NET Entity Data Model

For adding ADO.NET Entity Data Model just right click on Model folder and select Add inside that Select ADO.NET Entity Data Model

 

Add ado.net entity data model in asp.net mvc application

 

After clicking on ADO.NET Entity Data Model a New Dialog will pop up for entering Item name inside that you can enter any name but it must be unique and click on OK button like as shown below

 

Giving Name to Ado.net model in mvc application

 

After that a new Wizard will popup like as shown below

 

Choose Model Content for Ado.net model in database first approach

 

From that select Generate from database and click on Next button. After clicking on Next button a New Wizard will pop up for Choosing Data Connection.

Choosing Data Connection

Choosing New Database Connection in Database First Approach in Asp.net mvc

 

Now click on New Connection a new Dialog will popup. Here we need to configure it. In Server name you need to add your Sql Server Name and select either Using Windows Authentication or Using Sql Server Authentication to connect SQL Server. Here we selected Using Sql Server Authentication and entered User name and Password of Sql server. Last we are going to select Database Name EmployeeDB once we done click on OK button as shown below

 

Configure Database Connection in Database First Approach in Asp.Net MVC Applicaiton

 

After adding database connection our Entity Data Model Wizard will look like below snapshot

 

Entity Data Model Wizard with Database conneciton in asp.net mvc application

 

Now click on Next button. A new wizard will pop up for selecting database object and in this you will see all the table which we have created in database

 

Choose Table Database in Database first approach in asp.net mvc application

 

And last click on Finish button. Here is snapshot after adding ADO.NET Entity Data Model

 

After adding ado.net entity data model in asp.net mvc application

Adding Controller in Application

Now we will add controller in our application for that Just Right click on Controller Folder inside that select Add and then select Controller. After clicking on Controller new dialog will pop up with name Add Controller in that mention controller name "Default1Controller" and select template as Empty MVC Controller and click Add like as shown

 

Adding new controller in asp.net mvc database first application

 

Now we created one simple controller "Default1Controller" and it will contain code like as shown below

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace MVCDemo.Controllers

{

public class Default1Controller : Controller

{

[HttpGet]

public ActionResult Create()

{

return View();

}

}

}

 Now let’s Add View to this controller and while adding understand all properties of scaffolding.

Adding View (Create)

We are going to Create Various type of View

 

  1. Create
  2. Edit /Update
  3. List
  4. Details

For adding View just Right click inside DefaultController Create Action Method and select Add View a new wizard will popup with Name Add view. The View name will be your Action Method Name inside which we have just right for adding View. If you want to change name of view then you need to return view of that Name (return View("Create"); ) else you need to change your Action Method Name. Now we will select required options in popup like view engine, scaffold templates while selecting view engine we have two view engines available those are

 

  1. Razor view engine 
  2. ASPX view engine

In view engine we can select either razor or ASPX view engine that will be used for generating view. After generating view we are not locked with selected view engine we can change that any time but for simplicity we will prefer to use Razor syntax

 

After completion of selecting View engine now let’s move towards selecting Model Class for creating strongly type View. In that select EmployeeDetail (MVCDemo.Models) in case If you are not getting model in Model class dropdownlist then just rebuild your application then it will be available to you.

 

After completion of Model Class selection now we will select required template in Scaffold template here we have to choose a Template (Create, Details, Delete, Edit and List) according to our selection it will analyze and generate form for us. If we select Create then it will generate a Create Form for us according to our Model selected like as shown below

 

mention view name and model in add view template

 

Finally we have option to make our View as a partial view by checking Create as a partial view option when we check this option the layout or Master page will get disabled. If you don’t want to select this Create as a partial view option then you can leave it unchecked. 

 

Last thing if we want Master page (layout) for your View then check Use a layout or Master page option and we can also browse master page whatever we want to set it for our view else leave this option unchecked and finally just click on Add button to generate view according to our configuration. 

 

Following is the code snippet of Create.cshtml View which is generated

 

@model MVCDemo.Models.EmployeeDetail

@{

ViewBag.Title = "Create";

}

<h2>Create</h2>

@using (Html.BeginForm()) {

@Html.ValidationSummary(true)

<fieldset>

<legend>EmployeeDetail</legend>

<div class="editor-label">

@Html.LabelFor(model => model.EmpID)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.EmpID)

@Html.ValidationMessageFor(model => model.EmpID)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Name)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.Name)

@Html.ValidationMessageFor(model => model.Name)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Address)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.Address)

@Html.ValidationMessageFor(model => model.Address)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Age)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.Age)

@Html.ValidationMessageFor(model => model.Age)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Salary)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.Salary)

@Html.ValidationMessageFor(model => model.Salary)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.worktype)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.worktype)

@Html.ValidationMessageFor(model => model.worktype)

</div>

<p>

<input type="submit" value="Create"/>

</p>

</fieldset>

}

<div>

@Html.ActionLink("Back to List", "Index")

</div>

@section Scripts {

@Scripts.Render("~/bundles/jqueryval")

}

This is code is automatically generated by visual studio for our configuration. It’s really make development easy and fast now just run your application and access your View which we have created.

 

create view output in view scaffold template in asp.net mvc application

 

After completing with Create View now let's create another View (List View) to show record details

Adding View (List View)

Before adding view we need to add Action Method with Name ListOfEmployee in our controller like as shown below 

 

public ActionResult ListOfEmployee ()

{

return View();

}

For adding view just Right click inside DefaultController ListOfEmployee Action Method and select Add View a new wizard will popup with Name Add view.

 

select list from scaffold template in asp.net mvc application

 

 If you observe above view we selected Scaffold template List remaining all options are same we are not going to change Model class (EmployeeDetail) because we need to perform operation on EmployeeDetail Model only and finally just click on Add button to generate view according to our configuration.  After adding your ListOfEmployee view will be created.

 

Following is the code snippet of ListOfEmployee.cshtml view which is generated

 

@model IEnumerable<MVCDemo.Models.EmployeeDetail>

@{

ViewBag.Title = "ListOfEmployee";

}

<h2>ListOfEmployee</h2>

<p>

@Html.ActionLink("Create New", "Create")

</p>

<table>

<tr>

<th>

@Html.DisplayNameFor(model => model.EmpID)

</th>

<th>

@Html.DisplayNameFor(model => model.Name)

</th>

<th>

@Html.DisplayNameFor(model => model.Address)

</th>

<th>

@Html.DisplayNameFor(model => model.Age)

</th>

<th>

@Html.DisplayNameFor(model => model.Salary)

</th>

<th>

@Html.DisplayNameFor(model => model.worktype)

</th>

<th></th>

</tr>

@foreach (var item in Model) {

<tr>

<td>

@Html.DisplayFor(modelItem => item.EmpID)

</td>

<td>

@Html.DisplayFor(modelItem => item.Name)

</td>

<td>

@Html.DisplayFor(modelItem => item.Address)

</td>

<td>

@Html.DisplayFor(modelItem => item.Age)

</td>

<td>

@Html.DisplayFor(modelItem => item.Salary)

</td>

<td>

@Html.DisplayFor(modelItem => item.worktype)

</td>

<td>

@Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |

@Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |

@Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })

</td>

</tr>

}

</table>

In same way you can create all view which you required. It’s not mandatory to go through this process but by using this Feature you we can save time of development. Now run our listofemployee view that will be like as shown below 

 

List of employee details output in asp.net mvc application

Finally we completed understanding view scaffolding templates in asp.net mvc applicaiton 

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User