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

In Part 5 of this series, you created three partials: _ShowTeam, _InsertTeam, and _UpdateTeam. In this part, we’ll complete the TeamMember section by adding the remaining three partials: _ShowTeamMember, _InsertTeamMember, and _UpdateTeamMember.

For quick reference, let’s revisit the organization of partials once again:

Begin by adding three new partials—_ShowTeamMember, _InsertTeamMember, and _UpdateTeamMember—to the TeamMembers folder. Then, open the _ShowTeamMember partial and add the following markup and code.

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

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

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

The _ShowTeamMember partial receives a TeamMember model object and renders a <form> as shown below:

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 TeamMembersController, passing both TeamID and MemberID as route parameters.

The Delete button submits the form to the Delete() action of TeamMembersController, also passing TeamID and MemberID as route parameters.

The Cancel button submits the form to the CancelSelection() action of TeamMembersController.

With _ShowTeamMember in place, proceed to creating the _InsertTeamMember partial and add the following markup and logic.

@model TeamMember
<h2>Insert New Team Member</h2>
<form method="post">
    <input type="hidden" asp-for="TeamID" />
    <table border="1" cellpadding="10">
        <tr>
            <td>Name :</td>
            <td><input type="text" asp-for="Name" /></td>
        </tr>
        <tr>
            <td>Email :</td>
            <td><input type="text" asp-for="Email" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit"
                       value="Save"
                       asp-controller="TeamMembers"
                       asp-action="InsertSave"
                       asp-route-teamid="@Model.TeamID" />

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

The _InsertTeamMember partial renders the user interface shown below:

This form includes two buttons: Save and Cancel, both highlighted in bold within the markup. Clicking Save submits the form to the InsertSave() action of TeamMembersController. Clicking Cancel submits the form to the CancelEntry() action of the same controller.

Next, let’s move on to the _UpdateTeamMember partial, which allows editing of an existing TeamMember record. Its markup and logic are presented below.

@model TeamMember
<h2>Edit Team Member : @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>Team Member ID :</td>
            <td>
                <input type="text" asp-for="TeamMemberID" readonly />
            </td>
        </tr>
        <tr>
            <td>Name :</td>
            <td><input type="text" asp-for="Name" /></td>
        </tr>
        <tr>
            <td>Email :</td>
            <td><input type="text" asp-for="Email" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit"
                       value="Save"
                       asp-controller="TeamMembers"
                       asp-action="UpdateSave"
                       asp-route-teamid="@Model.TeamID"
                       asp-route-memberid="@Model.TeamMemberID"/>

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

The _UpdateTeamMember partial renders the user interface shown below:

This form displays the selected TeamMember record in edit mode and includes two buttons: Save and Cancel. Both buttons are highlighted in bold within the markup.

Clicking Save submits the form to the UpdateSave() action of TeamMembersController, passing both TeamID and MemberID as route parameters.

Clicking Cancel submits the form to the CancelEntry() action of TeamMembersController, also passing TeamID and MemberID.

With this, all partials related to TeamMember management are complete.

Since we’ve used TeamID and MemberID as route parameters in our partials, you’ll need to update your routing configuration accordingly. To do so, open the Program.cs file add the code as shown below:

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Teams}/
    {action=List}/{teamid?}/{memberid?}");

This completes the application. You can now run it and test all operations—viewing, inserting, updating, and deleting both Teams and TeamMembers.

That’s all for now—Let your views speak wisdom, and your controllers move with grace. With this final keystroke of care, I rest my pen.