由于目前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. 最近的项目系之3——core3.0整合Senparc

    1.前言 既然是.net下微信开发,自然少不了Senparc,可以说这个框架的存在, 至少节省了微信相关工作量的80%.事实上,项目开始前,还纠结了下是Java还是core,之所以最终选择core,除 ...

  2. list方法补充

    在上一个随便我们写了list 常用的方法,该随便为一些需要补充的内容 注:本次例子为: student = ["张天赐","小明","小红" ...

  3. AppBoxFuture(八): 另类的ORM实现

      通常的ORM实现基于配置或注释,由反射或Emit生成相应的Sql语句,然后将Sql发送给数据库解析Sql字符串生成AST再交给优化器处理后执行,返回的数据再经由反射或Emit转换为相应的实体实例. ...

  4. 【转载】Gradle for Android 第四篇( 构建变体 )

    当你在开发一个app,通常你会有几个版本.大多数情况是你需要一个开发版本,用来测试app和弄清它的质量,然后还需要一个生产版本.这些版本通常有不同的设置,例如不同的URL地址.更可能的是你可能需要一个 ...

  5. 【XML】XML基本结构以及XML-Schema约束

    XML 简介 1998年2月,W3C正式批准了可扩展标记语言的标准定义,可扩展标记语言可以对文档和数据进行结构化处理,从而能够在部门.客户和供应商之间进行交换,实现动态内容生成,企业集成和应用开发.可 ...

  6. ThinkPHP 3.2,配置 'URL_MODEL'=>2。 APP_DEBUG设为false,U函数生成的URL的index.php不能去掉,只有将APP_DEBUG改成true,才能去掉index.php,求解~~

    ThinkPHP 3.2,配置 'URL_MODEL'=>2.APP_DEBUG设为false,U函数生成的URL的index.php不能去掉,只有将APP_DEBUG改成true,才能去掉in ...

  7. python3基础学习(1)

    python基础内容讲解主要内容: 1.使用编辑器(IDE) 2.第一个“hello world” 3.何所谓“变量” 4.python与其他主流语言输出对比 5.数据类型 6.python用作“计算 ...

  8. Tomcat 学习总结(1) --Servlet技术

    在Web应用中,Servlet是一门重要的技术,Servlet是利用Java类编写的服务端程序,与平台架构,协议无关. JSP的实质就是Servlet,因为所有的JSP页面传回服务端时要转为Servl ...

  9. Div转为Canvas简直不要太好玩~~~

    html2canvas库 今天发现了一个神奇的玩意,简直不要太好玩~~ 用canvas做动画是很难,但是div能比canvas简单不少,只是因为canvas中不能操作Dom元素 这款神器,可以直接将D ...

  10. fiddler面试题

    1.什么叫断点? Break Point:进行接口测试时,为了测试后端功能而设置的. 2.断点有哪些方式? Before Requests:在请求时,没有达到服务器之前设置断点.     -- 全局断 ...