在 AJAX 加载的 PartialView 中添加 CSS 和 JS答案

【问题标题】：Add CSS and JS in AJAX-loaded PartialView在 AJAX 加载的 PartialView 中添加 CSS 和 JS
【发布时间】：2011-09-27 19:32:06
【问题描述】：

我找到了许多关于类似主题的答案，但都是指不是由 AJAX 加载的 PartialViews，其中解决方案是例如HtmlHelpers 或 Head 部分，但是当我通过 AJAX 加载 PartialView 时它不起作用。

我想在 AJAX 加载的 PartialView 中添加 CSS 样式表和 JS 脚本。现在我在 PartialView 中对其进行了编码，它可以工作，但它不是一个好的解决方案（在正文中包含脚本和样式表）。

【问题讨论】：

可以在加载主页面的同时加载css和js文件吗？
如果它会那么容易;）遗憾的是没有......例如我必须添加一些 jquery 脚本，这些脚本适用于仅存在于该 PartialView 中的 div，因此如果我在 Layout 中较早添加该脚本，它将无法正常工作。
我并没有说这很容易，本质上... :D 如果你用选择器和你的 jQuery 封装你的 css 在函数中，你可以在你的回调中调用这个函数，对吗？

标签： c# ajax asp.net-mvc-3 razor partial-views

【解决方案1】：

除了验证之外，一切都应该正常工作。你需要告诉 jQuery 你的新内容以便验证它。看 ASP.Net MVC: Can you use Data Annotations / Validation with an AJAX / jQuery call?

【讨论】：

【解决方案2】：

如果您只在页面上加载一次 PartialView，那么在正文中包括脚本和 CSS 应该没有问题。就像亚当说的那样，如果你动态地包含一个 HTML 表单，你只需要告诉 jQuery 就可以看到这里ASP.Net MVC 3 client side validation with a dynamic form

但是，如果您想在页面上多次包含相同的 PartialView 并且不想多次加载脚本。然后是您可以使用的动态脚本加载器：

当您加载 AJAX 时，您只能从主页调用一个，以便它只包含一次
包括一项检查以确保没有多次加载相同的脚本。

【讨论】：

【解决方案3】：

我之前不知道在正文中使用脚本标签并不是邪恶的。所以这并没有我一开始想的那么糟糕。

我在 cssLink.js 中实现了两个函数，我包含在 head 中：

/// <reference path="../jquery-1.4.4.js" />

function addCssLink(link) {
    var _cssLink = '<link rel=\"stylesheet\" href=\"' + link + '\" type=\"text/css\" />';
    $head = $('head');
    $link = $('link[href=' + link + ']', $head);
    if ($link.length == 0) {
        $head.append(_cssLink);
    }
}

function removeCssLink(link) {
    $('head link[href=' + link + ']').remove();
}

我在 PartialViews 中使用这些函数：

<script type="text/javascript">
    $(document).ready(function () {
        $('#sideMenu').tabs('#content', '#content > *');
        addCssLink('/Content/SideMenu.css');
    });
</script>

<script type="text/javascript">
    $(document).ready(function () {
        removeCssLink('/Content/SideMenu.css');
    });
</script>

谢谢你们的帮助，我认为关于验证的信息应该对我以后有帮助:)

【讨论】：