在MVC的部分视图中加载JQuery [英] Loading JQuery in Partial View on MVC

问题描述

我有一个ASP.NET MVC C#Web应用程序.

I have an ASP.NET MVC C# web application.

在我的布局文件中，我有以下ajax调用

In my layout file I have the following ajax call

  <li class="PriceModal">
                        @Ajax.ImageActionLink("/InternalDB/Content/downloadCSV.png", "Pareto", "35px", "35px", "PartialViewPriceCalculator",
                        "PriceCalculator", new {@Pareto = "active" }, new AjaxOptions
                        { UpdateTargetId = "PriceCalculator", InsertionMode = InsertionMode.Replace, HttpMethod = "GET"}, new { @style = "padding-top:30px" })
  </li>  

单击此Ajax链接后，将加载引导模态，并在Bootstrap Modal内部加载局部视图.此时，Bootstrap模态和内部局部视图位于我现有页面的顶部.

When this Ajax link is clicked a bootstrap Modal is loaded and a partial view is load inside the Bootstrap Modal. At this point the Bootstrap modal and the partial view inside are sitting on top of my existing page.

当我将jQuery代码放在部分View中时，我的问题开始了.我发现了一种使用以下代码将jQuery代码(部分)添加到DOM的方法

My problems start when I place jQuery code inside the partial View. I have found a way to append the jQuery code (partial) to the DOM with the following code

 $('body').on('jQuery event to be placed here(focus,change,mouseenter)', 'class/ID to be Placed here', function (e) {       
    // jQuery events 
});

这将允许我附加到我的页面在后台加载的DOM. 但是，这也有很多问题.如何将一个名为Chosen的jQuery插件附加到位于我的局部视图中的下拉列表中.

This will allow me to append to the DOM loaded by my page on the background. However this has a lot of issues as well. How do I append a jQuery plug in called Chosen to a dropdownlist which is sitting inside my partial view.

我通过将jQuery放在Ajax Options中并使用Onsuccess属性进行了尝试，但这似乎也有问题.

I have experimented by putting the jQuery inside the Ajax Options and using the Onsuccess property but this seems to have problems as well.

 <li class="PriceModal">
                        @Ajax.ImageActionLink("/InternalDB/Content/downloadCSV.png", "Pareto", "35px", "35px", "PartialViewPriceCalculator",
                        "PriceCalculator", new {@Pareto = "active" }, new AjaxOptions
                        { UpdateTargetId = "PriceCalculator", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", OnSuccess = "$('.chosen2').chosen({ allow_single_deselect : true })"}, new { @style = "padding-top:30px" })
  </li>  

是否有一种通用方法可以将所有需要的jQuery加载到弹出式局部视图中，或者我只需要针对每种特定情况查找技巧?

Is there a general approach to loading all of the needed jQuery inside a popup partial view or i just need to find hacks for each specific situation?

推荐答案

PartialView完成加载后，您可以使用document.ready事件执行JavaScript:

You can just use the document.ready event to execute JavaScript when your PartialView finishes loading:

<div id="partialViewHere">
</div>

<script type="application/javascript">
    $(function() {
        // load whatever you need here
    };
</script>

我在应用程序上使用它来向通过不同的PartialView加载的按钮添加事件，并且效果很好.

I use this on an application to add events to buttons loaded through different PartialViews and it works perfectly.

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