快捷導(dǎo)航

如何在MVC應(yīng)用程序中使用Jquery

更新時(shí)間：2014年11月17日 15:27:11 投稿：hebedich

這篇文章主要介紹了如何在MVC應(yīng)用程序中使用Jquery，并附上示例，給需要的小伙伴們參考下吧

　　前言：轉(zhuǎn)眼間，已經(jīng)是11月中旬了，也從今天開(kāi)始我要繼續(xù)在研究ASP.NET MVC的細(xì)節(jié)用法，所以將這些讀書(shū)筆記和個(gè)人心得寫(xiě)成博客，讓大家也能學(xué)習(xí)到東西，我閱讀的書(shū)籍是：ASP.NET MVC高級(jí)編程,下面我就說(shuō)說(shuō)MVC中如何使用JavaScript和Jquery。還有我們現(xiàn)在經(jīng)常使用的Ajax。

1.Ajax初步介紹

　　(1) 現(xiàn)在我們創(chuàng)建的Web應(yīng)用程序幾乎都要用到Ajax技術(shù)，從技術(shù)上面講，Ajax代表異步JavaScript和XML(Asynchronous JavaScript and XML，Ajax)。在實(shí)際應(yīng)用中，他代表在構(gòu)建具有良好用戶(hù)體驗(yàn)的響應(yīng)性Web應(yīng)用程序時(shí)用到的所有技術(shù)。

　　(2) ASP.NET MVC4是一個(gè)現(xiàn)代的Web框架，并且他跟其他現(xiàn)代Web框架一樣，從一開(kāi)始就支持Ajax技術(shù)，Ajax支持的核心來(lái)自于開(kāi)源的JavaScript庫(kù)Jquery。

　　(3) 如果我們想要在MVC中使用Ajax,我們就要學(xué)習(xí)Jquery，關(guān)于Jquery不是這篇博客的主要，所以沒(méi)有學(xué)習(xí)過(guò)的我建議初步的學(xué)習(xí)一樣，我的Jquery學(xué)習(xí)來(lái)源于《鋒利的Jquery》。

2.如何在MVC應(yīng)用程序中使用Jquery

　　(1) 當(dāng)使用Visual Studio項(xiàng)目模版創(chuàng)建新的ASP.NET MVC項(xiàng)目時(shí)，它會(huì)默認(rèn)生成使用Jquery需要的所有內(nèi)容，每個(gè)新項(xiàng)目中都回包含一個(gè)Scripts文件夾，里面帶有很多個(gè).js文件，各位可以新建一個(gè)mvc項(xiàng)目看看，如圖所示：

　　(2) JQuery核心庫(kù)是一個(gè)名為Jquery-<version>.js的文件，因?yàn)槲沂褂玫腣S是2012，所以Jquery的版本是1.7.1，這個(gè)文件中包含了JQuery源代碼的可注釋版本。還有一個(gè)Jquery-<version>.min.js文件，精簡(jiǎn)的JavaScript文件在他們的名稱(chēng)中包含了“.min”,顧名思義，他們占用的空間要小于對(duì)應(yīng)的非精簡(jiǎn)文件（通常情況下要小一半）。他們不包含不必要的空白字符，也不包含注釋?zhuān)⑶宜芯植孔兞棵Q(chēng)的長(zhǎng)度都是一個(gè)字符，如果打開(kāi)一個(gè)精簡(jiǎn)文件，你會(huì)看到一堆不可讀的JavaScript代碼。如圖所示：

　　(2) 精簡(jiǎn)的JavaScript腳本文件在客戶(hù)端的行為以及實(shí)現(xiàn)的功能與非精簡(jiǎn)文件一樣，然而，由于精簡(jiǎn)文件叫較小，因此通常都是盡可能的向客戶(hù)端發(fā)送精簡(jiǎn)文件(因?yàn)樗梢詼p少下載的數(shù)據(jù)字節(jié)數(shù)，從而加快加載與運(yùn)行的速度)。

