在用戶單擊表格內的超鏈接后，我無法在第一個視圖旁邊呈現第二個部分視圖，如圖所示。當用戶單擊第二個視圖時，第二個視圖不會呈現并且視圖會消失。
索引.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using PracticeApp.Models;
using System.Linq;
namespace PracticeApp.Pages
{
public class IndexModel : PageModel
{
public CompanyContext _context;
public IndexModel(CompanyContext context) { _context = context; }
public PartialViewResult OnPostDisplayDepartment(int value)
{
return Partial("_DisplayDepartmentPartial", _context.Departments.Where(x => x.DepartmentId == value).ToList());
}
public PartialViewResult OnPostDisplayEmployee(int value)
{
return Partial("_DisplayEmployeePartial", _context.Employees.Where(x => x.DepartmentId == value).ToList());
}
}
}
索引.cshtml
@page
@model IndexModel
@{ ViewData["Title"] = "Index"; }
<form method="post">
<table>
<tr>
<td>
@Html.TextBox("TxtDepartment")
</td>
<td>
<button type="button" id="DepartmentSearch">Search</button>
</td>
</tr>
</table>
</form>
<br />
<div id="DepartmentResult"></div>
<div id="EmployeeResult"></div>
@section Scripts {
<script>
$("#DepartmentSearch").click(function()
{
$.ajax(
{
url: "/Index?handler=DisplayDepartment",
type: "POST",
data: { value: $("#TxtDepartment").val() },
headers: { RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val() },
success: function(data) { $("#DepartmentResult").html(data); }
});
});
</script>
}
_DisplayDepartmentPartial.cshtml
@model IEnumerable<Models.Department>
@if (Model.Count() != 0)
{
<table style="border: 1px solid black">
<thead>
<tr>
<th colspan="2" style="border: 1px solid black; text-align: center;">Department Results</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" style="border: 1px solid black; font-weight: bold;">
@Html.DisplayNameFor(m => m.DepartmentId)
</td>
<td align="center" style="border: 1px solid black; font-weight: bold;">
@Html.DisplayNameFor(m => m.DepartmentName)
</td>
</tr>
@foreach (Models.Department item in Model)
{
<tr>
<td id="TxtEmployee" align="center" style="border: 1px solid black;">
<a id="EmployeeSearch" href="Index?handler=DisplayDepartment#">
@item.DepartmentId
</a>
</td>
<td align="center" style="border: 1px solid black;">
@item.DepartmentName
</td>
</tr>
}
</tbody>
</table>
}
else
{
<p>No data</p>
}
@section Scripts {
<script>
$("#EmployeeSearch").click(function()
{
$.ajax(
{
url: "Index?handler=DisplayDepartment",
type: "POST",
data: { value: $("#TxtEmployee").val() },
headers: { RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val() },
success: function(data) { $("#EmployeeResult").html(data); }
});
});
</script>
}
_DisplayEmployeePartial.cshtml
@model IEnumerable<Models.Employee>
@if (Model.Count() != 0)
{
<table style="border: 1px solid black">
<thead>
<tr>
<th colspan="2" style="border: 1px solid black; text-align: center;">Employee Results</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" style="border: 1px solid black; font-weight: bold;">
@Html.DisplayNameFor(m => m.DepartmentId)
</td>
<td align="center" style="border: 1px solid black; font-weight: bold;">
@Html.DisplayNameFor(m => m.EmployeeName)
</td>
</tr>
@foreach (Models.Employee item in Model)
{
<tr>
<td align="center" style="border: 1px solid black;">
@item.DepartmentId
</td>
<td align="center" style="border: 1px solid black;">
@item.EmployeeName
</td>
</tr>
}
</tbody>
</table>
}
else
{
<p>No data</p>
}
uj5u.com熱心網友回復：
默認情況下，部分視圖無法使用該@section元素。
嘗試洗掉腳本部分周圍的剃刀語法，然后使用<script></script>.
如果你想使用一個標簽來呼叫js方法，你應該使用href="javascript:aa()"并且傳遞的值應該是$("#EmployeeSearch").text(). 當您單擊a標簽時，您應該呼叫DisplayEmployee，而不是DisplayDepartment.
所以你_DisplayDepartmentPartial.cshtml應該看起來像這樣：
@model IEnumerable<Models.Department>
@if (Model.Count() != 0)
{
<table style="border: 1px solid black">
<thead>
<tr>
<th colspan="2" style="border: 1px solid black; text-align: center;">Department Results</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" style="border: 1px solid black; font-weight: bold;">
@Html.DisplayNameFor(m => m.Id)
</td>
<td align="center" style="border: 1px solid black; font-weight: bold;">
@Html.DisplayNameFor(m => m.Name)
</td>
</tr>
@foreach (var item in Model)
{
<tr>
<td id="TxtEmployee" align="center" style="border: 1px solid black;">
<a id="EmployeeSearch" href="javascript:aa()">@item.Id</a>
</td>
<td align="center" style="border: 1px solid black;">
@item.Name
</td>
</tr>
}
</tbody>
</table>
}
else
{
<p>No data</p>
}
<script>
$("#EmployeeSearch").click(function () {
$.ajax(
{
url: "Index?handler=DisplayEmployee",
type: "POST",
data: { value: $("#EmployeeSearch").text() },
headers: { RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val() },
success: function(data) { $("#EmployeeResult").html(data); }
});
});
</script>
測驗結果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/527207.html