由于目前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. java主函数

    相信很多初次接触java的同学,在遇见主函数的时候,听到最多的就是主函数的格式是固定的,不能进行修改等等.这就让人疑惑了,主函数为啥就那么特殊呢?接下来博主会为大家解释主函数.大家先看看下面这个程序: ...

  2. centOS服务器添加电脑ssh key以支持远程登陆

    1,生成电脑的密钥对(在powershell或cmd命令行中) ssh-keygen -t rsa -C "自己的邮箱" 2.打开刚刚生成的电脑公钥(~即代表用户主目录,/则代表根 ...

  3. [b0001] 伪分布式 hadoop 2.6.4

    说明: 任务:搭建Hadoop伪分布式版本. 目的:快速搭建一个学习环境,跳过这一环境,快速进入状态,使用Hadoop一些组件做些任务 没有选择2.7,觉得bug比较多,不稳定. 选择伪分布式简单快速 ...

  4. tornado基础

    一.初识tornado 1.什么是tornado 全称Tornado Web Server,是一种Web服务器软件的开源版本. 2.特点 作为Web框架,它是一个轻量级的Web框架,类似于另一个Pyt ...

  5. linux修改权限

    修改system目录(包括子目录)的所有者和组 sudo chown -R seven:seven system

  6. fiddler---Fiddler修改数据信息

    在测试的过程中,可能我们会遇到需要修改一些数据查看请求返回内容是如何的,刚好Fiddler也可以满足我们的要求,Fiddler不仅可以抓包还可以修改包的内容 Fiddler修改数据原理 Fiddler ...

  7. Python xlwt模块写Excel问题集合

    1.数字转换成汉字 数据库查询返回结果为多元组,在写入Excel需要判断,数据库查询结果是否为数字,为数字的话需要将其转换成对应的汉字,此时元组不可修改,所以需要将返回结果修改成列表.实现可以在数据库 ...

  8. 卷积层输出feature maps尺寸的计算

    默认feature maps的宽和高相等. 常规卷积 输入的feature maps尺寸为i,卷积核的尺寸为k,stride为s,padding为p,则输出的feature maps的尺寸o为 当pa ...

  9. SpringCloud学习笔记(六、SpringCloud Netflix Feign)

    目录: feign简介 feign应用 feign简介: feign是一款Netflix开源的声明式.模板化的http客户端,它可以更加便捷.优雅的调用http api:SpringCloud对Net ...

  10. SpringCloud学习笔记(四、SpringCloud Netflix Ribbon)

    目录: Ribbon简介 Ribbon的应用 RestTemplate简介 Ribbon负载均衡源码分析 Ribbon简介: 1.负载均衡是什么 负载均衡,根据其字面意思来说就是让集群服务具有共同完成 ...