data-ajax-mode,ASP.Net Core使用Ajax局部更新

由于目前ASP.NET Core中没有提供Ajax帮助器，所以参照 上一篇帖文，使用data-ajax-*属性来使用jQuery Unobtrusive Ajax功能实现HTML的局部页面元素更新。

在.cshtml文件中，根据文章分页，分别生成各页链接：

@if (Model.ContentArray.Count() > 1)

{

@Html.Raw(Model.ContentArray[0])

}

else

{

@Html.Raw(Model.CurrentAtricle.Content)

}

@for (int i = 0; i < Model.ContentArray.Length; i++)

{

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)

@:    

}

为了实现局部更新，我在其中分页链接标记元素中插入了多条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.cnblogs.com/moonblogcore/archive/2019/10/12/11659892.html