由于目前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>
@:&nbsp;&nbsp;&nbsp;&nbsp;
}
</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局部更新的更多相关文章

  1. asp.net core 通过ajax上传图片及wangEditor图片上传

    asp.net core 通过ajax上传图片 .net core前端代码,因为是通过ajax调用,首先要保证ajax能调用后台代码,具体参见上一篇.net core 使用ajax调用后台代码. 前端 ...

  2. .NET Core 3.0 Preview 6中对ASP.NET Core和Blazor的更新

    我们都知道在6月12日的时候微软发布了.NET Core 3.0的第6个预览版.针对.NET Core 3.0的发布我们国内的微软MVP-汪宇杰还发布的官翻版的博文进行了详细的介绍.具体的可以关注&q ...

  3. ASP.NET Core Web API 索引 (更新Identity Server 4 视频教程)

    GraphQL 使用ASP.NET Core开发GraphQL服务器 -- 预备知识(上) 使用ASP.NET Core开发GraphQL服务器 -- 预备知识(下) [视频] 使用ASP.NET C ...

  4. [文章汇总]ASP.NET Core框架揭秘[最近更新:2018/10/31]

    之前一段时间都在个人公众号账号“大内老A”发布关于ASP.NET Core的系列文章,很多人留言希望能够同步到这里,所以在这里 对这些文章做一个汇总,以便于PC端阅读.如果说微软官方文档主要关于ASP ...

  5. Asp.net core中实现自动更新的Option

    Asp.net core可以监视json.xml等配置文件的变化, 自动刷新内存中的配置内容, 但如果想每隔1秒从zookeeper.consul获取最新的配置信息, 需要自己实现. 阅读了 Asp. ...

  6. roadflow asp.net core版工作流引擎更新发布

    ROADFLOW CORE (.NET CORE工作流引擎)更新说明 1.RoadFlow全新工作流平台采用.NET CORE 2.1重构,结构更简单,逻辑梳理更清析,性能有了很大的提升. 2.表单设 ...

  7. ajax局部更新

    js //点击启用 $(".status").on("click",function(){ var id = $(this).attr("status ...

  8. AJAX局部更新演出排期

    <script language="javascript" type="text/javascript"> function createXMLHt ...

  9. ASP.Net Core MVC+Ajax 跨域

    要求 C端:用户端(http://www.b.com) A端:管理端(http://admin.b.com) 问题:A端上传图片到C端指定文件夹内保存,供C端使用. 方案 ① C端从nuget引入Mi ...

随机推荐

  1. PlayJava Day006

    今日所学: /* 2019.08.19开始学习,此为补档. */ 构造方法没有返回值(即return为空). this:实例(对象)的引用. JVM:①static方法区:存静态数据   ②栈区:引用 ...

  2. HTML常用标签二

    图像标签和路径 目录文件夹:普通的文件夹,里面存放了我们做页面需要的相关素材,比如html文件,图片等 根目录:打开目录文件夹的第一层就是根目录 路径 相对路径 以引用文件所在位置为参考基础,而建立出 ...

  3. 「SAP技术」SAP 如何看序列号被包在哪些HU里?

    「SAP技术」SAP 如何看序列号被包在哪些HU里? 事务代码SE16 ,表名OBJK, 输入物料号,序列号,HeadTable 输入值SER06, 查询结果如下, 根据objlist, 去表ser0 ...

  4. Linux(ubuntu) 一行代码搞定查看文件目录

    ls 命令:• ls 是英文单词 list 的简写,其功能为列出目录的内容,是用户最常用的命令之一,类似于 DOS 下的 dir 命令 ls命令之后加各种参数的作用: ls -a 显示指定目录下所有子 ...

  5. Window常用且通用快捷键

    Ctrl系列: Ctrl +z :回撤,后退 Ctrl +a :全选 Alt系列: Alt+Tab :切换窗口 Window系列 Window+R:打开“运行”窗口 Window+D:显示桌面 其中常 ...

  6. rabbitmq和kafka大概比较

    两者都是一个分布式架构 kafka 具有较高的吞吐量,rabbimq 吞吐量较小 rabbitmq 的可靠性更好,确认机制(生产者和 exchange,消费者和队列),支持事务,但会造成阻塞,委托(添 ...

  7. win10 64位安装redis 及Redis Desktop Manager使用

    说多无益,先把redis在win上的开发环境搭一下. redis官方没有64位的Windows下的可执行程序,目前有个开源的托管在github上, 地址:https://github.com/Serv ...

  8. ACM-ICPC 2018 沈阳赛区网络预赛 J. Ka Chang(树上分块+dfs序+线段树)

    题意 链接:https://nanti.jisuanke.com/t/A1998 给出一个有根树(根是1),有n个结点.初始的时候每个结点的值都是0.下面有q个操作,操作有两种,操作1.将深度为L(根 ...

  9. postman---postman增加断言

    我们在做测试的时候都会有一个验证点,我们通常把这个验证点叫做断言,断言通过了就会说明我们的这个用例是通过的,当然这么强大的postman也是有断言的,我们一起学习下如何通过postman增加断言. 断 ...

  10. 7.5 高级数据源---Kafka

    一.Kafka简介 Kafka是一种高吞吐量的分布式发布订阅消息系统,用户通过Kafka系统可以发布大量的消息,同时也能实时订阅消费消息.Kafka可以同时满足在线实时处理和批量离线处理. 在公司的大 ...