ASP.Net Core使用Ajax局部更新

由於目前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 = 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);
}