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

Question

我正在使用ASP.Net 4和MVC的网站上工作.我对WebForms和javascript很熟悉,并且使用过jquery,但捆绑让我感到困惑.据我所知,所有的javascript文件都包含在BundleConfig.cs中,并通过site.master文件中的标题下载.所以,我应该能够将我的附加函数和jquery调用放在新标签中.

但很明显,jquery函数应该进入文件的方式与我习惯的方式完全不同,而且根本无法获得任何操作.

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

Answer 1

在MVC中没有"正确"的方法,完全取决于你.

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

您可以将JQuery函数放入script标记中,例如,将它们放置在视图中

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

但是,通常不建议这样做,因为它会使您的JS难以管理和重用,并使您的HTML变得臃肿.如果你有一个真正的小块脚本,你可能只会这样做,并且不觉得值得创建一个新文件.

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

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

这样做更好,因为它允许重复使用并且不会使HTML膨胀,而且浏览器能够缓存它.

更好的选择是利用MVC 4中的Bundling功能并使用它.将您的js放在一个单独的文件中,将其注册为一个包,并在您的视图中呈现它

例如

在单独的文件中创建js并将自定义代码放在那里.

将其放在App_Start\BundleConfig.cs中

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

添加一个调用以在视图中呈现包

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

这将使你的js以一种可以由broswer缓存的minfied和merged方式呈现.

您可以配置它以适应.选择如何捆绑你的js文件,要制作多少个实际的js文件,在哪里渲染它们等等.

Answer 2

我不明白你的问题，但你知道bundle是什么吗？首先，看一下这个 artciel 以了解完整的功能： http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

您不需要在 asp.net mvc 中使用 Bundles。您只需将其从项目中删除，然后将 javascript 文件添加到布局页面中即可，不会出现任何问题。您可以手动添加到布局页面中，并将函数添加到另一个 js 文件中，并包含在视图（或布局）上。Asp.Net MVC 是与 WebForms 相比的另一种方法。

Razor 是一个 Viewengine，您可以使用@char 编写服务器端代码，例如：@Html.TextBox("Name")我们从 asp.net mvc 3 开始就有这种代码，但您也可以编写 ASPX 引擎，例如：就像<%: Html.TextBox("Name") %>在 WebForms 中执行某些操作一样。（我推荐 Razor，因为它的写入、读取和使用速度更快）。

了解有关 ViewEngines 的更多信息： http://weblogs.asp.net/scottgu/archive/2010/07/02/introducing-razor.aspx