Scaffold the index view

Scaffold the code required for Movie model

Scaffold Views

Scaffolding is a feature of Visual Studio where we can generate code based on a given criterial or model. It saves a lot of time and efforts. Generated code can be customized as required. We could also do this task manually in case we prefer that for some reason.

Let us start the scaffolding process

Before that,

Make sure that the application is stopped and the app builds without any errors.

If Visual Studio prompts you to save the solution file, do so since we might have created a project only and going forward, we need a solution to hold configuration info as well!

Follow the steps shown below to first scaffold the views required to display a movie list. We will need various views - For CRUD operations:

Create a Movies folder under Views folder and then:

Click Add and then save the solution file if VS prompts for it.

This is the Index view that was generated

In case your scaffolding did not go through, you can manually create this file:

@model IEnumerable<MvcMovie.Models.Movie>

@{
    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.Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ReleaseDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Genre)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Price)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Id)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ReleaseDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Genre)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
            </td>
        </tr>
}
    </tbody>
</table>

What the Index.cshtml code does

The @model statement at the top of the Index.cshtml file:

@model IEnumerable<MvcMovie.Models.Movie>

The @model directive allows access to the list of movies that the controller passes to the view by using a Model object that's strongly typed. For example, in the Index.cshtml view, the code loops through the movies with a foreach statement over the strongly typed Model object

Because the Model object is strongly typed as an IEnumerable<Movie> object, each item in the loop is typed as Movie. Among other benefits, the compiler validates the types used in the code.