Ajax局部更新Razor页面的方法详解

这次给大家带来Ajax局部更新Razor面的方法详解,Ajax局部更新Razor页面的注意事项有哪些,下面就是实战案例,一起来看一下。

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

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

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

Ajax局部更新Razor页面的方法详解

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

Ajax局部更新Razor页面的方法详解

然后对其添加一个视图,并且添加上一些简单的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,这其实就是局部刷新的原理

Ajax局部更新Razor页面的方法详解

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

Ajax局部更新Razor页面的方法详解

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

Ajax局部更新Razor页面的方法详解

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

Ajax局部更新Razor页面的方法详解

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

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

Ajax局部更新Razor页面的方法详解

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

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

AjaxFileUpload怎么动态的添加文件上传框

AJAX如何检测用户名是否具有重复性

以上就是Ajax局部更新Razor页面的方法详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2777255.html

(0)
上一篇 2025年3月8日 15:03:33
下一篇 2025年3月8日 15:03:40

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • ajax异步下载文件的实现方法

    这次给大家带来ajax异步下载文件的实现方法,ajax异步下载文件的注意事项有哪些,下面就是实战案例,一起来看一下。 摘要: ajax请求一个二进制流(文件),转换为Blob进行处理或者下载保存文件 需求 管理后台需要随时下载数据报表,数据…

    编程技术 2025年3月8日
    200
  • Ajax怎么实现上传前先预览图片的功能

    这次给大家带来Ajax怎么实现上传前先预览图片的功能,Ajax实现上传前先预览图片功能的注意事项有哪些,下面就是实战案例,一起来看一下。 手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所…

    2025年3月8日
    200
  • ajax文件异步实现表单上传

    这次给大家带来ajax文件异步实现表单上传,ajax文件异步实现表单上传的注意事项有哪些,下面就是实战案例,一起来看一下。 项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Fi…

    编程技术 2025年3月8日
    200
  • kkpager实现ajax分页查询功能详解(附代码)

    这次给大家带来kkpager实现ajax分页查询功能详解(附代码),kkpager实现ajax分页查询功能详解的注意事项有哪些,下面就是实战案例,一起来看一下。 前台分页数据,适合数据少量的时候,因为分页的数据是从后台获取的,大数据的话不建…

    2025年3月8日
    200
  • 用CORS实现WebApi Ajax跨域请求的方法

    这次给大家带来用CORS实现WebApi Ajax跨域请求的方法,用CORS实现WebApi Ajax跨域请求的注意事项有哪些,下面就是实战案例,一起来看一下。 概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件…

    编程技术 2025年3月8日
    200
  • Ajax实现检测网站劫持的方法

    这次给大家带来Ajax实现检测网站劫持的方法,Ajax实现检测网站劫持的注意事项有哪些,下面就是实战案例,一起来看一下。 https可以彻底解决劫持的问题。但是一般虚拟主机都不支持 https,难道http只能任流氓们恶意劫持么? 既然只有…

    2025年3月8日
    200
  • FormData与Spring MVC实现Ajax文件下载功能

    这次给大家带来FormData与Spring MVC实现Ajax文件下载功能,FormData与Spring MVC实现Ajax文件下载功能的注意事项有哪些,下面就是实战案例,一起来看一下。 Ajax文件下载 利用 FormData 对象和…

    编程技术 2025年3月8日
    200
  • Ajax返回数据之前怎么做出loading的等待动画效果

    这次给大家带来Ajax返回数据之前怎么做出loading的等待动画效果,Ajax返回数据之前做出loading等待动画效果的注意事项有哪些,下面就是实战案例,一起来看一下。 首先,我们通过ajax请求,向后台传递参数,然后后台经过一系列的运…

    编程技术 2025年3月8日
    200
  • Ajax怎么通过response在后台传递数据?(附代码)

    这次给大家带来Ajax怎么通过response在后台传递数据?(附代码),Ajax通过response在后台传递数据的注意事项有哪些,下面就是实战案例,一起来看一下。 这是js代码: var System = { getHttpReques…

    编程技术 2025年3月8日
    200
  • Ajax实现跨域请求的步骤详解

    这次给大家带来Ajax实现跨域请求的步骤详解,Ajax实现跨域请求的注意事项有哪些,下面就是实战案例,一起来看一下。 下面我们在本地建两个站点演示一下 第一步首先我们在本地搭建好一个Apache服务器;下载地址; 第二步服务器配置好以后,在…

    2025年3月8日 编程技术
    200

发表回复

登录后才能评论