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

本文关键字：添加 CSS JS PartialView AJAX 加载 | 更新日期: 2023-09-27 18:01:06

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

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

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

除了验证之外，一切都应该正常工作。您需要告诉jQuery您的新内容，以便对其进行验证。看见ASP.Net MVC：你能在AJAX/jQuery调用中使用数据注释/验证吗？

如果您只将PartialView加载到页面上一次，那么在正文中包含脚本和CSS应该没有问题。就像Adam所说的，如果你动态地包含一个HTML表单，你只需要告诉jQuery它就可以了

但是，如果您希望在页面上多次包含相同的PartialView，而不希望多次加载脚本。然后还有动态脚本加载程序，您可以使用它：

  • 当你加载AJAX时，你可以只从主页面调用一个，这样它只包含一次
  • 包括一项检查，以确保同一脚本不会多次加载

我之前不知道在body中使用脚本标记并不是坏事。所以这并没有我一开始想的那么糟糕。

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

谢谢你们的帮助，我认为有关验证的信息稍后会对我有所帮助：(

相关文章：