Best resource for Online free Education
In this article, I am going to discuss customizing the auto-generated index and create views in the ASP.NET MVC application. Please read our previous article before proceeding to this article as this article is a continuation part of our previous article. In our previous article, we discussed the step-by-step procedure to perform CRUD operations using Entity Framework in ASP.NET MVC Application.
Customizing Index View:
Run the application and navigate to the index view which should display the data as shown below.
As shown in the above “Index†view, it is using “Name†as the column header for both employee and department name. This is because the “Name†column is used in both the database tables (Employee and Department) and the entity framework used these column names to generate the “Name†property in both Employee and Department classes that are auto-generated as shown below.
Employee.cs File
Department.cs File
Here, we need to change the department column header to “Department Name†instead of just “Name“. In order to do this add a class file with the name PDepartment.cs within the “Models†folder. Once you created the PDepartment.cs class file then simply copy and paste the following code in it.
With the above changes in place, run the application and notice the column name is displayed as Department Name. This is achieved by using the “Display†attribute that is present in the “System.ComponentModel.DataAnnotations†namespace.
If you are wondering why cant we apply the “Display†attribute directly to the auto-generated “Department†class instead of creating another partial “Department†and DepartmentMetaData class. We can do it. There is nothing stopping us from doing it but every time the Department class is auto-generated our custom changes will be lost. This is the reason for creating another partial class and applying our changes.
Customizing the auto-generated create view.
At the moment none of the fields on the “Create†view are required. That means when we click on the “Create†button without filling out any data NULL values are stored in all the columns of the Employee table.
How to make these fields on the “Create†view required?
Add [Required] attribute to the properties of the “Employee†class. The “Employee†class that is present in “EmployeeDataModel.Designer.cs†is auto-generated by the entity framework. There is no point in adding the [Required] attribute to this class as we will lose the changes if the class is auto-generated again.
To achieve this add a class file with the name PEmployee.cs within the “Models†folder. Once you created the PEmployee.cs class file, then simply copy and paste the following code into it.
At this point run the application and click on the “Create†button without filling out any data. Notice that we get validation error messages as expected as shown in the below image.
If you want “Select Department†as the first item in the “Department†dropdownlist on “Create†view then Replace the following code in the Create.cshtml view.
@Html.DropDownList(“DepartmentIdâ€,null , htmlAttributes: new { @class = “form-control†})
with
@Html.DropDownList(“DepartmentIdâ€,null , “Select Departmentâ€, htmlAttributes: new { @class = “form-control†})
Notice that a textbox is used for gender. It is an ideal situation to have a drop down list for gender rather than a textbox. To achieve this make the following changes to the “Create.cshtml†view. Replace the following code.
@Html.EditorFor(model => model.Gender, new { htmlAttributes = new { @class = “form-control†} })
with
@Html.DropDownList(“Genderâ€, new List<SelectListItem>
{
new SelectListItem { Text = “Maleâ€, Value=â€Male†},
new SelectListItem { Text = “Femaleâ€, Value=â€Female†}
}, “Select Genderâ€, new { @class = “form-control†})