Použitie čiastočného zobrazenia na načítanie čiastočného HTML asynchrónne na strane klienta

Životné prostredie

Vizuálne štúdio

• Visual Studio 2019

ASP.NET Jadro

• 3.1

Pridanie dynamických prvkov HTML

Keď dynamicky pridáte prvky HTML, zvyčajne ich pridáte napríklad do JavaScriptu. Keďže sa spracováva nezávisle od strany webového servera, môže byť potrebné ho spravovať dvakrát, napríklad hodnoty atribútov.

ASP.NET Core používa čiastočné zobrazenie. Môžete načítať HTML so spracovaním servera pridaný do čiastočného HTML (.cshtml) definované na strane servera. Na strane klienta sa načíta tento kód HTML a prvok sa pridá do zadaného umiestnenia.

Čo je vo vzorke?

Definuje <ul><li> zoznam ako čiastočné zobrazenie.

Časť Server Partial zobrazuje čiastočné zobrazenie definované v index.cstml. Preto sa rozbalí, keď je zobrazenie prijaté zo servera.

Časť klienta Zaťaženie Ajax Čiastočné je T:System.Web.HTML kontrolu ihneď po klient načíta HTML a zobrazí ho na obrazovke. Načíta a zobrazí čiastočné zobrazenie zo servera v Jazyku JavaScript.

Tlačidlo Ajax Partial sa používa, keď stlačíte tlačidlo. Načíta a zobrazí čiastočné zobrazenie zo servera v Jazyku JavaScript. Proces je rovnaký ako zaťaženie. Popisuje tiež spracovanie chýb, ak nie je možné načítať raz.

Ovládače (HomeController.cs)

Definuje akcie pre čiastočné zobrazenia, ktoré sa majú načítať v čase načítania, a čiastkové zobrazenia, ktoré sa načítajú po stlačení tlačidla.

Ak chcete vrátiť čiastočné PartialView zobrazenie, zavolajte na metódu a vráťte sa. Môžete tiež viazať model na PartialView, List<string> takže sme záväzné tu. Môžete definovať, ktoré typy sú skutočne viazané na strane zobrazenia, čo je presne rovnaké ako syntax britvy, napríklad index.cstml.

Zadanie názvu zobrazenia je rovnaké ako v prípade iných funkcií zobrazenia.

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

Čiastočné zobrazenie (zobrazenia/domov/partial.cshtml)

Definujte čiastočné zobrazenie v Partial.cshtml. Obsah je len zoznam viazaných reťazcov li usporiadaných podľa značky. Je to presne rovnaký ako normálny pohľad, takže nebuďte obzvlášť opatrní. Vzhľadom k tomu, že je to žiletka syntax, je tiež možné vložiť kód do C

Názov súboru a hierarchia priečinkov čiastočného zobrazenia môžu byť umiestnené kdekoľvek podľa zákona o zarovnaní zobrazenia.

@model List<string>

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

Zobrazenia (HTML) (Zobrazenia/Domov/index.cstml)

Hoci je to definícia html strane, existuje len málo miest na vysvetlenie, pretože časť displeja je v podstate väčšina.

Pre časť Server Partial môžete zadať partial značku . Zadané čiastkové zobrazenie môžete rozbaliť. name Zadajte názov zobrazenia pre položku a model zadajte parametre väzby pre . Toto je podobné metóde PartialView na strane ovládača. Mimochodom, toto je proces nasadenia na strane servera, takže klient ho už nasadil, keď dostane KÓD HTML.

Klient Zaťaženie Ajax Button Ajax Partial Čiastočné a tlačidlo Ajax Čiastočné nasadenie asynchrónne získať čiastočné zobrazenie div tagy. Na strane tlačidla sme umiestnili tlačidlo, ktoré určuje tlačidlo, ktoré možno úspešne načítať, a akciu, ktorá neexistuje schválne.

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

Zobrazenia (Javascript) (Zobrazenia/Domov/index.cstml)

Javascript popisuje, čo robiť po počiatočnom displeji a čo robiť, keď je tlačidlo stlačené.

Volajte funkciu na objekt jQuery a load volajte metódu M:System.Data.DataQuery.GetQuery(System.Object). Čiastočné zobrazenie môžete získať asynchrónne zadaním cieľovej akcie (URL) ako prvého argumentu. Ak je načítaný obsah HTML, môže byť vložený ako HTML vnútri objektu jQuery.

Druhým argumentom môže byť funkcia spätného volania, ktorá vám umožní odkazovať na načítaný stav atď. Proces je možné rozvetviť v závislosti od toho, či je získaný výsledok normálny alebo chybový.

Táto funkcia môže byť nahradená funkciou alebo funkciou, ale load get to robí trochu ajax viac.

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