使用Ajax局部更新Razor頁面的實(shí)例代碼

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:51:39

使用Ajax局部更新Razor頁面的實(shí)例代碼

使用Ajax局部更新Razor頁面的實(shí)例代碼:Razor功能非常強(qiáng)大，但是本身并不能做到無刷新，所以需要配合ajax使用本文就做一個(gè)簡單例子，實(shí)現(xiàn)Razor配合ajax做到局部刷新。首先，我們創(chuàng)建一個(gè)MVC項(xiàng)目讓我們創(chuàng)建一個(gè)簡單的Controller Book 然后對其添加一個(gè)視圖，并且添加上一些簡單的Html代碼

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀使用Ajax局部更新Razor頁面的實(shí)例代碼:Razor功能非常強(qiáng)大，但是本身并不能做到無刷新，所以需要配合ajax使用本文就做一個(gè)簡單例子，實(shí)現(xiàn)Razor配合ajax做到局部刷新。首先，我們創(chuàng)建一個(gè)MVC項(xiàng)目讓我們創(chuàng)建一個(gè)簡單的Controller Book 然后對其添加一個(gè)視圖，并且添加上一些簡單的Html代碼

Razor功能非常強(qiáng)大，但是本身并不能做到無刷新，所以需要配合ajax使用

本文就做一個(gè)簡單例子，實(shí)現(xiàn)Razor配合ajax做到局部刷新。

首先，我們創(chuàng)建一個(gè)MVC項(xiàng)目

讓我們創(chuàng)建一個(gè)簡單的Controller Book

然后對其添加一個(gè)視圖，并且添加上一些簡單的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去訪問/Test/Book/Part/1這個(gè)路徑，請求成功以后會(huì)在<div>里構(gòu)建我請求的Html,這其實(shí)就是局部刷新的原理