欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

ASP.Net Core使用Ajax局部更新

程序员文章站 2022-04-15 08:54:30
由于目前ASP.NET Core中没有提供Ajax帮助器，所以参照 上一篇帖文，使用data-ajax-*属性来使用jQuery Unobtrusive Ajax功能实现HTML的局部页面元素更新。 在.cshtml文件中，根据文章分页，分别生成各页链接： 为了实现局部更新，我在其中分页链接标 ......

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

 

上一篇： DevExpress的图形按钮菜单栏控件WindowsUIButtonPanel的布局、使用和设置按钮的点击事件

下一篇： python day 8: re模块补充，导入模块,hashlib模块，字符串格式化，模块知识拾遗，requests模块初识

推荐阅读