由于目前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. TOTP算法实现二步验证

    概念 TOTP算法(Time-based One-time Password algorithm)是一种从共享密钥和当前时间计算一次性密码的算法. 它已被采纳为Internet工程任务组标准RFC 6 ...

  2. 何为http?何为RPC?

    RPC(即Remote Procedure Call,远程过程调用)和HTTP(HyperText Transfer Protocol,超文本传输协议)他们最本质的区别,就是RPC主要工作在TCP协议 ...

  3. jQuery之概念以及基本使用

    1. jQuery的概述 1.1 jQuery的概念 jQuery是一个快速.简洁的JavaScript库,其设计的宗旨是“Write Less,Do More” jQuery主要是封装了JavaSc ...

  4. js延时定时器

    // 获取图片方向延时器 getImageOrientationTimer(context) { if (context.imageTimeout) return; if (context.image ...

  5. kali linux maltego-情报收集工具

    Maltego是一个交互式数据挖掘工具,它为链接分析呈现有向图.该工具用于在线调查,以发现互联网上各种来源的信息片段之间的关系. 注册Maltego账号,注册地址:https://www.paterv ...

  6. C语言、指针(一)

    指针(一) “带*类型” 的特征探测:宽度 “带*类型” 的特征探测:声明 “带*类型” 的特征探测:赋值 “带*类型” 的特征探测:++ -- “带*类型” 的特征探测:加上/减去 一个整数 “带* ...

  7. Kotlin介绍(非原创)

    文章大纲 一.Kotlin简介二.Kotlin相比Java优势三.Kotlin与Java混合使用四.参考文章   一.Kotlin简介 1. 什么是Kotlin 安卓和Java,前者是最受欢迎的移动开 ...

  8. [转]国内阿里Maven仓库镜像Maven配置文件Maven仓库速度快

    原文地址:http://www.cnblogs.com/ae6623/p/4416256.html 国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以备用. ...

  9. 使用weui开发微信小程序

    一.使用weui 学习一个新的技术,想要最短时间掌握并熟练使用它,那就是直接做项目了.把技术直接应用到项目中来,直接做出东西,这是我的方法,因为我很懒不太喜欢看一步一步看文档,看理论. 那怎么使用we ...

  10. ms sql事务输出错误

    begin try 语句 end trybegin catch --ERROR_NUMBER() 返回错误号. --ERROR_SEVERITY() 返回严重性. --ERROR_STATE() 返回 ...