文章/答案/技术大牛

发布

社区首页 >问答首页 >具有预先填充已插入数据的多个制表符的剃刀页

问具有预先填充已插入数据的多个制表符的剃刀页
EN

Stack Overflow用户

提问于 2020-12-04 15:37:29

回答 1查看 425关注 0票数 0

我有一个列表页面与工作人员的细节与编辑和删除链接，像这样。

现在，当我点击编辑链接，它应该带我到相关人员的详细信息(页面将像这样，使用Razor页面模型实现)

这是我的列表页代码，在编辑链接中，我将传递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处理。文件名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>
}

现在我的详细信息页面url将类似于这个https://localhost:44345/Staff/Directory/Details?id=5

我怎样才能预先填写所有表格的细节？如何通过AJAX url传递StaffID？是否可以通过asp-page-route属性同时传递StaffID和EmpID？

asp.net-core

razor-pages

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-12-07 06:18:53

可以通过asp页面路由属性同时传递StaffID和EmpID吗？

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

可以通过使用不同的asp-页路由名称来生成多个路由参数。如下所示：

详细信息

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

然后，可以在Details页面中添加新属性来绑定这两个参数。如下所示：

    [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传递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页面。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65146409

复制

相似问题

问具有预先填充已插入数据的多个制表符的剃刀页
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有预先填充已插入数据的多个制表符的剃刀页EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有预先填充已插入数据的多个制表符的剃刀页
EN