Osalise vaate kasutamine osalise HTML-i asünkroonseks laadimiseks kliendi poolel

Keskkond

3 tärniga

• Visual Studio 2019

ASP.NET tuum

• 3.1

Dünaamiliste HTML-elementide lisamine

HTML-elementide dünaamilisel lisamisel lisate need tavaliselt näiteks Javascripti. Kuna seda käsitletakse veebiserveri poolsest sõltumatult, võib osutuda vajalikuks hallata seda topelt, näiteks atribuudiväärtused.

ASP.NET Core kasutab osalist vaadet. Saate tuua HTML serveri töötlemise lisatud osaline HTML (.cshtml) määratletud serveri poolel. Kliendi poolel see HTML tuuakse ja element lisatakse määratud asukohta.

Mis näidises on?

Määratleb <ul><li> loendi osalise vaatena.

Osa Server Partial näitab osaline vaade määratletud index.cstml. Seetõttu laiendatakse, kui vaade on saadud serverist.

Osa kliendi koormus Ajax osaline on T:System.Web.HTML kontrolli kohe pärast seda, kui klient toob HTML-i ja kuvab selle ekraanil. Toob ja kuvab osaline vaade serverist Javascriptis.

Nuppu Ajax Partial kasutatakse nupu vajutamisel. Toob ja kuvab osaline vaade serverist Javascriptis. Protsess on sama mis Load. See kirjeldab ka tõrketöötlust, kui üks kord ei ole võimalik laadida.

Kontrollerid (HomeController.cs)

Määratleb toimingud, mida rakendatakse osalised vaated laadimise ajal ja osalised vaated, mida nupu vajutamisel laadida.

Osalise vaate tagastamiseks PartialView helistage meetodile ja tagastage. Mudeli saate siduda ka PartialView'ga, nii et List<string> me seome siin. Saate määratleda, millised tüübid on vaate poolel tegelikult seotud, mis on täpselt sama mis Razori süntaks, näiteks index.cstml.

Vaate nime määramine on sama mis teiste vaatefunktsioonide puhul.

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

Osaline vaade (Views/Home/Partial.cshtml)

Osalise vaate määratlemine jaotises Partial.cshtml. Sisu on lihtsalt li sildijärgi korraldatud köidetud stringide loend. See on täpselt sama nagu tavaline vaade, nii et ärge eriti ettevaatlik. Kuna see on Razor süntaks, on võimalik ka manustada koodi C

Osalise vaate failinime ja kaustahierarhia saab paigutada kõikjale vastavalt vaate joondusõigusele.

@model List<string>

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

Vaated (HTML) (Vaated/Avaleht/index.cstml)

Kuigi see on määratlus HTML pool, on vähe kohti selgitada, sest kuva osa on põhimõtteliselt enamus.

Serveri osa osalise jaoks saate määrata partial sildi . Määratud osalist vaadet saate laiendada. name Määrake selle vaate nimi ja model määrake sidumisparameetrid . See on sarnane PartialView meetod kontrolleri poolel. Muide, see on serveripoolne juurutamine protsess, nii et klient on juba juurutanud, kui ta saab HTML-i.

Kliendi load Ajax osaline ja Button Ajax Partial nupp Ajax osaline juurutada asünkroonselt alla toodud osalised vaated div sildid. Nupu poolel oleme asetanud nupu, mis määrab nupu, mida saab edukalt alla laadida, ja toimingu, mida meelega ei eksisteeri.

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

Vaated (Javascript) (Views/Home/index.cstml)

Javascript kirjeldab, mida teha pärast esialgset kuva ja mida teha, kui nuppu vajutatakse.

Helistage funktsiooni jQuery objekti ja helistage load M:System.Data.DataQuery.GetQuery(System.Object) meetod. Osalise vaate saate asünkroonselt, määrates esimeseks argumendiks sihttoimingu (URL). Kui allalaaditud sisu on HTML, saab selle manustada HTML-ina objekti jQuery sisse.

Teine argument võib olla tagasihelistamise funktsioon, mis võimaldab viidata allalaaditud olekule jne. Protsessi on võimalik harutada sõltuvalt sellest, kas saadud tulemus on normaalne või viga.

Selle funktsiooni saab asendada funktsiooni või funktsiooniga, kuid see load get teeb veidi ajax rohkem.

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