ASP.Net Core使用Ajax局部更新
由于目前ASP.NET Core中没有提供Ajax帮助器,所以参照 上一篇帖文,使用data-ajax-*属性来使用jQuery Unobtrusive Ajax功能实现HTML的局部页面元素更新。
在.cshtml文件中,根据文章分页,分别生成各页链接:
<div id="content">
@if (Model.ContentArray.Count() > 1)
{
@Html.Raw(Model.ContentArray[0])
}
else
{
@Html.Raw(Model.CurrentAtricle.Content)
}
</div> <ul class="pagination offset-5">
@for (int i = 0; i < Model.ContentArray.Length; i++)
{
<li class="page-item">
<a asp-controller="Home" asp-action="GetContent" asp-route-articleId="@Model.CurrentAtricle.ArticleId"
asp-route-num="@i" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace"
data-ajax-update="#content" class="mypager page-link">@(i + 1)</a>
</li>
@:
}
</ul>
为了实现局部更新,我在其中分页链接<a>标记元素中插入了多条data-ajax-*属性:
data-ajax-method="GET"表示提交方式为GET;data-ajax-mode="replace"表示更新方式为替换原有内容;data-ajax-updage="#content"表示替换id号为content元素下的内容。
这样,通过分页链接就可以分别获取内容进行局部更新了。
链接中用到了自定义的GetContent方法,通过文章id和页索引num进行检索,返回根据分页标志生成的文章内容数组元素。如下:
public IActionResult GetContent(int articleId, int num = )
{
Article article = _articleService.Find(articleId); if (article == null)
{
return NotFound();
} string[] contentArray = Regex.Split(article.Content, "_ueditor_page_break_tag_", RegexOptions.IgnoreCase); if (contentArray.Length > && num < contentArray.Length)
{
return Content(contentArray[num]);
}
else if (contentArray.Length == )
{
return Content(contentArray[]);
} return Content(null);
}
ASP.Net Core使用Ajax局部更新的更多相关文章
- asp.net core 通过ajax上传图片及wangEditor图片上传
asp.net core 通过ajax上传图片 .net core前端代码,因为是通过ajax调用,首先要保证ajax能调用后台代码,具体参见上一篇.net core 使用ajax调用后台代码. 前端 ...
- .NET Core 3.0 Preview 6中对ASP.NET Core和Blazor的更新
我们都知道在6月12日的时候微软发布了.NET Core 3.0的第6个预览版.针对.NET Core 3.0的发布我们国内的微软MVP-汪宇杰还发布的官翻版的博文进行了详细的介绍.具体的可以关注&q ...
- ASP.NET Core Web API 索引 (更新Identity Server 4 视频教程)
GraphQL 使用ASP.NET Core开发GraphQL服务器 -- 预备知识(上) 使用ASP.NET Core开发GraphQL服务器 -- 预备知识(下) [视频] 使用ASP.NET C ...
- [文章汇总]ASP.NET Core框架揭秘[最近更新:2018/10/31]
之前一段时间都在个人公众号账号“大内老A”发布关于ASP.NET Core的系列文章,很多人留言希望能够同步到这里,所以在这里 对这些文章做一个汇总,以便于PC端阅读.如果说微软官方文档主要关于ASP ...
- Asp.net core中实现自动更新的Option
Asp.net core可以监视json.xml等配置文件的变化, 自动刷新内存中的配置内容, 但如果想每隔1秒从zookeeper.consul获取最新的配置信息, 需要自己实现. 阅读了 Asp. ...
- roadflow asp.net core版工作流引擎更新发布
ROADFLOW CORE (.NET CORE工作流引擎)更新说明 1.RoadFlow全新工作流平台采用.NET CORE 2.1重构,结构更简单,逻辑梳理更清析,性能有了很大的提升. 2.表单设 ...
- ajax局部更新
js //点击启用 $(".status").on("click",function(){ var id = $(this).attr("status ...
- AJAX局部更新演出排期
<script language="javascript" type="text/javascript"> function createXMLHt ...
- ASP.Net Core MVC+Ajax 跨域
要求 C端:用户端(http://www.b.com) A端:管理端(http://admin.b.com) 问题:A端上传图片到C端指定文件夹内保存,供C端使用. 方案 ① C端从nuget引入Mi ...
随机推荐
- PlayJava Day006
今日所学: /* 2019.08.19开始学习,此为补档. */ 构造方法没有返回值(即return为空). this:实例(对象)的引用. JVM:①static方法区:存静态数据 ②栈区:引用 ...
- HTML常用标签二
图像标签和路径 目录文件夹:普通的文件夹,里面存放了我们做页面需要的相关素材,比如html文件,图片等 根目录:打开目录文件夹的第一层就是根目录 路径 相对路径 以引用文件所在位置为参考基础,而建立出 ...
- 「SAP技术」SAP 如何看序列号被包在哪些HU里?
「SAP技术」SAP 如何看序列号被包在哪些HU里? 事务代码SE16 ,表名OBJK, 输入物料号,序列号,HeadTable 输入值SER06, 查询结果如下, 根据objlist, 去表ser0 ...
- Linux(ubuntu) 一行代码搞定查看文件目录
ls 命令:• ls 是英文单词 list 的简写,其功能为列出目录的内容,是用户最常用的命令之一,类似于 DOS 下的 dir 命令 ls命令之后加各种参数的作用: ls -a 显示指定目录下所有子 ...
- Window常用且通用快捷键
Ctrl系列: Ctrl +z :回撤,后退 Ctrl +a :全选 Alt系列: Alt+Tab :切换窗口 Window系列 Window+R:打开“运行”窗口 Window+D:显示桌面 其中常 ...
- rabbitmq和kafka大概比较
两者都是一个分布式架构 kafka 具有较高的吞吐量,rabbimq 吞吐量较小 rabbitmq 的可靠性更好,确认机制(生产者和 exchange,消费者和队列),支持事务,但会造成阻塞,委托(添 ...
- win10 64位安装redis 及Redis Desktop Manager使用
说多无益,先把redis在win上的开发环境搭一下. redis官方没有64位的Windows下的可执行程序,目前有个开源的托管在github上, 地址:https://github.com/Serv ...
- ACM-ICPC 2018 沈阳赛区网络预赛 J. Ka Chang(树上分块+dfs序+线段树)
题意 链接:https://nanti.jisuanke.com/t/A1998 给出一个有根树(根是1),有n个结点.初始的时候每个结点的值都是0.下面有q个操作,操作有两种,操作1.将深度为L(根 ...
- postman---postman增加断言
我们在做测试的时候都会有一个验证点,我们通常把这个验证点叫做断言,断言通过了就会说明我们的这个用例是通过的,当然这么强大的postman也是有断言的,我们一起学习下如何通过postman增加断言. 断 ...
- 7.5 高级数据源---Kafka
一.Kafka简介 Kafka是一种高吞吐量的分布式发布订阅消息系统,用户通过Kafka系统可以发布大量的消息,同时也能实时订阅消费消息.Kafka可以同时满足在线实时处理和批量离线处理. 在公司的大 ...