具有多个选项卡的 Razor 页面，这些选项卡预填充了已插入的数据

Question

我有一个包含员工详细信息的列表页面，其中包含这样的编辑和删除链接。

现在当我点击编辑链接时，它应该带我到相应员工的详细信息（页面将是这样的，使用 Razor Pages 模型实现）

这是我的列表页面代码，在编辑链接中我将传递 StaffID

文件名：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>

具有多个选项卡的详细信息页面，其中每个选项卡的导航由 AJAX 处理。文件名详细信息.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>
}

现在我的详细信息页面网址将是这样的 https://localhost:44345/Staff/Directory/Details?id=5

如何预填充所有表单中的详细信息？ 我如何通过 AJAX url 传递 StaffID？ 是否可以通过 asp-page-route 属性同时传递 StaffID 和 EmpID？

Answer 1

是否可以通过 asp-page-route 属性同时传递 StaffID 和 EmpID？

当然，我们可以将多个路由值从一个页面传递到另一个页面。

您可以通过使用不同的 asp-page-route 名称来生成多路由参数。如下：

详情

生成链接应该是https://localhost:44345/Staff/Directory/Details?StaffID=12&EmpId=34。

然后您可以在详细信息页面中添加新属性来绑定这两个参数。如下：

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

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

并在详情页使用：

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

结果：

如何通过 AJAX url 传递 StaffID？

您可以像这样添加它以在详细信息页面 ajax 表单中传递 StaffID。

如前面的示例所示，我已经为 StaffID 添加了活页夹。所以你可以直接以ajax形式使用它。

    $(function () {
        $.ajax({
            url: "/Staff/Onboarding/StaffDetails?StaffID=@Model.StaffID",
            type: "get",
            success: function (result) {
                $("#StaffDetails").html(result);
            }
        })

结果：

如何预先填充所有表单中的详细信息？

我不清楚你的问题。您对所有表单中的详细信息进行预填充是什么意思？如果你得到了 EMPID 和 StaffID，你可以直接使用它们来获取相关数据，在 StaffDetails 页面模型的 onget 方法中使用 dbcontext 用正确的数据填充 StaffDetails 页面。