在 MVC 的分部视图中加载 JQuery

Question

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

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

  <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 link 时，将加载 bootstrap 模态框，并在 Bootstrap 模态框内加载局部视图。此时 Bootstrap 模式和内部的部分视图位于我现有页面的顶部。

当我在部分视图中放置 jQuery 代码时，我的问题就开始了。我找到了一种使用以下代码

将 jQuery 代码（部分）附加到 DOM 的方法

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

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

我已经尝试将 jQuery 放在 Ajax 选项中并使用 Onsuccess 属性但这似乎也有问题。

 <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，或者我只需要为每种特定情况寻找技巧？

Answer 1

您可以只使用 document.ready 事件在您的 PartialView 完成加载时执行 JavaScript：

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

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

我在一个应用程序上使用它来向通过不同 PartialView 加载的按钮添加事件并且它工作得很好。

在 MVC 的分部视图中加载 JQuery

Loading JQuery in Partial View on MVC

c#

model-view-controller

jquery

asp.net-mvc-partialview

bootstrap-modal