Uporaba delnega pogleda za delno nalaganje HTML asinchrono na strani odjemalca

Okolje

Vizualni studio

• Vizualni studio 2019

ASP.NET Core

• 3.1

Dodajanje dinamičnih elementov HTML

Ko elemente HTML dodajate dinamično, jih na primer običajno dodajate v Javascript. Ker se ravna neodvisno od strani spletnega strežnika, ga bo morda treba upravljati dvojno, na primer vrednosti atributov.

ASP.NET Core uporablja delni pogled. HTML lahko pridobite s strežniško obdelavo, dodano delni HTML (.cshtml), določeni na strežniški strani. Na strani odjemalca se ta HTML pridobi in na navedeno mesto se doda element.

Kaj je v vzorcu?

Določa seznam <ul><li> delnega pogleda.

Del strežnika Delni prikazuje delni pogled, opredeljen v index.cstml. Zato se razširi, ko pogled prejmete iz strežnika.

Del odjemalca Load Ajax Partial je T:System.Web.HTML kontrolnik takoj po tem, ko odjemalec pridobi HTML in ga prikaže na zaslonu. Pridobi in prikaže delni pogled iz strežnika v Javascriptu.

Gumb Ajax Partial se uporablja, ko pritisnete gumb. Pridobi in prikaže delni pogled iz strežnika v Javascriptu. Postopek je enak Load. Opisuje tudi ravnanje z napakami, če ni mogoče enkrat naložiti.

Krmilniki (HomeController.cs)

Določa dejanja za delne poglede, ki jih je treba naložiti ob času nalaganja, in delne poglede za nalaganje, ko pritisnete gumb.

Če želite vrniti delni PartialView pogled, pokličite metodo in se vrnite. Model lahko tudi privezate na PartialView, zato List<string> smo tukaj zavezujoči. Določite lahko, katere vrste so dejansko zvezane na strani pogleda, ki je popolnoma enaka sintaksi Razor, kot je index.cstml.

Določanje imena pogleda je enako kot za druge funkcije pogleda.

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

Delni pogled (Pogledi/Domov/Partial.cshtml)

Določite delni pogled v datoteki Partial.cshtml. Vsebina je le seznam vezanih nizov, razporejenih po li oznaki. To je popolnoma enako kot običajen pogled, zato ne bodite posebej previdni. Ker je Razor sintaksa, je mogoče tudi vdelati kodo v C

Ime datoteke in hierarhija map delnega pogleda se lahko postavita kjerkoli v skladu z zakonom o poravnavi pogleda.

@model List<string>

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

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

Čeprav gre za definicijo strani HTML, je malo mest za razlago, ker je prikazni del v bistvu večina.

Za del strežnika Delno lahko določite partial oznako . Navedeni delni pogled lahko razširite. Določite name ime pogleda za in določite zavezujoče model parametre za . To je podobno metodi PartialView na strani krmilnika. Mimogrede, to je postopek uvajanja na strani strežnika, zato ga je odjemalec že uvajal, ko prejme HTML.

Odjemalec Naloži Ajax Delno in Button Ajax Partial Gumb Ajax Delno uvajanje asinchrono pridobljene delne poglede za div oznake. Na strani gumba smo namestili gumb, ki določa gumb, ki ga je mogoče uspešno pridobiti, in dejanje, ki namerno ne obstaja.

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

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

Javascript opisuje, kaj storiti po začetnem zaslonu in kaj storiti, ko pritisnete gumb.

Pokličite funkcijo v predmetu jQuery in pokličite metodo load M:System.Data.DataQuery.GetQuery(System.Object). Delni pogled lahko asinchrono dobiš tako, da kot prvi argument določiš ciljno dejanje (URL). Če je pridobljena vsebina HTML, jo je mogoče vdelati kot HTML znotraj predmeta jQuery.

Drugi argument je lahko funkcija povratnega klica, ki omogoča sklicevanje na pridobljeno stanje itd. Proces je mogoče razvejati glede na to, ali je pridobljeni rezultat normalen ali napaka.

To funkcijo je mogoče zamenjati s funkcijo ali funkcijo, vendar naredi malo load get ajax več.

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