C# 带有多个选项卡的Razor页面，这些选项卡预先填充已插入的数据

我有一个与编辑和删除链接这样的员工详细信息列表页

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

这是我的listingpage代码，在编辑链接中，我将传递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>

@page
@模型承包商\u HRMS.Pages.Staff.Directory.StaffDirectoryModel
@{
ViewData[“Title”]=“员工目录”；
Layout=“~/Pages/Shared/_Layout.cshtml”；
}
员工名录

员工姓名
位置
请选择






员工姓名
员工类型
职位名称
位置
主管/经理姓名
行动
@foreach（Model.StaffDetails中的var项）
{
@Html.DisplayFor（modelItem=>item.PreferredEmpFname）@Html.DisplayFor（modelItem=>item.PreferredEmpLname）
@DisplayFor（modelItem=>item.EmploymentType）
@DisplayFor（modelItem=>item.JobTitle）
@DisplayFor（modelItem=>item.Location）
@DisplayFor（modelItem=>item.SupervisorName）


















@节脚本
{
@{wait Html.RenderPartialAsync（“_validationScript”）；}
$（函数（）{
$.ajax({
url:“/Staff/Directory/StaffDetails”，
键入：“获取”，
成功：功能（结果）{
$（“#StaffDetails”）.html（结果）；
}
})
$.ajax({
url:“/Staff/Directory/Biodata”，
键入：“获取”，
成功：功能（结果）{
$（“#Biodata”）.html（结果）；
}
})
$.ajax({
url:“/Staff/Directory/educationalization”，
键入：“获取”，
成功：功能（结果）{
$（“#教育资格”）.html（结果）；
}
})
$.ajax({
url:“/Staff/Directory/Assets”，
键入：“获取”，
成功：功能（结果）{
$（“#资产”）.html（结果）；
}
})
})
功能首次完成（事件）{
如果（event.responseText！=“”）{
$（“#StaffDetails”）.html（event.responseText）；
}否则{
$（'a[href=“#Biodata”]”）选项卡（'show'）；
}
}
//函数已完成（）{
//$（'a[href=“#教育资格”]”）选项卡（'show'）；
//}
//函数thirdCompleted（）{
//$（'a[href=“#资产”]”）选项卡（'show'）；
//}
//函数forthCompleted（）{
//警报（“全部提交”）
//}
}

现在我的详细信息页面url将如下所示 https://localhost:44345/Staff/Directory/Details?id=5

如何在所有表格中预先填充细节？ 如何通过AJAX url传递标记？ 是否可以通过asp页面路由属性传递StaffID和EmpID

是否可以通过asp页面路由属性传递StaffID和EmpID

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

您可以使用不同的asp页面路由名称生成多路由参数。如下所示：

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

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

细节

生成链接应为

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>

结果:

如何在所有表格中预先填充细节

---

我不太明白你的问题。你说的在所有表单中预填充细节是什么意思？如果你得到了EMPID和StaffID，你可以直接使用它们通过StaffDetails页面模型的onget方法中的dbcontext来获取相关数据。用正确的数据填充StaffDetails页面。

Hi@mj1313，我如何传递StaffID和StaffIDd EmpID来填充输入字段。您好@Brando Zhang，非常感谢您的详细解释。我设法填充了表单字段，但我的日期字段没有正确显示。您能告诉我哪个字段没有正确显示吗？您能分享一些相关代码吗？如果这个问题与此线程标题无关。

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