使用Ajax局部更新Razor頁面的實例代碼

來源：懂視網責編：小采時間：2020-11-27 22:51:39

使用Ajax局部更新Razor頁面的實例代碼

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

推薦度：

點擊下載本文 文檔為doc格式

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

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

本文就做一個簡單例子，實現Razor配合ajax做到局部刷新。

首先，我們創建一個MVC項目

讓我們創建一個簡單的Controller Book

然后對其添加一個視圖，并且添加上一些簡單的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("點擊我", "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>

這里我添加了一個<div>,并且給了個id="partial"，再我點擊@Html.ActionLink時會觸發javascript里的方法，使用ajax去訪問/Test/Book/Part/1這個路徑，請求成功以后會在<div>里構建我請求的Html,這其實就是局部刷新的原理