怎样局部更新Razor页面

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

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

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

怎样局部更新Razor页面

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

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

怎样局部更新Razor页面

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

怎样局部更新Razor页面

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

怎样局部更新Razor页面

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

怎样局部更新Razor页面

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

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

怎样局部更新Razor页面

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

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

推荐阅读:

ajax如何做出页面局部跳转功能

jQuery里ajax.load()方法应如何使用

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

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

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

(0)
上一篇 2025年3月8日 11:53:29
下一篇 2025年3月8日 11:53:35

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

相关推荐

  • 怎么使用Mobile控制页面返回时get请求

    这次给大家带来怎么使用Mobile控制页面返回时get请求,使用Mobile控制页面返回时get请求的注意事项有哪些,下面就是实战案例,一起来看一下。 问题描述 假设在项目中,有三个页面,分别是main.html、test1.html、te…

    2025年3月8日 编程技术
    200
  • 基于ID调用iframe页面(附代码)

    这次给大家带来基于ID调用iframe页面(附代码),基于ID调用iframe页面的注意事项有哪些,下面就是实战案例,一起来看一下。 $(window.parent.document).contents().find(“#iframeID”…

    编程技术 2025年3月8日
    200
  • 分享页面后跳转回首页

    这次给大家带来分享页面后跳转回首页,分享页面后跳转回首页的注意事项有哪些,下面就是实战案例,一起来看一下。 做小程序开发发现,页面分享出去后,用户通过分享进去的页面很难找到返首页的情况。(微信官方操作是点击右上角三个点,在手机下方显示返回首…

    2025年3月8日
    400
  • 怎么阻止vuex页面刷新后数据清除

    这次给大家带来怎么阻止vuex页面刷新后数据清除,阻止vuex页面刷新后数据清除的注意事项有哪些,下面就是实战案例,一起来看一下。 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会…

    2025年3月8日
    200
  • 不使用router-link实现页面跳转

    这次给大家带来不使用router-link实现页面跳转,不使用router-link实现页面跳转的注意事项有哪些,下面就是实战案例,一起来看一下。 1、给父页面跳转的地方设置事件 //原来的页面上展示的信息 编辑 //带参数进行编辑 删除 …

    2025年3月8日
    200
  • BubbleTransition如何实现页面切换功能

    这次给大家带来BubbleTransition如何实现页面切换功能,BubbleTransition实现页面切换功能的注意事项有哪些,下面就是实战案例,一起来看一下。   CodePen 地址 前端使用 SPA 之后,能获得更多的控制权,比…

    2025年3月8日
    200
  • nodejs通过响应回写渲染页面步骤详解

    这次给大家带来nodejs通过响应回写渲染页面步骤详解,nodejs通过响应回写渲染页面的注意事项有哪些,下面就是实战案例,一起来看一下。 我们一般通过node框架提供的api操作页面渲染,如何利用原始回写的方式来实现同样的功能呢 下面是通…

    编程技术 2025年3月8日
    200
  • JS有哪些属性可以判断页面是否存在滚动条

    这次给大家带来JS有哪些属性可以判断页面是否存在滚动条,JS判断页面是否存在滚动条的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代…

    2025年3月8日
    200
  • 微信小程序分享页面后跳转回首页

    这次给大家带来微信小程序分享页面后跳转回首页,微信小程序分享页面后跳转回首页的注意事项有哪些,下面就是实战案例,一起来看一下。 今天我分享另外一种方法。请看下面.gif; 有没有发现,左上角有返回按钮了。原理简单,在你要分享的页面,分享配置…

    2025年3月8日
    200
  • vue操作数据改变更新视图

    这次给大家带来vue操作数据改变更新视图,vue操作数据改变更新视图的注意事项有哪些,下面就是实战案例,一起来看一下。 前记 三个月前看了vue源码来分析如何做到响应式数据的, 文章名字叫vue源码之响应式数据, 最后分析到, 数据变化后会…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论