使用JavaScript在ASP.NET MVC中加载部分视图 [英] Loading a partial view in ASP.NET MVC using javascript

问题描述

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

I have about 15 partial views that I need to display based upon user's menu tab selection. Basically I have these 15 menu tabs on the side and based on user click for these tabs, I will be displaying the content for that tab on the page.

我也在这里使用淘汰赛.

Also I am using Knockout here.

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

So I have these 15 Knockout observables (self.tab_A(), self.tab_B(), ...self.tab_N()) populated when the page first loads.

我拥有的代码是这样的. 这是视图.

The code I have is something like this. Here is the 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>   

部分视图已预加载，但对用户视图不可见.

The partial views are pre-loaded but hidden from from user's 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.

Displaying div using script on click event.

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

现在，问题在于，使用此代码的UI可以在3-4个视图中正常工作，但其余视图的设计却可能会中断，这可能是因为有太多被隐藏的div(我不确定此处).

Now, the problem is that the UI using this code is working fine for 3-4 views but the design is breaking for the remaining views possibly because there are too many divs which are being hidden (I am not sure here).

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

So, I was looking into other options where I will load the specific view at run-time only. When user clicks on a tab, get the partial view and load it.

因此，我尝试过这样的事情:

Hence, I tried something like this:

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);
};

但这是行不通的，因为我没有与这些视图关联的任何动作/控制器，我无法使用javascript/jquery直接加载视图.

But this doesn't work since I do not have any Action/Controller associated with these views, I am unable to load the view directly using javascript/jquery.

我尝试过的另一个选项是创建一个返回部分视图的控制器.

Another option I have tried is creating a controller that returns a partial view.

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);
}

现在，这将加载我需要的视图，但与此视图相关联的KnockOut可观察对象将作为null来执行此操作.

Now this loads the view that I need but the KnockOut observable associated with the view is coming as null doing this.

我听说可以将KO模板用于我的方案，但是尚未尝试使用KO模板来解决此问题(我将在下一步中进行探讨).我想看看是否有人不用我的KO模板就能解决我的问题.

I heard that KO templates can be used for my scenario but have not yet tried KO templates to solve this (which I am going to look into next). I would like to see if anyone has solution to my problem without using the KO templates.

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

Thanks much for your patience to trying to understand this.

推荐答案

您可以分两步使用jQuery进行此操作.首先，在dom准备就绪或发生事件后，从您的视图中击中所需的控制器动作. dom准备好后，我在这里有呼叫控制器.您可以根据需要点击操作get或post方法.
在我使用的$ .ajax中( async:false )中，因此必须先完成我正在调用的语句，然后才能执行该函数中的下一条语句.

You can do this with jQuery in two steps.First from your view hit the desired controller action after the dom is ready or when an event is occurred. I have call controller here after the dom is ready. You can hit action get or post method as you wish.
Here in $.ajax I have used ( async: false ) so that the statement now I am calling has to be completed before the next statement in the function can be executed.

<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>

这是动作.该操作会将视图模型作为结果返回给ajax.post函数，并且在ajax post函数中，your_desired_div_id的内容将随部分视图的内容而改变.

Here is the action. The action return a view model as result to ajax.post function and in the ajax post function your your_desired_div_id content is changed with the partial view's contents.

 [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) 

        }

这篇关于使用JavaScript在ASP.NET MVC中加载部分视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！