Creating a List view and display data using EF Core

In the previous post we created an MVC Controller for our Asp.Net Core application using Entity Framework core. In this post we shall create a List view which will display the list of users in the database fetched using. Let us start by adding a view to our Index action method. Entity Framework Core

Visual studio has already added code in the Index action method of the controller to fetch the list of users using Entity Framework Core.

        public async Task<IActionResult> Index()

        {

            return View(await _context.Users.ToListAsync());

        }

Now we need to create a view to display the list of users returned from the Index action method. Luckily Visual studio generates most of the Scaffolding code for the view to display the data, follow the below steps to create a List View template.

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

The view file Index.cshtml will get generated as follows.

@model IEnumerable<HelloMVC.Models.EFCoreModel.Users>

@{

    ViewData["Title"] = "Index";

}

<h1>Index</h1>

<p>

    <a asp-action="Create">Create New</a>

</p>

<table class="table">

    <thead>

        <tr>

            <th>

                @Html.DisplayNameFor(model => model.FirstName)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.LastName)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Phone)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Email)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Address)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.AttachmentPath)

            </th>

            <th></th>

        </tr>

    </thead>

    <tbody>

@foreach (var item in Model) {

        <tr>

            <td>

                @Html.DisplayFor(modelItem => item.FirstName)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.LastName)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.Phone)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.Email)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.Address)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.AttachmentPath)

            </td>

            <td>

                <a asp-action="Edit" asp-route-id="@item.UserId">Edit</a> |

                <a asp-action="Details" asp-route-id="@item.UserId">Details</a> |

                <a asp-action="Delete" asp-route-id="@item.UserId">Delete</a>

            </td>

        </tr>

}

    </tbody>

</table>

Build and run the application, the output will display the list of users in the Users table of the database.