Creating a Detail view and display data using EF Core

In the previous post we saw on how to create a List view using Asp.Net Core MVC and Entity Framework Core and display a list of users from the Users table in SQL Server database. In this post we will create a Details view which will display the user details of a specific user.

Remember we had a Details action link in the list this view will be linked to the Details link, on clicking the Details link against a user will trigger the Details action method in the controller which in turn will get the user details from the DB using Entity Framework Core and pass on the Model object to the View to render the user details in the browser.

        public async Task<IActionResult> Details(int? id)

        {

            if (id == null)

            {

                return NotFound();

            }

            var users = await _context.Users.FirstOrDefaultAsync(m => m.UserId == id);

            if (users == null)

            {

                return NotFound();

            }

            return View(users);

        }

Follow the below steps to create a List View template.

Right click on the Index method and select Add View
In Templates select Details
In Data context class select our EFCore DBContext – UserRegistrationContext
In Model class select Users
Click on Add, this will generate a new view file Details.cshtml

The view file Details.cshtml will get generated as follows

@model HelloMVC.Models.EFCoreModel.Users

@{

    ViewData["Title"] = "Details";

}

<h4>User - Details</h4>

<hr />

<div class="row">

    <div class="col-md-4"><label asp-for="FirstName" class="control-label"></label></div>

    <div class="col-md-4">@Model.FirstName</div>

</div>

<div class="row">

    <div class="col-md-4"><label asp-for="LastName" class="control-label"></label></div>

    <div class="col-md-4">@Model.LastName</div>

</div>

<div class="row">

    <div class="col-md-4"><label asp-for="Phone" class="control-label"></label></div>

    <div class="col-md-4">@Model.Phone</div>

</div>

<div class="row">

    <div class="col-md-4"><label asp-for="Email" class="control-label"></label></div>

    <div class="col-md-4">@Model.Email</div>

</div>

<div class="row">

    <div class="col-md-4"><label asp-for="Address" class="control-label"></label></div>

    <div class="col-md-4">@Model.Address</div>

</div>

<div>

    <a asp-action="Index">Back to List</a>

</div>

@section Scripts {

    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

}

Build and run the application, the List view will be rendered by default, click on the Details link of any of the user, the Details page will be displayed as follows with the user’s details.