javascript - 使用 javascript 在 ASP.NET MVC 中加载部分 View

Question

我需要根据用户的菜单选项卡选择显示大约 15 个部分 View 。基本上，我在侧面有这 15 个菜单选项卡，根据用户对这些选项卡的点击，我将在页面上显示该选项卡的内容。

此外，我在这里使用 Knockout。

因此，当页面首次加载时，我填充了这 15 个 Knockout 可观察值(self.tab_A()、self.tab_B()、...self.tab_N())。

我的代码是这样的。这是 View 。

<ul id="tabs">
    <li>
        <a data-bind="click: function(){ $root.ShowHideDiv(tab_A.id); }" style="cursor: pointer;">
           Tab A
        </a>
    </li>

    <li>
        <a data-bind="click: function(){ $root.ShowHideDiv(tab_B.id); }" style="cursor: pointer;">
         Tab B
        </a>
    </li>
    ...
    ...
</ul>   

部分 View 已预先加载，但从用户的 View 中隐藏。

<ul>
    <li id="tab_A" style="display: none" class="hiddenDivs">
        @{Html.RenderPartial("~/Views/Claims/FroiReport/_Insurer.cshtml");}
    </li>

    <li id="tab_B" style="display: none" class="hiddenDivs">
        @{Html.RenderPartial("~/Views/Claims/FroiReport/_Insurer.cshtml");}
    </li>
</ul>

在点击事件上使用脚本显示 div。

 self.ShowHideDiv = function (tabToShow) {
        console.log(tabToShow);
        $('.hiddenDivs').html('');
        $('#' + tabToShow).show();
    };  

现在的问题是，使用此代码的 UI 对于 3-4 个 View 工作正常，但对于其余 View ，设计可能会被破坏，可能是因为隐藏了太多的 div(我在这里不确定)。

因此，我正在研究其他选项，仅在运行时加载特定 View 。当用户单击选项卡时，获取部分 View 并加载它。

因此，我尝试了这样的方法:

self.ShowHideDiv = function (tabToShow) {
    $('.hiddenDivs').html('');
    var view = getValueFromDict(dict, tabToShow); //gets the needed view from a dictionary in "~/Views/Products/CoolProducts/_ItemOne.cshtml" format
    $('.hiddenDivs').load('/Claims/ReturnPartialView/?partialViewName=' + view);
};

但这不起作用，因为我没有与这些 View 关联的任何操作/ Controller ，我无法使用 javascript/jquery 直接加载 View 。

我尝试过的另一个选项是创建一个返回部分 View 的 Controller 。

public ActionResult ReturnPartialView(string partialViewName)
        {
            return PartialView(partialViewName);
        }

并这样调用它:

self.ShowHideDiv = function (tabToShow) {
    $('.hiddenDivs').html('');
    var view = getValueFromDict(dict, tabToShow);
    $('.hiddenDivs').load('/MyController/ReturnPartialView/?partialViewName=' + view);
}

现在，这会加载我需要的 View ，但与该 View 关联的 KnockOut 可观察对象将作为 null 执行此操作。

我听说 KO 模板可以用于我的场景，但尚未尝试 KO 模板来解决这个问题(我将在接下来研究)。我想看看是否有人可以在不使用 KO 模板的情况下解决我的问题。

非常感谢您耐心地尝试理解这一点。

Answer 1

您可以使用 jQuery 分两步完成此操作。首先，在 dom 准备好后或发生事件时，从您的 View 中点击所需的 Controller 操作。 dom 准备好后，我在这里调用 Controller 。您可以根据需要点击操作 get 或 post 方法。
在 $.ajax 中，我使用了 ( async: false )，以便我现在调用的语句必须在函数中的下一个语句执行之前完成。

<script>
    $(document).ready(function () { 
        $.ajax({
            url: '/Controller/ActionNAme',
            type: 'POST',
            async: false,
            data: { ModelField: value},
            success: function (result) {
                $("#your_desired_div_id").html(result);
            }
        });
    });
</script>

这是操作。该操作将 View 模型作为结果返回给 ajax.post 函数，并且在 ajax post 函数中，您的 your_desired_div_id 内容会随着部分 View 的内容而更改。

 [HttpPost]
        public ActionResult ActionNAme  (ModelName ModelField)
        {
            var dBList= (from myTable in db.tableModel where myTable .column == ModelField.column  select  myTable).ToList();
                 return PartialView("_PartialView", dBList) 

        }