.NET MVC中关于ScriptBundle导致jquery 模态框未正常执行的问题

Posted 2023-03-30

我用的是VS2013 .NET MVC ，bootstrap 3 ，jquery 2
结果我在使用modal的过程中，发现一个很困惑的问题：
母页中已加入了：
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
关于ScriptBundle是这么写的
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-version.js"));
我想上面都没问题。
开个测试页，Controll 就不写了，Razor页添加如下：
<!--Button-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开始演示模态框</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body">
点击关闭按钮检查事件功能。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div>
</div>
</div>
<script>
$('#myModal').on('show.bs.modal', function ()

alert('嘿，我听说您喜欢模态框...');
)
</script>
运行下，居然没有响应alert()；

后来试来试去，用百度的CDN资源试一试，页面中加入了：
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

TMD 结果就有反应了，这是为什么？
ScriptBundle 难道是会压缩出错吗？哪个高手能帮我解决这个问题啊？
更改一个小错误 ，脚本修改如下
<script>
$(document).ready(function ()
$('#myModal').on('show.bs.modal', function ()
alert('嘿，我听说您喜欢模态框...');
)
);
</script>

参考技术A 你的jquery文件名叫什么？
你改成类似于下面的形式
jquery-*.js
星号是版本号
如：jquery-1.7.1.js追问

感谢您的回答，version 是没问题的，我找到问题所在了，是我的ScriptRender 对于jquery的引入必须在前，前后位置的关系。
把jquery 放在中，而不是放在页面的尾部，原先对VS2013自动生成代码没有疑问，这下要考虑了。

追答

你可以在浏览器中查看生成的代码，以确定有没有引用成功。你说的和位置有关系，还真没遇到过。我也在其它位置引用过，可以成功。或许是有其它的细节没注意吧。

ASP.NET MVC 4 ScriptBundle 返回空

【中文标题】ASP.NET MVC 4 ScriptBundle 返回空

【英文标题】：ASP.NET MVC 4 ScriptBundle returns empty

【发布时间】：2012-09-16 03:53:49

【问题描述】：

具体来说，我正在尝试在 MVC 4 中使用已经缩小的脚本创建一个 ScriptBundle，并返回这个相同的 Bundle，无论项目是否处于调试状态。

我的 Web 项目引用了 MVC Telerik Grid NuGet 包。在那个包中，Telerik 只提供了缩小的 JS 文件。捆绑代码如下。

        // telerik scripts
        bundles.Add(new ScriptBundle("~/scripts/bundles/telerik").Include(
            "~/Scripts/2012.1.214/telerik.common.min.js",
            "~/Scripts/2012.1.214/telerik.textbox.min.js",
            "~/Scripts/2012.1.214/telerik.calendar.min.js",
            "~/Scripts/2012.1.214/telerik.datepicker.min.js",
            "~/Scripts/2012.1.214/telerik.grid.min.js",
            "~/Scripts/2012.1.214/telerik.grid.filtering.min.js"));

其他 ScriptBundle 运行良好，但是当我的项目尝试引用此捆绑包时，请求显示为：scripts/bundles/telerik?v= Returning nothing。

如果我设置BundleTable.EnableOptimizations = true，那么它确实会返回 ScriptBundle 并引用特定版本，但是这种解决方案是不可接受的。

我不想强制设置 BundleTable.EnableOptimizations = true，因为我希望所有其他 Bundle 在适当的时候返回非缩小版本。

任何人都有类似的经历，如果有，解决方案是什么？

【参考方案1】：

我想你也有同样的问题，请看这个链接：mvc4 bundler not including .min files

将 .min.js 重命名为 .js 或执行以下操作：

    public static void AddDefaultIgnorePatterns(IgnoreList ignoreList)
    
        if (ignoreList == null)
            throw new ArgumentNullException("ignoreList");

        ignoreList.Clear();

        ignoreList.Ignore("*.intellisense.js");
        ignoreList.Ignore("*-vsdoc.js");
        ignoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
        //ignoreList.Ignore("*.min.js", OptimizationMode.WhenDisabled);
        ignoreList.Ignore("*.min.css", OptimizationMode.WhenDisabled);
    

【讨论】：

这似乎有效。我确实添加了 Clear() 方法调用，以便在 Ignore() 调用之前清除默认值。谢谢！