Customizing Autogenerated view in entityFramework in Asp.Net MVC

In previous tutorial we learn CURD operation using EntityFramework in Asp.net MVC. When we work with entityFramework it create Views(For creation,insert,delete,update) automatically , So the output of the application is

Changes in Index View

Suppose when we get output where Header name is common for two fields then we need to change their header name for recognize ,Here if we change StudentName as “Name” then StudentName and DepartmentName has same header name as “Name then we need to customization in index view. These header name same as database table column name .

Means o/p is like below

So here i want to change the Header “student Name” instead of “Name”

Step(1):- How header generate

When we create a application using entityFramework we add a EntityDataModal then we gives connection and select tables that time it create a class in modal (Designer class).

When we go to this class we see that it’s a partial class, And this is a auto generated class .This contain all the properties (In region “#region Primitive Properties) , These properties name matches with the Table column Name.

Step(2):- How to change Header name

We can change this header name either change column name in database table or change the properties name in Student class which is auto generated class.

If we change in auto generated student class is not good because due this we can loss all the changes , So we have to customization in different class.

This auto generated class is a partial class so we can create a another student partial class and we can make changes there.

So in modal folder add a class and give the name as “Student.cs” and write the following code in this class

[MetadataType(typeof(StudentMetaData))] public partial class Student { } public class StudentMetaData {     [Display(Name="Student Name")]     public string Name { get; set; } } This display attribute present in “"System.ComponentModel.DataAnnotations" namespace

When we run this application it will generate a Header name As “StudentName” instead of Name.

Changes in Edit View

When we run this application and click on edit link then we see that “Gender” is not in dropdown and Department does not have default text.

Go to the create view and replace following code

@Html.DropDownList("DepartmentId", String.Empty) WITH @Html.DropDownList("DepartmentId", "Select Department")  For Gender @Html.EditorFor(model => model.Gender) WITH @Html.DropDownList("Gender", new List<SelectListItem>     {     new SelectListItem { Text = "Male", Value="Male" },     new SelectListItem { Text = "Female", Value="Female" }     }, "Select Gender")

For making Name as read only make following changes

@Html.EditorFor(model => model.Name) TO @Html.DisplayFor(model => model.Name) @Html.HiddenFor(model => model.Name)

Changes in create View

Here any field is not require in create means if we click on create button it save NULL in database for all fields that is wrong, So for that we need to make require field using  [Required] attribute that present in “using System.ComponentModel.DataAnnotations;” namespace.

So lets make changes in Student class which we create as partial class

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.ComponentModel.DataAnnotations; namespace CUROperationUsingEF.models {     [MetadataType(typeof(StudentMetaData))]     public partial class Student     {     }     public class StudentMetaData     {         [Required]         public string Name { get; set; }         [Required]         public string Gender { get; set; }         [Required]         public string City { get; set; }         [Required]         [Display(Name="Department")]         public int DepartmentId { get; set; }     } }

Replace the following code in Create view also

@Html.DropDownList("DepartmentId", String.Empty) WITH @Html.DropDownList("DepartmentId", "Select Department")  For Gender @Html.EditorFor(model => model.Gender) WITH @Html.DropDownList("Gender", new List<SelectListItem>     {     new SelectListItem { Text = "Male", Value="Male" },     new SelectListItem { Text = "Female", Value="Female" }     }, "Select Gender")

Now Run your application and click on create button and see the result.

CRUD Operation in Asp.Net MVC using Entity Framework

Here we will learn CURD Operation in Asp.net MVC Using Entity Framework.

For More Detail About Entity Framework Go to EntityFramework Tutorials.

1.   First Go to Sql Server and Execute following query for Student Department and Student Information.

Create table stdDepartment (  Id int primary key identity,  Name nvarchar(50) ) Insert into stdDepartment values('Teacher') Insert into stdDepartment values('HOD') Insert into stdDepartment values('Professor') Create Table Student (      StudentID int identity primary key,      StudentName nvarchar(50),      Gender nvarchar(50),      SchoolName nvarchar(50) ) Alter table Student add DepartmentId int Alter table Student add foreign key (DepartmentId) references stdDepartment(Id) Insert into Student values ('Munesh','Male','VIT',1) Insert into Student values ('Rahul','Male','ABC',2) Insert into Student values ('Reet','Female','XYZ',2) Insert into Student values ('Anshuman','Male','PQR',3) Insert into Student values ('Simi','Female','NIT',3) Insert into Student values ('Nency','Female','MIT',2) Insert into Student values ('XYZ','Male','PQR',1)

Go to Visual stdio -> NewProjct -> Select MVC4 Web Application (give application name) -> select Empty website with Rezor.

2.   Now Install Entity Framework to your application For this Go here.

3.   After Installing Entity Framework Add “Ado.Net Entity DataModal” by right click on “Modals”, And Give the name for this as “StudentDataModal”.

4.   When You will click Add button here you will see another window for  “EntityData modal Wizard” from there you select “Generate From DataBase”, And Click Next

5.   In This window you give you database connection and select your database ,

After click, on Continue Button Below screen will show there you will database connection and Test your connection and click OK

Then Click Next

6.   In this screen select your Database Tables and give Modal Name then click FINISH Button

7.   When you will click on finish button it will create StudentDepartment and Student Entity, change their  name also

8.   Right Click on Controller and add a controller and give details in controller like below

After that click on Add

9.   When you will click on add it will create View automatically , You can see in View folder

10.                At this time if we run our application it will error that “Resource cannot found” this is because in RouteConfig file the default controller name is “Home “ controller , so change this controller name as “Student” controller and run application.

Delete the following Script from “Create.csHtml and “Detail.csHtml” View

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

Now run your application and see the output and perform all the operations.