- Read more : How to Create ASP.NET Core 3.1 MVC Applications
- The code bundle for the tutorial is also hosted on GitHub at the following repository: https://github.com/devtutorialio/ASP.NET-Core-MVC
Step 1 : Start Visual Studio 2019, open the EmployeeManager project, create a new folders called Views, and then create two subfolders called Shared and EmployeeManager in the Views folder:
Step 2 :Right-click the Shared folder and open the Add New Item dialog. Add a Razor View Start file in the Views folder
Step 3 :Right-click the Shared folder and open the Add New Item dialog. Add a Razor View Imports file in the Views folder
Step 4 :Then write this to the _ViewImports.cshtml file:
@using EmployeeManager
@using EmployeeManager.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Step 5 : Right-click on the Views/Shared folder, select Add | New Item, enter Layout in the search box, select Razor Layout, and then click on Add:
Step 6 : Next, write this to the _Layout file.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Employee Manager</title>
</head>
<body>
<h1>Employee Manager</h1>
<hr />
<div>
@RenderBody()
</div>
<hr />
</body>
</html>
Step 7 : Displaying a List of Employees
Then right-click the EmployeeManager folder and open the Add New Item dialog. Add a Razor View file named List.cshtml
Update this file with the following content:
@model List<Employee>
<h2>List of Employees</h2>
<a asp-controller="EmployeeManager"
asp-action="Insert">Insert</a>
<br />
<br />
<table border="1">
<tr>
<th>Employee ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Title</th>
<th colspan="2">Actions</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>@item.EmployeeID</td>
<td>@item.FirstName</td>
<td>@item.LastName</td>
<td>@item.Title</td>
<td>
<a asp-controller="EmployeeManager"
asp-action="Update"
asp-route-id="@item.EmployeeID">Update</a>
</td>
<td>
<a asp-controller="EmployeeManager"
asp-action="Delete"
asp-route-id="@item.EmployeeID">Delete</a>
</td>
</tr>
}
</table>
Step 8 : Insert a New Employee. Open the Add New Item dialog by right-clicking the Views > EmployeeManager folder and add another Razor View named Insert.cshtml. Update this file with the following content:
@model Employee
<h2>Insert New Employee</h2>
<form asp-controller="EmployeeManager" asp-action="Insert" method="post">
<table border="0">
<tr>
<td>
<label asp-for="FirstName"></label> :
</td>
<td>
<input type="text" asp-for="FirstName" />
<span asp-validation-for="FirstName"></span>
</td>
</tr>
<tr>
<td class="right">
<label asp-for="LastName"></label> :
</td>
<td>
<input type="text" asp-for="LastName" />
<span asp-validation-for="LastName"></span>
</td>
</tr>
<tr>
<td class="right">
<label asp-for="Title"></label> :
</td>
<td>
<input type="text" asp-for="Title" />
<span asp-validation-for="Title"></span>
</td>
</tr>
<tr>
<td class="right">
<label asp-for="BirthDate"></label> :
</td>
<td>
<input type="date" asp-for="BirthDate" />
<span asp-validation-for="BirthDate"></span>
</td>
</tr>
<tr>
<td class="right">
<label asp-for="HireDate"></label> :
</td>
<td>
<input type="date" asp-for="HireDate" />
<span asp-validation-for="HireDate"></span>
</td>
</tr>
<tr>
<td class="right">
<label asp-for="Country"></label> :
</td>
<td>
<select asp-for="Country" asp-items="@ViewBag.Countries">
<option value="">Please select</option>
</select>
<span asp-validation-for="Country"></span>
</td>
</tr>
<tr>
<td class="right">
<label asp-for="Notes"></label> :
</td>
<td>
<textarea asp-for="Notes" rows="5" cols="40"></textarea>
<span asp-validation-for="Notes"></span>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">Save</button>
</td>
</tr>
</table>
</form>
<br />
<br />
<a asp-controller="EmployeeManager" asp-action="List">Back to Employee Listing</a>Step 9 : Insert a New Employee. Open the Add New Item dialog by right-clicking the Views > EmployeeManager folder and add another Razor View named Update.cshtml. Update this file with the following content:
@model Employee
<h2>Update Existing Employee</h2>
<h3>@ViewBag.Message</h3>
<form asp-controller="EmployeeManager" asp-action="Update" method="post">
<table border="0">
<tr>
<td>
<label asp-for="EmployeeID"></label> :
</td>
<td>
<input type="hidden" asp-for="EmployeeID" />
<span>@Model.EmployeeID</span>
</td>
</tr>
<tr>
<td>
<label asp-for="FirstName"></label> :
</td>
<td>
<input type="text" asp-for="FirstName" />
<span asp-validation-for="FirstName"></span>
</td>
</tr>
<tr>
<td>
<label asp-for="LastName"></label> :
</td>
<td>
<input type="text" asp-for="LastName" />
<span asp-validation-for="LastName"></span>
</td>
</tr>
<tr>
<td>
<label asp-for="Title"></label> :
</td>
<td>
<input type="text" asp-for="Title" />
<span asp-validation-for="Title"></span>
</td>
</tr>
<tr>
<td>
<label asp-for="BirthDate"></label> :
</td>
<td>
<input type="date" asp-for="BirthDate" />
<span asp-validation-for="BirthDate"></span>
</td>
</tr>
<tr>
<td>
<label asp-for="HireDate"></label> :
</td>
<td>
<input type="date" asp-for="HireDate" />
<span asp-validation-for="HireDate"></span>
</td>
</tr>
<tr>
<td>
<label asp-for="Country"></label> :
</td>
<td>
<select asp-for="Country" asp-items="@ViewBag.Countries"></select>
<span asp-validation-for="Country"></span>
</td>
</tr>
<tr>
<td>
<label asp-for="Notes"></label> :
</td>
<td>
<textarea asp-for="Notes" rows="5" cols="40"></textarea>
<span asp-validation-for="Notes"></span>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">Save</button>
</td>
</tr>
</table>
</form>
<br /><br />
<a asp-controller="EmployeeManager" asp-action="List">Back to Employee Listing</a>
Step 10 : Now, add Delete.cshtml in the Views > EmployeeManager folder
@model Employee
<h2>Delete Existing Employee</h2>
<h3>
Warning : You are about to delete an employee record.
</h3>
<form asp-controller="EmployeeManager" asp-action="Delete" method="post">
<input type="hidden" asp-for="EmployeeID" />
<table border="0">
<tr>
<td>
<label asp-for="EmployeeID"></label> :
</td>
<td>
@Model.EmployeeID
</td>
</tr>
<tr>
<td>
<label asp-for="FirstName"></label> :
</td>
<td>
@Model.FirstName
</td>
</tr>
<tr>
<td>
<label asp-for="LastName"></label> :
</td>
<td>
@Model.LastName
</td>
</tr>
<tr>
<td>
<label asp-for="Title"></label> :
</td>
<td>
@Model.Title
</td>
</tr>
<tr>
<td>
<label asp-for="BirthDate"></label> :
</td>
<td>
@Model.BirthDate.ToString("dd MMMM yyyy")
</td>
</tr>
<tr>
<td>
<label asp-for="HireDate"></label> :
</td>
<td>
@Model.HireDate.ToString("dd MMMM yyyy")
</td>
</tr>
<tr>
<td>
<label asp-for="Country"></label> :
</td>
<td>
@Model.Country
</td>
</tr>
<tr>
<td>
<label asp-for="Notes"></label> :
</td>
<td>
@Model.Notes
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">Delete</button>
</td>
</tr>
</table>
</form>
<br /><br />
<a asp-controller="EmployeeManager" asp-action="List">Back to Employee Listing</a>
Step 11 : Start your application by pressing F5 or clicking on Debug > Start Debugging.
Displaying a list of employees
Inserting a new employee
Updating an existing employee
Delete an Existing Employee
