8.1: Detail View

Create the Detail View

In order to physically see the NoteDetail model on our webpage, we need to create a view for it.

1. Open NoteController.cs

2. The error is gone since we added the GetNoteById() method in NoteService.cs

3. Right click on the Details() method and add a view

4. Fill it out like this:

   

ActionLinks

1. In the Details.cshtml file that was created, change the ActionLinks at the bottom to:

    </div>
        <p>
            @Html.ActionLink("Edit", "Edit", new { id = Model.NoteId }) |
            @Html.ActionLink("Back to List", "Index")
        </p>

2. Go to Views -> Notes -> Index.cshtml

3. Change the ActionLinks at the bottom to:

                    </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id=item.NoteId }) |
                    @Html.ActionLink("Details", "Details", new { id=item.NoteId }) |
                    @Html.ActionLink("Delete", "Delete", new { id=item.NoteId })
                </td>
            </tr>
        }

4. 

5. These anonymous classes inside the ActionResult will communicate to the NoteController and select the appropriate Note.

6. Run the app and go to the details view on one of the notes:

   

Do you see that URL localhost:59641/Note/Details/4? Next, we'll cover the components of it.