由于目前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 = 0) { 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 > 1 && num < contentarray.length) { return content(contentarray[num]); } else if (contentarray.length == 1) { return content(contentarray[0]); } return content(null); }
黄山市民网:https://www.huangshanshimin.com/