• 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);
    }
  • 相关阅读:
    docker笔记(1)
    解决MySQL8 #1227 – Access denied; you need (at least one of) the SYSTEM_USER privilege(s) for this ...
    nginx if判断&&和||写法
    泡泡后台Couchbase缓存使用经验分享
    ARTS-WEEK-007
    ARTS-WEEK-006
    ARTS-WEEK-005
    ARTS-WEEK-004
    ARTS-WEEK-003
    总结httpclient资源释放和连接复用
  • 原文地址:https://www.cnblogs.com/moonblogcore/p/11659892.html
Copyright © 2020-2023  润新知