ajax 更新局部视图,使用Ajax局部更新Razor页面的实例代码

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

本文就做一个简单例子，实现Razor配合ajax做到局部刷新。

首先，我们创建一个MVC项目

让我们创建一个简单的Controller Book

然后对其添加一个视图，并且添加上一些简单的Html代码

ViewBag.Title = "Index";

Layout = null;

}

Index

@Html.ActionLink("点击我", "Part","Book");

@Scripts.Render("~/bundles/jquery")

$("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;

});

这里我添加了一个

,并且给了个id="partial"，再我点击@Html.ActionLink时会触发javascript里的方法，使用ajax去访问/Test/Book/Part/1这个路径，请求成功以后会在

里构建我请求的Html,这其实就是局部刷新的原理

这是Part的代码，然后我们给Part也添加一个视图

Part的代码可以非常简单，然后我们开启我们的项目

我们不断点击按钮“点击我”

页面就会不停的发生变化。

这里需要注意，在使用AJAX请求时，Url一定要写完整，比如我的Controller在Area下的Book文件夹下名为Test,Action为Part,那么Url则是 /Test/Book/Part，不能缺少/Test,否则就会出现以下错误

可以看到，如果Url没有写全的话，Action返回的View其实是错误的路径。

总结

以上所述是小编给大家介绍的使用Ajax局部更新Razor页面的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

ajax 更新局部视图,使用Ajax局部更新Razor页面的实例代码相关推荐

遥感影像图斑更新底图、影像局部更新
遥感影像图斑更新底图.影像局部更新图斑更新底图.影像局部更新操作步骤 1.加载需要处理的数据 2.生成镶嵌线 3.匀色处理 4.输出结果图斑更新底图.影像局部更新当影像部分区域需要更新替换时, ...
php+ajax+打开新页面跳转,ajax怎样跳转到新的jsp页面（附代码）
这次给大家带来ajax怎样跳转到新的jsp页面(附代码),ajax跳转到新的jsp页页的注意事项有哪些,下面就是实战案例,一起来看一下. ajax可以实现局部刷新页面,即在不刷新整个页面的情况下更新页 ...
Java工作笔记-AJAX实现整体不变，局部更新（与整体刷新比较）
old.js:整体刷新页面,才能实现数据刷新 new.js:点击刷新按钮,就可以刷新目录结构图如下: 源码如下: HelloServlet.java package my;import java.i ...
es数据频繁的更新_Elasticsearch之更新（全部更新和局部更新）
前面的基础, 首先,明确一个概念,es包括全部更新和局部更新! ES全部更新 ES可以使用PUT或者POST对文档进行更新(全部更新),如果指定ID的文档已经存在,则执行更新操作. 比如,我这里,id ...
ASP.NET Core Razor页面 vs MVC
作为.NET Core 2.0发行版的一部分,还有一些ASP.NET的更新.其中之一是添加了一个新的Web框架来创建"页面",而不需要复杂的ASP.NET MVC.新的Razor页 ...
使用EntityFramework Core和Enums作为字符串的ASP.NET Core Razor页面——第三部分
目录介绍使用代码添加项目和项目状态处理下载源文件 - 989.1 KB 介绍这是一篇由多部分组成的文章的第三部分,演示了通过EntityFramework Core 2.1(EF)将C#en ...
ajax 更新页面变量,[Django 1.5] jQuery/Ajax 在Django使用，如何更新模板里里变量
最近希望实现一个页面局部刷新的功能,于是开始查阅ajax资料.幸好现在ajax很多功能都封装在jQuery这个库里面,我们可以很方便去调用.通过学习几个简单的小例子,可以实现简单的前端代码更新,还有重 ...
jQuery与Ajax 面试题库（长期更新中...）
jQuery 部分: JavaScript 是客户端脚本的标准语言,而 jQuery 使得编写 JavaScript 更加简单.你可以只用写几行的jQuery 代码就能实现更多的东西. 它是最长被用到 ...
AJAX——与服务器交换数据并更新部分网页技术
简介 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML) ...
ES使用脚本进行局部更新的排错记录
初学Elasticsearch,在按照<Elasticsearch服务器开发(第2版)>进行学习的过程中,在P17页中1.4.5 更新文档小节,使用脚本对文档进行局部更新的时候遇到了如下报 ...

ajax 更新局部视图,使用Ajax局部更新Razor页面的实例代码

Index

ajax 更新局部视图,使用Ajax局部更新Razor页面的实例代码相关推荐

最新文章

热门文章