使用Ajax局部更新Razor页面的实例代码

2024-09-01 08:27:02

字体：大中小

来源：转载

供稿：网友

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