　　(3) ASP.NET MVC應(yīng)用程序中默認(rèn)的布局試圖(_Layout.cshtml)通常情況下用下面的腳本標(biāo)簽引用Jquery的精簡(jiǎn)版本：

　　注解：在MVC中如果要使用Jquery,需要將上面的腳本標(biāo)簽通過(guò)布局視圖放在HTML標(biāo)記中。

3.在節(jié)點(diǎn)中放置腳本

　　(1) 向輸出中注入腳本的另一種方式是定義用來(lái)防治腳本的Razor節(jié)，例如：在布局視圖(_Layout.cshtml)中，可以渲染一個(gè)名為Scripts的節(jié)點(diǎn)，并且將其設(shè)置為可選。代碼如下：

　　　　<head>

　　　　<title>@ViewBag.Title</title>

　　　　@RenderSection("scripts", required: false);

　　　　</head>

　　(2)現(xiàn)在我們可以在引用布局的任何視圖中添加腳本姐，用來(lái)向該試圖的頭部注入特定的腳本：Index.cshtml

　　　　@{

　　　　　ViewBag.Title = "主頁(yè)";

　　　　}

　　　　@section scripts{

　　　　}

　　(3) 這時(shí)候我們按F5運(yùn)行網(wǎng)站，打開(kāi)網(wǎng)站首頁(yè)：http://localhost:34147/home/index，我們可以看到我們添加的jquery.validate.js文件顯示在引用JS的最下面了。如圖所示：

　　(4) 上面介紹的方法可以設(shè)置腳本標(biāo)簽的準(zhǔn)確位置，以確保需要的腳本以合適的順序出現(xiàn)。

4.Scripts目錄下的其他文件

　　(1)下來(lái)我們探討一下當(dāng)我們創(chuàng)建MVC應(yīng)用程序的時(shí)候，系統(tǒng)默認(rèn)的已經(jīng)為我們添加了一個(gè)文件夾Scripts，里面有很多的JavaScript文件，那么這些文件是干什么的？下面我們分開(kāi)說(shuō)一下

　　(2)除了Jquery核心庫(kù)之外，Scripts目錄中還包含兩個(gè)Jquery插件：Jquery UI和Jquery驗(yàn)證，這些擴(kuò)展增加了Jquery核心庫(kù)的能力。

　　(3)有人可能也發(fā)現(xiàn)了在Scripts中還存在名稱(chēng)中包含”vsdoc”的文件，這些文件是專(zhuān)門(mén)協(xié)助Visual Studio更好的提供智能感知功能服務(wù)的，在程序中沒(méi)必要直接引用這些文件，也沒(méi)有必要把他們發(fā)送到客戶(hù)端，當(dāng)使用自定義的腳本文件中的引用腳本時(shí)，Visual Studio會(huì)自動(dòng)發(fā)現(xiàn)這些文件。

　　(4)目錄里名稱(chēng)中包含”unobtrusive”字樣的文件是由Microsoft編寫(xiě)的，這些非侵入式腳本集成了Jquery和ASP.NET MVC框架，從而提供了前面提到的非侵入式JavaScript特性，如果要實(shí)現(xiàn)ASP.NET MVC框架的Ajax特性，就需要使用這些文件。

　　(5)目錄中還包含一些名稱(chēng)以單詞Microsoft開(kāi)頭的文件(像MicrosoftAjax.js)，它們要么包含Microsoft Ajax庫(kù)，要么在Microsoft Ajax庫(kù)的基礎(chǔ)上進(jìn)行構(gòu)建，因?yàn)锳SP.NET MVC3應(yīng)用程序默認(rèn)依賴(lài)與Jquery，所以在ASP.NET MVC3框架下創(chuàng)建的程序不需要這些文件，因此可以安全的將它們從應(yīng)用程序中移除，這里之所以包含這些文件，主要是為了實(shí)現(xiàn)向后兼容。

好了，今天就先到這里吧，詳細(xì)小伙伴們已經(jīng)知道如何在MVC中使用jQuery了，后續(xù)我們?cè)賮?lái)深入的探討下

您可能感興趣的文章: