jquery - 如何在 asp.net mvc 4 中使用 jquery？

Question

我正在使用 ASP.Net 4 和 MVC 开发一个网站。我非常熟悉 WebForms 和 javascript，并且使用过 jquery，但捆绑让我感到困惑。据我所知，所有 javascript 文件都包含在 BundleConfig.cs 中，并与 site.master 文件中的 header 一起下载。因此，我应该能够将附加函数和 jquery 调用放入新标签中。

但很明显，jquery 函数进入文件的方式与我习惯的完全不同，而且我根本无法进行任何操作。

是否有任何简短的教程可以向我展示在 MVC 中执行此操作的正确方法？而不是 Razor，我在这里不需要两条学习曲线。

Answer 1

在 MVC 中没有“正确”的方法来执行此操作，这完全取决于您。

有几种常见的方法可以做到这一点。

您可以通过将 JQuery 函数放置在 script 中，将它们“内联”放置在 View 中。标签 例如

<script>
    $('a').click(function() { alert("Click"); } );
</script>

但是，通常不建议这样做，因为它会使 JS 更难管理和重用，并使 HTML 变得臃肿。如果您有一小段脚本，并且觉得不值得为其创建新文件，您可能只会这样做。

或者，您可以将 html 放置在单独的 js 文件中，并在 View 中包含对这些文件的引用，例如

<script src="~/Scripts/mycusomtjquery.js"></script>

这更好，因为它允许重复使用并且不会使您的 HTML 膨胀，而且浏览器能够缓存它。

更好的选择是利用 MVC 4 中的捆绑功能并使用它。将您的 js 放在单独的文件中，将其注册为 bundle ，然后将其呈现在您的 View 中

例如

在单独的文件中创建 js 并将自定义代码放入其中。

将其放入 App_Start\BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/mycustomjquery")
                    .Include("~/Scripts/mycustomjquery.js")
                    .Include("~/Scripts/myothercustomjquery.js"));

添加调用以在 View 中渲染包

@Scripts.Render("~/bundles/mycustomjquery")

这将以缩小和合并的方式渲染你的js，可以由浏览器缓存。

您可以根据需要进行配置。选择如何捆绑 js 文件、要制作多少个实际 js 文件、在何处渲染它们等。