Views in 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

Add Comment