Použití částečného zobrazení k načtení částečného kódu HTML asynchronně na straně klienta

Prostředí

Vizuální studio

• Visual Studio 2019

ASP.NET jádro

• 3.1

Přidání dynamických prvků HTML

Když přidáte prvky HTML dynamicky, obvykle je přidáte například do Javascriptu. Vzhledem k tomu, že je zpracována nezávisle na straně webového serveru, může být nutné spravovat v double, například hodnoty atributů.

ASP.NET Core používá částečné zobrazení. Můžete načíst HTML se zpracováním serveru přidaným do částečného kódu HTML (.cshtml) definovaného na straně serveru. Na straně klienta je načten tento kód HTML a prvek je přidán do zadaného umístění.

Co je ve vzorku?

Definuje <ul><li> seznam jako částečné zobrazení.

Část Server Partial zobrazuje částečné zobrazení definované v indexu.cstml. Proto je rozbalena při přijetí zobrazení ze serveru.

Část klienta Load Ajax Partial je ovládací prvek T:System.Web.HTML bezprostředně po načtení kódu HTML a jeho zobrazení na obrazovce. Načte a zobrazí částečné zobrazení ze serveru v Jazyce Javascript.

Tlačítko Ajax Partial se používá, když stisknete tlačítko. Načte a zobrazí částečné zobrazení ze serveru v Jazyce Javascript. Proces je stejný jako Load. Popisuje také zpracování chyb, pokud není možné načíst jednou.

Řídicí jednotky (HomeController.cs)

Definuje akce pro částečné pohledy, které se mají načíst při načtení a částečné pohledy, které se načítají při stisknutí tlačítka.

Chcete-li vrátit částečné PartialView zobrazení, zavolejte metodu a vrátíte. Můžete také svázat model PartialView, takže List<string> jsme závazné zde. Můžete definovat, které typy jsou skutečně vázány na straně zobrazení, což je přesně stejné jako syntaxe Razor, například index.cstml.

Zadání názvu zobrazení je stejné jako u jiných funkcí zobrazení.

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);
  }
}

Částečné zobrazení (zobrazení/domů/Částečné.cshtml)

Definujte částečné zobrazení v části Partial.cshtml. Obsah je pouze seznam vázaných řetězců li uspořádaných podle značek. Je to přesně stejný jako normální pohled, takže nebuďte obzvláště opatrní. Vzhledem k tomu, že je to syntaxe Razor, je také možné vložit kód do C

Název souboru a hierarchii složek částečného zobrazení lze umístit kdekoli podle zákona o zarovnání zobrazení.

@model List<string>

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

Zobrazení (HTML) (Zobrazení/Domů/index.cstml)

Ačkoli se jedná o definici strany HTML, existuje jen málo míst, která je třeba vysvětlit, protože zobrazovací část je v podstatě většina.

Pro část Server Partial můžete zadat partial značku . Můžete rozbalit zadané částečné zobrazení. name Zadejte název zobrazení pro a model zadejte parametry vazby pro . To je podobné PartialView metoda na straně kontroleru. Mimochodem, jedná se o proces nasazení na straně serveru, takže klient již nasadil, když obdrží HTML.

Klient zatížení Ajax Button Ajax Partial Částečné a tlačítko Ajax Částečné nasazení asynchronně načtené částečné zobrazení div značky. Na straně tlačítka jsme umístili tlačítko, které určuje tlačítko, které lze úspěšně načíst, a akci, která záměrně neexistuje.

<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>

Zobrazení (Javascript) (Zobrazení/Domů/index.cstml)

Javascript popisuje, co dělat po počátečním zobrazení a co dělat, když je tlačítko stisknuto.

Volání funkce na objektu jQuery a volání load metody M:System.Data.DataQuery.GetQuery(System.Object). Částečné zobrazení můžete získat asynchronně zadáním cílové akce (URL) jako prvního argumentu. Pokud je načtený obsah HTML, může být vložen jako HTML uvnitř objektu jQuery.

Druhým argumentem může být funkce zpětného volání, která umožňuje odkazovat na načtený stav atd. Proces je možné větev v závislosti na tom, zda je získaný výsledek normální nebo chybový.

Tato funkce může být nahrazena funkcí nebo funkcí, ale load get dělá trochu ajax víc.

$(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 + ')');
  }
});