Részleges nézet használata részleges HTML aszinkron betöltése az ügyféloldalra

Környezet

Vizuális stúdió

• Visual Studio 2019

ASP.NET Core

• 3.1

Dinamikus HTML-elemek hozzáadása

Ha dinamikusan ad hozzá HTML-elemeket, általában javascriptben adja hozzá őket. Mivel a webkiszolgáló oldalátattól függetlenül kezeli, szükség lehet annak kettős kezelésére, például attribútumértékekre.

ASP.NET Core részleges nézetet használ. A HTML-kódot úgy kérheti le, hogy a kiszolgáló feldolgozása hozzáadva a kiszolgálóoldalon definiált részleges HTML (.cshtml) értékhez. Az ügyféloldalon ez a HTML beolvasása és egy elem hozzáadódik a megadott helyhez.

Mi van a mintában?

Részleges nézetként határozza <ul><li> meg a listát.

A Kiszolgáló részleges része az index.cstml-ben definiált részleges nézetet jeleníti meg. Ezért a rendszer kibontja, amikor a nézet a kiszolgálóról érkezik.

Az Ügyfélbetöltési Ajax Partial része egy T:System.Web.HTML vezérlő, közvetlenül azután, hogy az ügyfél beolvassa a HTML-kódot, és megjeleníti azt a képernyőn. Lekéri és megjeleníti a részleges nézetet a kiszolgálóról Javascript-ben.

Az Ajax Partial gomb akkor használatos, ha megnyom egy gombot. Lekéri és megjeleníti a részleges nézetet a kiszolgálóról Javascript-ben. A folyamat ugyanaz, mint a Terhelés. Azt is leírja a hibakezelés, ha nem lehet betölteni egyszer.

Vezérlők (HomeController.cs)

A betöltéskor betöltandó részleges nézetek, a gomb megnyomásakor betöltődő részleges nézetek műveleteit határozza meg.

Részleges nézet visszaadásához PartialView hívja meg a metódust, és térjen vissza. A modellt a PartialView nézethez is kötheti, ezért List<string> itt kötésre kerültünk. Megadhatja, hogy mely típusok vannak ténylegesen kötve a nézet oldalon, ami pontosan megegyezik a Razor szintaxissal, például index.cstml.

A nézet nevének megadása megegyezik a többi nézetfüggvények nevével.

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

Részleges nézet (Nézetek/Kezdőlap/Részleges.cshtml)

Részleges nézet definiálása a Partial.cshtml fájlban. A tartalom csak egy lista a kötött karakterláncok li szerint rendezve. Ez pontosan ugyanaz, mint egy normális nézet, ezért ne legyen különösebben óvatos. Mivel ez a Borotva szintaxis, lehetséges a kódot beágyazni a C-be

A részleges nézet fájlneve és mappahierarchiája bárhol elhelyezhető a nézet igazítási törvényének megfelelően.

@model List<string>

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

Nézetek (HTML) (Nézetek/Kezdőlap/index.cstml)

Bár ez a html oldal definíciója, kevés hely van, ahol el lehet magyarázni, mert a kijelző rész alapvetően a többség.

A Kiszolgáló részleges részéhez megadhatja a partial címkét. A megadott részleges nézet kibontható. nameAdja meg a nézet nevét, és model adja meg a kötési paramétereit. Ez hasonló a kontroller oldalán található PartialView metódushoz. By the way, ez egy kiszolgálóoldali telepítési folyamat, így az ügyfél már üzembe helyezte, amikor megkapja a HTML-t.

Ügyfél load Ajax Button Ajax Partial részleges és gomb Ajax részleges telepíteni aszinkron módon lekért részleges nézetek div címkéket. A gomb oldalán elhelyezettünk egy gombot, amely meghatározza a sikeresen visszakereshető gombot, és egy olyan műveletet, amely nem szándékosan létezik.

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

Nézetek (Javascript) (Nézetek/Kezdőlap/index.cstml)

A Javascript leírja, hogy mi a teendő a kezdeti megjelenítés után, és mi a teendő a gomb megnyomásakor.

Hívjuk meg a jQuery objektum függvényét, és hívjuk meg az load M:System.Data.DataQuery.GetQuery(System.Object) metódust. Részleges nézetet aszinkron módon kaphat, ha a célműveletet (URL-t) adja meg első argumentumként. Ha a beolvasott tartalom HTML, html formátumban ágyazható be a jQuery objektumba.

A második argumentum lehet visszahívási függvény, amely lehetővé teszi, hogy a beolvasott állapotra stb. Lehetőség van a folyamat elágazására attól függően, hogy a kapott eredmény normális vagy hiba.

Ez a funkció helyettesíthető egy funkcióval vagy funkcióval, de load get egy kicsit többet ajax tesz.

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