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

2024-09-01 08:30:54

字體：大中小

來源：轉載

供稿：網友

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,這其實就是局部刷新的原理