首页 > 解决方案 > 从操作结果中获取选项卡窗格内容

问题描述

我正在努力想办法从我的索引以外的操作中获取我的一个“标签内容”中的内容

<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 是唯一的解决方案还是有其他方法?

任何建议表示赞赏!

标签: c#asp.net-core

解决方案


在我看来,我建议您可以使用 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>
}

结果:

在此处输入图像描述


推荐阅读