使用 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 + ')');
  }
});