Razor Pages with multiple tabs that prepopulate already inserted data

Question

I have a listing page with staff details with edit and delete link like this.

Now when i click on the Edit link,it should take me to the respective staff's details(The page will be like this,Implemented using Razor Pages Models)

This is my listingpage code,where in the edit link i will be passing the StaffID

Filename : StaffDirectory.cshtml

@page
@model Contractor_HRMS.Pages.Staff.Directory.StaffDirectoryModel
@{
    ViewData["Title"] = "Staff Directory";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}

<h4>STAFF DIRECTORY</h4>
<hr />
<form asp-page="Staff/Directory/StaffDirectory" method="get">
    <div class="row">
        <div class="col-4">
            <label class="control-label">Employee Name</label>
            <input asp-for="SearchString" class="form-control-staff" type="text" />
        </div>
        <div class="col-4">
            <label class="control-label">Location</label>
            <select asp-for="Location" asp-items="Model.Location" class="form-control-staff">
                <option value="">Please Select</option>
            </select><br />
        </div>
        <div class="col-4">
            <input type="submit" class="btn-success" value="SEARCH" />
        </div>
    </div>
</form>
    <br />
    <br />
    <table class="table" border="1">
        <thead style="background-color:silver;">
            <tr>
                <th>
                    Employee Name
                </th>

                <th>
                    Employee Type
                </th>
                <th>
                    Job Title
                </th>
                <th>
                    Location
                </th>
                <th>
                    Supervisor/Manager Name
                </th>
                <th>
                    Actions
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.StaffDetails)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.PreferredEmpFname) &nbsp; @Html.DisplayFor(modelItem => item.PreferredEmpLname)
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.EmploymentType)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.JobTitle)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Location)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.SupervisorName)
                    </td>

                    <td>
                        <img src="~/images/pencil(1).png" alt="Edit">&nbsp;<a asp-page="./Details" asp-route-id="@item.StaffID">Edit</a> |
                        @*<a asp-page="./Details" asp-route-id="@item.ID">Details</a> |*@
                        <img src="~/images/icons8-delete-trash-16.png" alt="Delete">&nbsp;<a asp-page="./Delete">Delete</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <paging page-no="Model.P" 
            page-size="Model.S" 
            total-records="Model.TotalRecords"
            query-string-value="@(Request.QueryString.Value)">
    </paging>

Details Page with multiple Tabs,where navigation to each tab is handled by AJAX. File Name Details.cshtml

@page
@model Contractor_HRMS.Pages.Staff.Directory.DetailsModel
@{
    ViewData["Title"] = "Staff Details";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}

<h4>STAFF DETAILS</h4>
<hr />

<div>
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" role="tab" aria-controls="StaffDetails"
               href="#StaffDetails">Staff Details</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" role="tab" aria-controls="Biodata"
               href="#Biodata">Biodata</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" role="tab" aria-controls="EduQualification"
               href="#EduQualification">Educational Qualification</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" role="tab" aria-controls="Assets"
               href="#Assets">Assets</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" role="tab" aria-controls="AttachForms"
               href="#AttachForms">Attachment Of Forms</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" role="tab" aria-controls="Training"
               href="#Training">Training</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" role="tab" aria-controls="Awards"
               href="#Awards">Awards</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" role="tab" aria-controls="DisciplinaryAction"
               href="#DisciplinaryAction">Disciplinary Action</a>
        </li>
        
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" role="tab" aria-controls="StaffOffBoarding"
               href="#StaffOffBoarding">Staff OffBoarding</a>
        </li>
    </ul>
</div>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="StaffDetails" role="tabpanel" aria-labelledby="StaffDetails-tab">

    </div>
    <div class="tab-pane fade" id="Biodata" role="tabpanel" aria-labelledby="Biodata-tab">

    </div>
    <div class="tab-pane fade" id="EduQualification" role="tabpanel" aria-labelledby="EduQualification-tab">

    </div>
    <div class="tab-pane fade" id="Assets" role="tabpanel" aria-labelledby="Assets-tab">

    </div>
    <div class="tab-pane fade" id="AttachForms" role="tabpanel" aria-labelledby="AttachForms-tab">

    </div>
    <div class="tab-pane fade" id="Training" role="tabpanel" aria-labelledby="Training-tab">

    </div>
    <div class="tab-pane fade" id="Awards" role="tabpanel" aria-labelledby="Awards-tab">

    </div>
    <div class="tab-pane fade" id="DisciplinaryAction" role="tabpanel" aria-labelledby="DisciplinaryAction-tab">

    </div>
    
    <div class="tab-pane fade" id="StaffOffBoarding" role="tabpanel" aria-labelledby="StaffOffBoarding-tab">

    </div>
</div>
@section scripts
{
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script src="~/lib/jquery-ajax-unobtrusive/dist/jquery.unobtrusive-ajax.js"></script>
    <script>
        $(function () {
            $.ajax({
                url: "/Staff/Directory/StaffDetails",
                type: "get",
                success: function (result) {
                    $("#StaffDetails").html(result);
                }
            })

            $.ajax({
                url: "/Staff/Directory/Biodata",
                type: "get",
                success: function (result) {
                    $("#Biodata").html(result);
                }
            })

            $.ajax({
                url: "/Staff/Directory/EduQualification",
                type: "get",
                success: function (result) {
                    $("#EduQualification").html(result);
                }
            })

            $.ajax({
                url: "/Staff/Directory/Assets",
                type: "get",
                success: function (result) {
                    $("#Assets").html(result);
                }
            })
        })

        function firstCompleted(event) {
            if (event.responseText != "") {
                $("#StaffDetails").html(event.responseText);
            } else {
                $('a[href="#Biodata"]').tab('show');
            }
        }
                //function secondCompleted() {
                //    $('a[href="#EduQualification"]').tab('show');
                //}
                //function thirdCompleted() {
                //    $('a[href="#Assets"]').tab('show');
                //}
                //function forthCompleted() {
                //    alert("All Submit")
                //}
    </script>
}

Now my Details Page url will be like this https://localhost:44345/Staff/Directory/Details?id=5

How can i prepopulate the details in all the forms? How can i pass the StaffID through AJAX url? Is it possible to pass both StaffID and EmpID through asp-page-route attribute?

Answer 1

Is it possible to pass both StaffID and EmpID through asp-page-route attribute?

Sure, we could pass multiple route value from one page to another page.

You could generate the multiple route parameter by use different asp-page-route name. Like below:

Details

The generate link should be https://localhost:44345/Staff/Directory/Details?StaffID=12&EmpId=34.

Then you could add new property in the Details page to bind this two parameter. Like below:

    [BindProperty(SupportsGet = true)]
    public string EmpId { get; set; }

    [BindProperty(SupportsGet = true)]
    public string StaffID { get; set; }

And use it in details page:

<h2>
    StaffID:@Model.StaffID<br />
    EmpID:@Model.EmpId
</h2>

Result:

How can i pass the StaffID through AJAX url?

You could add it like this to pass the StaffID in the details page ajax form.

I have add binder for StaffID as previous example shows. So you could directly use it in ajax form.

    $(function () {
        $.ajax({
            url: "/Staff/Onboarding/[email protected]",
            type: "get",
            success: function (result) {
                $("#StaffDetails").html(result);
            }
        })

Result:

How can i prepopulate the details in all the forms?

I'm not understand your question clearly. What you mean about prepopulate the details in all the forms? If you get the EMPID and StaffID, you could directly use them to get the related data by using dbcontext in StaffDetails page model's onget method populate the StaffDetails page with the right data.