使用Ajax局部更新Razor頁(yè)面的實(shí)例代碼
Razor功能非常強(qiáng)大,但是本身并不能做到無(wú)刷新,所以需要配合ajax使用
本文就做一個(gè)簡(jiǎn)單例子,實(shí)現(xiàn)Razor配合ajax做到局部刷新。
首先,我們創(chuàng)建一個(gè)MVC項(xiàng)目
讓我們創(chuàng)建一個(gè)簡(jiǎn)單的Controller Book
然后對(duì)其添加一個(gè)視圖,并且添加上一些簡(jiǎn)單的Html代碼
@{ ViewBag.Title = "Index"; Layout = null; } <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2>Index</h2> @Html.ActionLink("點(diǎn)擊我", "Part","Book"); <div id="partial" ></div> @Scripts.Render("~/bundles/jquery") <script type="text/javascript"> $("a").click(function () { $.ajax({ url: "/Test/Book/Part/1", success: function (result) { console.log(result); $("#partial").html(result); }, error: function (msg) { console.log(msg); } }) return false; }); </script> </body> </html>
這里我添加了一個(gè)<div>,并且給了個(gè)id="partial",再我點(diǎn)擊@Html.ActionLink時(shí)會(huì)觸發(fā)javascript里的方法,使用ajax去訪問(wèn)/Test/Book/Part/1這個(gè)路徑,請(qǐng)求成功以后會(huì)在<div>里構(gòu)建我請(qǐng)求的Html,這其實(shí)就是局部刷新的原理
這是Part的代碼,然后我們給Part也添加一個(gè)視圖
Part的代碼可以非常簡(jiǎn)單,然后我們開(kāi)啟我們的項(xiàng)目
我們不斷點(diǎn)擊 按鈕“點(diǎn)擊我”
頁(yè)面就會(huì)不停的發(fā)生變化。
這里需要注意,在使用AJAX請(qǐng)求時(shí),Url一定要寫(xiě)完整,比如我的Controller在Area下的Book文件夾下名為T(mén)est,Action為Part,那么Url則是 /Test/Book/Part,不能缺少/Test,否則就會(huì)出現(xiàn)以下錯(cuò)誤
可以看到,如果Url沒(méi)有寫(xiě)全的話,Action返回的View其實(shí)是錯(cuò)誤的路徑。
總結(jié)
以上所述是小編給大家介紹的使用Ajax局部更新Razor頁(yè)面的實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Ajax 對(duì)象 包含post和get兩種異步傳輸方式
Ajax對(duì)象接受一個(gè)對(duì)象字面量為參數(shù),這個(gè)對(duì)象字面量中包含method,url,success,params,fail參數(shù)2009-07-07AJax 學(xué)習(xí)筆記二(onreadystatechange的作用)
初次接觸onreadystatechange這個(gè)事件句柄不知道有何用處,看過(guò)一篇文章的介紹之后,終有大致所了解。2010-04-04Ajax與用戶交互的JSON數(shù)據(jù)存儲(chǔ)格式
數(shù)據(jù)存儲(chǔ)是JavaScript的核心功能,適當(dāng)?shù)拇娣藕脭?shù)據(jù),就有利于我們組織起結(jié)構(gòu),又能使應(yīng)用程序稍后訪問(wèn)這些內(nèi)容更加容易。這篇文章給大家介紹了Ajax與用戶交互的JSON數(shù)據(jù)存儲(chǔ)格式,感興趣的朋友一起看看吧2016-11-11IE瀏覽器與FF瀏覽器關(guān)于Ajax傳遞參數(shù)值為中文時(shí)的區(qū)別實(shí)例分析
這篇文章主要介紹了IE瀏覽器與FF瀏覽器關(guān)于Ajax傳遞參數(shù)值為中文時(shí)的區(qū)別,結(jié)合實(shí)例分析說(shuō)明了ajax參數(shù)傳遞過(guò)程中的參數(shù)轉(zhuǎn)碼相關(guān)注意事項(xiàng)與使用技巧,需要的朋友可以參考下2015-12-12使用getJSON()異步請(qǐng)求服務(wù)器返回json格式數(shù)據(jù)的實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇使用getJSON()異步請(qǐng)求服務(wù)器返回json格式數(shù)據(jù)的實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06用AJAX實(shí)現(xiàn)的無(wú)刷新的分頁(yè)實(shí)現(xiàn)代碼(asp.net)
最近學(xué)習(xí)了AJAX技術(shù)。AJAX,指的是異步的Javascript和xml。它的基本原理就是頁(yè)面用Javascript發(fā)送一個(gè)異步的http請(qǐng)求到服務(wù)器,服務(wù)器返回?cái)?shù)據(jù)后,再用Javascript靜態(tài)的去更改頁(yè)面某個(gè)地方的值,而無(wú)需提交表單。2011-04-04