如何在MVC應(yīng)用程序中使用Jquery
前言:轉(zhuǎn)眼間,已經(jīng)是11月中旬了,也從今天開始我要繼續(xù)在研究ASP.NET MVC的細(xì)節(jié)用法,所以將這些讀書筆記和個(gè)人心得寫成博客,讓大家也能學(xué)習(xí)到東西,我閱讀的書籍是:ASP.NET MVC高級(jí)編程,下面我就說說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)建具有良好用戶體驗(yàn)的響應(yīng)性Web應(yīng)用程序時(shí)用到的所有技術(shù)。
(2) ASP.NET MVC4是一個(gè)現(xiàn)代的Web框架,并且他跟其他現(xiàn)代Web框架一樣,從一開始就支持Ajax技術(shù),Ajax支持的核心來自于開源的JavaScript庫Jquery。
(3) 如果我們想要在MVC中使用Ajax,我們就要學(xué)習(xí)Jquery,關(guān)于Jquery不是這篇博客的主要,所以沒有學(xué)習(xí)過的我建議初步的學(xué)習(xí)一樣,我的Jquery學(xué)習(xí)來源于《鋒利的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核心庫是一個(gè)名為Jquery-<version>.js的文件,因?yàn)槲沂褂玫腣S是2012,所以Jquery的版本是1.7.1,這個(gè)文件中包含了JQuery源代碼的可注釋版本。還有一個(gè)Jquery-<version>.min.js文件,精簡(jiǎn)的JavaScript文件在他們的名稱中包含了“.min”,顧名思義,他們占用的空間要小于對(duì)應(yīng)的非精簡(jiǎn)文件(通常情況下要小一半)。他們不包含不必要的空白字符,也不包含注釋,并且所有局部變量名稱的長度都是一個(gè)字符,如果打開一個(gè)精簡(jiǎn)文件,你會(huì)看到一堆不可讀的JavaScript代碼。如圖所示:
(2) 精簡(jiǎn)的JavaScript腳本文件在客戶端的行為以及實(shí)現(xiàn)的功能與非精簡(jiǎn)文件一樣,然而,由于精簡(jiǎn)文件叫較小,因此通常都是盡可能的向客戶端發(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)版本:
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
注解:在MVC中如果要使用Jquery,需要將上面的腳本標(biāo)簽通過布局視圖放在HTML標(biāo)記中。
3.在節(jié)點(diǎn)中放置腳本
(1) 向輸出中注入腳本的另一種方式是定義用來防治腳本的Razor節(jié),例如:在布局視圖(_Layout.cshtml)中,可以渲染一個(gè)名為Scripts的節(jié)點(diǎn),并且將其設(shè)置為可選。代碼如下:
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
@RenderSection("scripts", required: false);
</head>
(2)現(xiàn)在我們可以在引用布局的任何視圖中添加腳本姐,用來向該試圖的頭部注入特定的腳本:Index.cshtml
@{
ViewBag.Title = "主頁";
}
@section scripts{
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
}
(3) 這時(shí)候我們按F5運(yùn)行網(wǎng)站,打開網(wǎng)站首頁:http://localhost:34147/home/index,我們可以看到我們添加的jquery.validate.js文件顯示在引用JS的最下面了。如圖所示:
(4) 上面介紹的方法可以設(shè)置腳本標(biāo)簽的準(zhǔn)確位置,以確保需要的腳本以合適的順序出現(xiàn)。
4.Scripts目錄下的其他文件
(1)下來我們探討一下當(dāng)我們創(chuàng)建MVC應(yīng)用程序的時(shí)候,系統(tǒng)默認(rèn)的已經(jīng)為我們添加了一個(gè)文件夾Scripts,里面有很多的JavaScript文件,那么這些文件是干什么的?下面我們分開說一下
(2)除了Jquery核心庫之外,Scripts目錄中還包含兩個(gè)Jquery插件:Jquery UI和Jquery驗(yàn)證,這些擴(kuò)展增加了Jquery核心庫的能力。
(3)有人可能也發(fā)現(xiàn)了在Scripts中還存在名稱中包含”vsdoc”的文件,這些文件是專門協(xié)助Visual Studio更好的提供智能感知功能服務(wù)的,在程序中沒必要直接引用這些文件,也沒有必要把他們發(fā)送到客戶端,當(dāng)使用自定義的腳本文件中的引用腳本時(shí),Visual Studio會(huì)自動(dòng)發(fā)現(xiàn)這些文件。
(4)目錄里名稱中包含”unobtrusive”字樣的文件是由Microsoft編寫的,這些非侵入式腳本集成了Jquery和ASP.NET MVC框架,從而提供了前面提到的非侵入式JavaScript特性,如果要實(shí)現(xiàn)ASP.NET MVC框架的Ajax特性,就需要使用這些文件。
(5)目錄中還包含一些名稱以單詞Microsoft開頭的文件(像MicrosoftAjax.js),它們要么包含Microsoft Ajax庫,要么在Microsoft Ajax庫的基礎(chǔ)上進(jìn)行構(gòu)建,因?yàn)锳SP.NET MVC3應(yīng)用程序默認(rèn)依賴與Jquery,所以在ASP.NET MVC3框架下創(chuàng)建的程序不需要這些文件,因此可以安全的將它們從應(yīng)用程序中移除,這里之所以包含這些文件,主要是為了實(shí)現(xiàn)向后兼容。
好了,今天就先到這里吧,詳細(xì)小伙伴們已經(jīng)知道如何在MVC中使用jQuery了,后續(xù)我們?cè)賮砩钊氲奶接懴?/p>
- ASP.NET MVC引入JQUERY JQRTE控件
- 使用jQuery向asp.net Mvc傳遞復(fù)雜json數(shù)據(jù)-ModelBinder篇
- 使用Asp.net Mvc3 Razor視圖方式擴(kuò)展JQuery UI Widgets方法介紹
- 使用ASP.NET MVC 4 Async Action+jQuery實(shí)現(xiàn)消息通知機(jī)制的實(shí)現(xiàn)代碼
- 基于MVC3方式實(shí)現(xiàn)下拉列表聯(lián)動(dòng)(JQuery)
- .net mvc頁面UI之Jquery博客日歷控件實(shí)現(xiàn)代碼
- jquery提交表單mvc3后臺(tái)處理示例
相關(guān)文章
基于JQuery實(shí)現(xiàn)的圖片自動(dòng)進(jìn)行縮放和裁剪處理
頁面加載后,對(duì)不合比例的圖片自動(dòng)進(jìn)行縮放和裁剪處理,兼容圖像已在緩存或不在緩存的情況,基于JQuery2014-01-01jquery應(yīng)用實(shí)例分享_實(shí)現(xiàn)手風(fēng)琴特效
下面小編就為大家分享一篇jquery應(yīng)用實(shí)例_實(shí)現(xiàn)手風(fēng)琴特效的示例代碼。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02基于jQuery的實(shí)現(xiàn)簡(jiǎn)單的分頁控件
分頁控件需要向后臺(tái)發(fā)送請(qǐng)求,發(fā)送的參數(shù)包括當(dāng)前頁,每頁顯示數(shù)量,查詢條件;并且獲取數(shù)據(jù)加載到當(dāng)前頁面2010-10-10jQuery無刷新上傳之uploadify3.1簡(jiǎn)單使用
本文主要介紹jQuery插件uploadify3.1的簡(jiǎn)單使用,希望能幫到大家,有需要的朋友可以參考一下。2016-06-06jQuery源碼分析-03構(gòu)造jQuery對(duì)象-源碼結(jié)構(gòu)和核心函數(shù)
jQuery源碼分析-03構(gòu)造jQuery對(duì)象-源碼結(jié)構(gòu)和核心函數(shù),需要的朋友可以參考下。2011-11-11jQuery 翻頁組件yunm.pager.js實(shí)現(xiàn)div局部刷新的思路
翻頁插件有很多種,做出來的效果都非常棒,這篇文章主要介紹了jQuery 翻頁組件yunm.pager.js實(shí)現(xiàn)div局部刷新的思路,非常不錯(cuò),需要的朋友可以參考下2016-08-08jquery移除了live()、die(),新版事件綁定on()、off()的方法
下面小編就為大家?guī)硪黄猨query移除了live()、die(),新版事件綁定on()、off()的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10jquery仿京東導(dǎo)航/仿淘寶商城左側(cè)分類導(dǎo)航下拉菜單效果
jquery實(shí)現(xiàn)下拉菜單效果,jquery寫的仿京東導(dǎo)航菜單,一個(gè)經(jīng)典的左側(cè)多級(jí)導(dǎo)航菜單,學(xué)會(huì)了可以任意改變布局,感興趣的朋友可以參考下哈,希望對(duì)你有所幫助2013-04-04