c# - 从操作结果中获取选项卡窗格内容
问题描述
我正在努力想办法从我的索引以外的操作中获取我的一个“标签内容”中的内容
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
@Html.ActionLink("Analysis History", "Index", "Feedback", new { Tab = "Analysis" }, new { @class = "nav-link active" })
</li>
<li class="nav-item">
@Html.ActionLink("Pending Analysis Requests", "PendingList", "Feedback", new { Tab = "Pending" }, new { @class = "nav-link active" })
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade @(ViewBag.Hash == "Analysis" ? "show active" : "")" id="Analysis" role="tabpanel" aria-labelledby="Analysis-tab">
<div> .... </div> // WORKS FINE
</div>
<div class="tab-pane fade @(ViewBag.Hash == "Pending" ? "show active" : "")" id="Pending" role="tabpanel" aria-labelledby="Pending-tab">
<div>
//HERE I WANT THE RESULT FROM PENDINGLIST ACTION
</div>
</div>
</div>
行动
public async Task <IActionResult> PendingList (int AnalysisPage = 1, string Tab = "Pending")
{
ViewBag.Hash = Tab;
//POPULATING THE MODEL
return PartialView("_PendingAnlaysisRequestsList", model);
}
_PendingAnlaysisRequestsList 部分是持有一个表格来显示模型内容
ps:在索引操作中我设置 ViewBag.Hash 并且整个操作返回 view()
使用 ajax 是唯一的解决方案还是有其他方法?
任何建议表示赞赏!
解决方案
在我看来,我建议您可以使用 ajax 和 tab 内容来满足您的要求,您可以使用 ajax 加载视图并生成超链接来显示它们。
更多细节,您可以参考以下代码:
注意:你应该用你自己的 url 替换 ajax url。
<div>
<ul class="nav nav-tabs justify-content-center">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" role="tab" aria-controls="Analysis" id="Analysislink"
href="#Analysis">Analysis</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" role="tab" aria-controls="Pending" id="Pendinglink"
href="#Pending">Pending</a>
</li>
</ul>
</div>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="Analysis" role="tabpanel" aria-labelledby="Analysis-tab">
</div>
<div class="tab-pane fade" id="Pending" role="tabpanel" aria-labelledby="Pending-tab">
</div>
</div>
@section scripts
{
<script src="~/lib/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.js"></script>
<script>
$("#Analysislink").click(function () {
$.ajax({
url: "/Staff/Onboarding/StaffDetails?StaffID=@Model.StaffID",
type: "get",
success: function (result) {
$("#Analysis").html(result);
}
})
});
$("#Pendinglink").click(function () {
$.ajax({
url: "/Staff/Onboarding/Biodata",
type: "get",
success: function (result) {
$("#Pending").html(result);
}
})
});
$(function () {
$.ajax({
url: "/Staff/Onboarding/StaffDetails?StaffID=@Model.StaffID",
type: "get",
success: function (result) {
$("#Analysis").html(result);
}
})
})
</script>
}
结果:
推荐阅读
- python - 根据每行中的条件插入新列
- c# - 如何使用 Autofac 在 MassTransit 中注册 GenericRequestClient
- reactjs - 我想在我的项目中自定义条纹表单以做出反应
- python - python 如何将输入值转换为数学函数
- html - CSS从右到左排序元素
- .net-core - 使用来自一个 rabbitmq 主机的消息并使用公共传输和 .net 核心发布到不同的 rabbitmq 主机
- .net - CQRS + clean architecture - 命令的通用基本类型
- ruby-on-rails - ROR: `require': 无法加载此类文件 -- 赛璐珞/当前 (LoadError)
- sql - 需要如何选择 or 条件?
- javascript - 表单在函数调用时消失