使用 Partial View 在客户端异步加载部分 HTML

环境

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.1

关于添加动态 HTML 元素

动态添加 HTML 元素时，通常会添加元素，例如 Javascript。 由于它独立于 Web 服务器端进行处理，因此必须以双重方式（如属性值）进行管理。

ASP.NET Core 使用 "部分视图"（Partial View） ， 您可以在服务器端定义的部分 HTML （.cshtml） 中获取 HTML，同时添加服务器处理。 在客户端，获取此 HTML 以将元素添加到指定位置。

示例内容

将 列表 <ul><li> 定义为部分视图。

Server Partial 部分显示部分视图在 index.cshtml 中定义的部分视图。 因此，它在从服务器接收视图时进行部署。

Client Load Ajax Partial 在客户端获取 HTML 并在屏幕上显示后立即 在 Javascript 中从服务器获取和显示部分视图。

Button Ajax Partial 的一部分在按下按钮时 在 Javascript 中从服务器获取和显示部分视图。 操作与 Load 相同。 还记述了暂时无法读取时的错误处理。

控制器 （HomeController.cs）

定义在 Load 期间加载的部分视图和按下按钮时要加载的部分视图的操作。

若要返回部分视图 PartialView ，请调用 return 方法。 由于模型可以绑定到 PartialView， List<string> 因此我们在此处绑定 。 实际绑定的类型可以定义在视图端，这与 Razor 语法（如 index.cshtml）完全相同。

指定视图名称的方式与其他视图函数相同。

public class HomeController : Controller
{
  // :
  // :

  public IActionResult PartialLoad()
  {
    var list = new List<string>() { "Load1", "Load2", "Load3" };

    // PartialView を呼ぶこと
    return PartialView("Partial", list);
  }

  public IActionResult PartialButton()
  {
    var list = new List<string>() { "Button1", "Button2", "Button3" };

    // PartialView を呼ぶこと
    return PartialView("Partial", list);
  }
}

部分视图（Views/Home/Partial.cshtml）

在 Partial.cshtml 中定义部分视图。 内容只是按标记排列 li 绑定字符串的列表。 它与常规视图完全相同，因此您不会格外小心。 由于 Razor 语法，可以嵌入 C# 代码。

部分视图的文件名和文件夹层次结构可以位于视图放置规则的任何地方。

@model List<string>

<ul>
  @foreach (var item in Model)
  {
    <li>@item</li>
  }
</ul>

视图 （HTML） （Views/Home/index.cshtml）

这是 HTML 端的定义，但基本上，由于大多数显示部分，因此需要解释的很少。

通过为 Server Partial partial 部分指定标记， 您可以展开指定的部分视图。 name 指定视图名称， model 并指定绑定到 的参数。 类似于控制器端的 PartialView 方法。 顺便说一下，这是服务器端部署过程，因此客户端在收到 HTML 时已经部署了它。

Client Load Ajax Partial 和 Button Ajax Partial 将异步获取的部分视图部署到 div 标记。 在按钮端，我们放置一个按钮，用于指定可以成功获取的按钮和故意不存在的操作。

<h3>Server Partial</h3>
<p>
  リクエスト後のレスポンス HTML 時点で部分ビューが展開されている。
</p>
<partial name="Partial" model="@(new List<string>() { "Server1", "Server2", "Server3" })" />

<h3>Client Load Ajax Partial</h3>
<p>
  画面表示後に自動的にビューが読み込まれる。<br />
  Web ブラウザのデバッガのブレークポイントでスクリプトの処理を止めれば
  表示のタイミングでは読み込まれていないことは確認できる。
</p>
<div id="load_area">読み込み中…。</div>

<h3>Button Ajax Partial</h3>
<p>ボタンを押すとビューが読み込まれる</p>
<button type="button" id="button1" class="btn btn-primary">Partial View 読み込み (正常)</button>
<button type="button" id="button2" class="btn btn-danger">Partial View 読み込み (エラー)</button>
<div id="message"></div>
<div id="button_area"></div>

视图 （Javascript） （Views/Home/index.cshtml）

Javascript 端描述初始显示后处理和按下按钮时的处理。

对 jQuery load 对象调用函数， 通过为第一个参数指定目标操作 （URL），可以异步获取部分视图。 如果检索到的内容是 HTML，则可以在 jQuery 对象中嵌入为 HTML。

第二个参数可以包含回调函数，例如，引用检索到的状态。 您可以根据检索到的结果是正常还是错误来分支处理。

load此函数 get 可以替换为 ajax 函数或函数，但处理略有不同。

$(document).ready(function () {

  // 画面表示後のタイミングで読み込む
  $("#load_area").load("/Home/PartialLoad");

  // ボタンを押したときに読み込む
  $("#button1").click(function () {
    // 存在するアクションを指定
    loadPartialView('/Home/PartialButton');
  });
  $("#button2").click(function () {
    // 存在しないアクションを指定
    loadPartialView('/Home/PartialButton_xxxxxxxx');
  });
});

// 指定したパスの partial view を読み込む
function loadPartialView(loadPath) {
  $("#button_area").text('読み込み中…。');
  $("#button_area").load(loadPath, function (response, status, xhr) {
  // status === 'error' ならエラーと判断
  if (status === 'error') {
    $('#message').text('エラー (status : ' + xhr.status + ', statusText : ' + xhr.statusText + ')');
  } else {
    $('#message').text('正常 (status : ' + xhr.status + ', statusText : ' + xhr.statusText + ')');
  }
});