ASP.NET Core 3.1 AJAX局部视图 - HTML

在ASP.NET Core 3.1中，AJAX局部视图可以帮助我们做到页面的异步刷新，避免了整个页面的重载，提升了用户体验。本文将介绍如何使用AJAX局部视图与HTML模板来实现异步更新。

实现步骤

1. 控制器中编写AJAX局部视图

在控制器中添加方法，用于处理AJAX请求并返回局部视图。以下是一个示例：

[HttpGet]
public IActionResult DemoPartial()
{
    return PartialView("_DemoPartial");
}

此方法将返回一个名为_DemoPartial.cshtml的局部视图文件。

2. 添加HTML模板

在项目中添加一个名为template.html的HTML模板文件。以下是一个示例：

<div class="card">
   <div class="card-header">
      AJAX Partial View Demo
   </div>
   <div class="card-body">
      <div id="partial-view-container">
      </div>
   </div>
</div>

模板文件中包含了一个div标签，它的id是partial-view-container，这个元素将被用于显示AJAX局部视图。

3. 在视图中调用AJAX查询

在需要刷新的视图中，使用AJAX查询请求AJAX局部视图并将其插入到HTML模板中。以下是一个示例：

<div id="demo-container">
   @await Html.PartialAsync("_DemoPartial")
</div>

<script>
   $(document).ready(function () {
      $.ajax({
         url: '/Home/DemoPartial',
         type: 'GET',
         success: function (result) {
            $('#partial-view-container').html(result);
         }
      });
   });
</script>

此代码将在页面加载时执行AJAX查询，以获取AJAX局部视图，然后将其插入到HTML模板的partial-view-container元素中。

总结

本文介绍了如何使用ASP.NET Core 3.1和HTML模板来实现AJAX局部视图，以实现异步页面刷新的效果。希望这篇文章能够帮助你更好地理解AJAX局部视图的使用。