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

In Part 4 of this article series we added the Main view, _Teams partial, and _TeamMembers partial. Recollect that _Teams partial and _TeamMembers partial show a Team or TeamMember record in read-only, insert, or update mode. This is done with the help of six partials - three belonging to _Teams partial and three belonging to _TeamMembers partial.

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

We have completed .cshtml files residing in the Shared folder. Now it's time to move our attention to partials from Teams and TeamMembers folders.

First, add three new partials namely _ShowTeam, _InsertTeam, and _UpdateTeam in the Teams folder. Then open _ShowTeam partial and write following code and markup in it.

@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 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 TeamsController. We also pass the TeamID route parameter to the UpdateEntry() action.

The Delete button submits the form to the Delete() action of TeamsController. We also pass the TeamID route parameter to the Delete() action.

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

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

@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 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 TeamsController. Similarly, clicking on the Cancel button submits the form to the CancelEntry() action of TeamsController.

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

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

It shows the selected Team 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 TeamsController. We also pass TeamID route parameter to the UpdateSave() action.

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

This completes all the partials related to Team management. In the next part of this series we will add partials that manage TeamMembers. 

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 : 12 April 2021


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