带有多个选项卡的Razor页面，这些选项卡可预填充已插入的数据 [英] Razor Pages with multiple tabs that prepopulate already inserted data
问题描述
我有一个列表页面，其中包含员工详细信息，并带有像这样的编辑和删除链接.
I have a listing page with staff details with edit and delete link like this.
现在，当我单击编辑"链接时，它应该带我到各个工作人员的详细信息(页面将是这样，使用Razor页面模型实现)
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)
这是我的商家信息页代码，在该链接中，我将传递StaffID
This is my listingpage code,where in the edit link i will be passing the StaffID
文件名:StaffDirectory.cshtml
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) @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"> <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"> <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
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>
}
现在，我的详细信息页面网址将是这样 https://localhost:44345/Staff/Directory/Details?id = 5
Now my Details Page url will be like this https://localhost:44345/Staff/Directory/Details?id=5
如何在所有表格中预先填充详细信息?如何通过AJAX网址传递StaffID?是否可以通过 asp-page-route 属性同时传递StaffID和EmpID?
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?
推荐答案
是否可以通过asp-page-route属性同时传递StaffID和EmpID?
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.
您可以使用不同的asp-page-route名称来生成多路由参数.如下所示:
You could generate the multiple route parameter by use different asp-page-route name. Like below:
详细信息
生成链接应为 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>
结果:
如何通过AJAX网址传递StaffID?
How can i pass the StaffID through AJAX url?
您可以这样添加它，以在详细信息页面ajax表单中传递StaffID.
You could add it like this to pass the StaffID in the details page ajax form.
我已经为StaffID添加了活页夹，如前面的示例所示.因此，您可以直接以ajax形式使用它.
I have add binder for StaffID as previous example shows. So you could directly use it in ajax form.
$(function () {
$.ajax({
url: "/Staff/Onboarding/StaffDetails?StaffID=@Model.StaffID",
type: "get",
success: function (result) {
$("#StaffDetails").html(result);
}
})
结果:
如何在所有表格中预先填充细节?
How can i prepopulate the details in all the forms?
我不清楚您的问题.您对所有形式的细节预先填充是什么意思?如果获得了EMPID和StaffID，则可以通过在StaffDetails页面模型的onget方法中使用dbcontext直接使用它们来获取相关数据.
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.
这篇关于带有多个选项卡的Razor页面，这些选项卡可预填充已插入的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
