Build Master-Detail Pages in ASP.NET Core MVC — Part 5

In Part 4 of this series, we introduced the Main view along with two key partials: _Teams and _TeamMembers. As a quick recap, both partials are responsible for rendering individual Team and TeamMember records in three distinct modes—read-only, insert, and update. This functionality is achieved through six supporting partials: three nested within _Teams, and three within _TeamMembers.

For quick reference, let’s revisit how the partials are organized:

With the .cshtml files in the Shared folder now complete, it's time to shift our focus to the partials housed within the Teams and TeamMembers folders.

Begin by adding three new partials to the Teams folder: _ShowTeam, _InsertTeam, and _UpdateTeam. Once created, open the _ShowTeam partial and add the following markup and code.

@model Team
<h2>Edit Team : @Model.Name</h2>
<form method="post">
    <table border="1" cellpadding="10">
        <tr>
            <td>Team ID :</td>
            <td>@Model.TeamID</td>
        </tr>
        <tr>
            <td>Name :</td>
            <td>@Model.Name</td>
        </tr>
        <tr>
            <td>Description :</td>
            <td>@Model.Description</td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" 
                       value="Edit"
                       asp-controller="Teams"
                       asp-action="UpdateEntry"
                       asp-route-teamid="@Model.TeamID" />

                <input type="submit"
                       value="Delete"
                       asp-controller="Teams"
                       asp-action="Delete"
                       asp-route-teamid="@Model.TeamID" />

                <input type="submit"
                       value="Cancel"
                       asp-controller="Teams"
                       asp-action="CancelSelection" />
            </td>
        </tr>
    </table>
</form>

The _ShowTeam partial receives a Team model object and renders a <form> to display its details. Here's how the markup is structured:

At the bottom of the form, you'll notice three buttons: Edit, Delete, and Cancel.

The Edit button submits the form to the UpdateEntry() action of the TeamsController, passing the TeamID as a route parameter.

The Delete button targets the Delete() action of the same controller, also passing the TeamID route parameter.

The Cancel button submits the form to the CancelSelection() action of TeamsController, allowing the user to gracefully exit the current selection.

With _ShowTeam in place, let’s move on to creating the _InsertTeam partial. Add this new file to the Teams folder, and populate it with the following markup and logic.

@model Team
<h2>Insert New Team</h2>
<form method="post">
    <table border="1" cellpadding="10">
        <tr>
            <td>Name :</td>
            <td><input type="text" 
asp-for="Name" /></td>
        </tr>
        <tr>
            <td>Description :</td>
            <td><input type="text" 
asp-for="Description" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit"
                       value="Save"
                       asp-controller="Teams"
                       asp-action="InsertSave" />

                <input type="submit"
                       value="Cancel"
                       asp-controller="Teams"
                       asp-action="CancelEntry" />
            </td>
        </tr>
    </table>
</form>

The _InsertTeam partial renders the user interface as shown below:

This form includes two buttons—Save and Cancel—clearly marked in bold within the markup. Clicking Save submits the form to the InsertSave() action of TeamsController. Clicking Cancel routes the form to the CancelEntry() action of the same controller.

Next, let’s turn to the _UpdateTeam partial, which enables editing of an existing Team record. Its markup and logic are presented below.

@model Team
<h2>Edit Team : @Model.Name</h2>
<form method="post">
    <table border="1" cellpadding="10">
        <tr>
            <td>Team ID :</td>
            <td>
                <input type="text" 
asp-for="TeamID" readonly />
            </td>
        </tr>
        <tr>
            <td>Name :</td>
            <td><input type="text" 
asp-for="Name" /></td>
        </tr>
        <tr>
            <td>Description :</td>
            <td><input type="text" 
asp-for="Description" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit"
                       value="Save"
                       asp-controller="Teams"
                       asp-action="UpdateSave"
                       asp-route-teamid="@Model.TeamID" />

                <input type="submit"
                       value="Cancel"
                       asp-controller="Teams"
                       asp-action="CancelEntry"
                       asp-route-teamid="@Model.TeamID" />
            </td>
        </tr>
    </table>
</form>

The _UpdateTeam partial renders the user interface shown below:

This form displays the selected Team record in edit mode and includes two buttons—Save and Cancel—highlighted in bold within the markup. Clicking Save submits the form to the UpdateSave() action of TeamsController, passing the TeamID as a route parameter. Clicking Cancel routes the form to the CancelEntry() action, also passing the TeamID.

With this, we’ve completed all partials related to Team management. In the next part of this series, we’ll turn our attention to building partials for managing TeamMember records.

That’s all for now—may each method be mindful, and each view a reflection of purpose. With a final keystroke and a flicker of intention in code, I rest my pen.