Perform Master Detail CRUD operations in ASP.NET Core (Part 6)

In Part 5 of this series you created three partials namely _ShowTeam, _InsertTeam, and _UpdateTeam. In this part you will add the remaining three partials viz. _ShowTeamMember, _InsertTeamMember, and _UpdateTeamMember.

For your quick reference let's take a look at the organization of partials again:

Begin by adding three new partials namely _ShowTeamMember, _InsertTeamMember, and _UpdateTeamMember in the TeamMembers folder. Then open _ShowTeamMember partial and write following code and markup in it.

@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 displays a <form> as shown below:

As you can see, there are three buttons at the bottom namely Edit, Delete, and Cancel.

The Edit button submits the form to the UpdateEntry() action of TeamMembersController. We also pass the TeamID and memberID route parameters to the UpdateEntry() action.

The Delete button submits the form to the Delete() action of TeamMembersController. We also pass the TeamID and MemberID route parameters to the Delete() action.

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

Then proceed to adding _InsertTeamMember partial and write the following code and markup into it.

@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 user interface as shown below:

There are two buttons viz. Save and Cancel. They are shown in bold letters in the markup. Clicking on the Save button submits the form to the InsertSave() action of TeamMembersController. Similarly, clicking on the Cancel button submits the form to the CancelEntry() action of TeamMembersController.

The _UpdateTeamMember partial allows you to edit an existing Team record. Its code and markup is shown next.

@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 a user interface as shown below:

It shows the selected TeamMember record for editing and has two buttons - Save and Cancel. These buttons are shown in bold letters in the above markup. Clicking on the Save button submits the form to the UpdateSave() action of TeamMembersController. We also pass TeamID and MemberID route parameters to the UpdateSave() action.

Clicking on the Cancel button submits the form to the CancelEntry() action of TeamMembersController. Here also we pass TeamID and MemberID to the CancelEntry() action.

This completes all the partials related to TeamMember management.

We have used TeamID and MemberID route parameters in our partials. You need to add them to your routing configuration. To do so, open Startup class and go to Configure() method. Then mpdofy the UseEndPoints() call as shown below:

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

This completes the application. You can run it and test all the operations.

That's it for now! Keep coding!!


Bipin Joshi is an independent software consultant, trainer, author, and meditation teacher. He has been programming, meditating, and teaching for 25+ years. He conducts instructor-led online training courses in ASP.NET family of technologies for individuals and small groups. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click here.

Get connected : Facebook  Twitter  LinkedIn  YouTube

Posted On : 26 April 2021


Tags : ASP.NET ASP.NET Core Data Access MVC .NET Framework C# Visual Studio