Utilizarea vizualizării parțiale pentru a încărca parțial HTML asincron pe partea client

Mediu

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.1

Despre adăugarea elementelor HTML dinamice

Când adăugați elemente HTML dinamic, de obicei le adăugați în Javascript, de exemplu. Deoarece este manipulat independent de partea serverului Web, poate fi necesar să-l gestionați în dublu, ar fi valorile atributelor.

ASP.NET Core utilizează Vizualizare parțială. Puteți regăsi HTML cu procesarea serverului adăugată la HTML parțial (.cshtml) definit pe partea de server. Pe partea de client, acest HTML este regăsit și un element este adăugat la locația specificată.

Ce e în mostră?

Definește o <ul><li> listă ca vizualizare parțială.

Partea din Server Partial afișează vizualizarea parțială definită în index.cstml. De aceea, este extins atunci când vizualizarea este primită de la server.

Partea din Client Load Ajax parțială este un control T:System.Web.HTML imediat după ce clientul preia HTML și afișează-l pe ecran. Preia și afișează o vizualizare parțială de pe server în Javascript.

Butonul Ajax Partial este utilizat atunci când apăsați un buton. Preia și afișează o vizualizare parțială de pe server în Javascript. Procesul este același cu Load. De asemenea, descrie tratarea erorilor dacă nu este posibilă încărcarea o singură dată.

Controlere (HomeController.cs)

Definește acțiunile pentru ca vizualizările parțiale să se încarce la momentul încărcării și vizualizările parțiale de încărcat atunci când butonul este apăsat.

Pentru a returna o PartialView vizualizare parțială, apelați metoda și reveniți. De asemenea, puteți lega modelul de PartialView, așa List<string> că suntem obligatorii aici. Puteți defini ce tipuri sunt de fapt legate pe partea de vizualizare, care este exact la fel ca sintaxa Razor, ar fi index.cstml.

Specificarea numelui vizualizării este aceeași ca și pentru alte funcții de vizualizare.

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

Vizualizare parțială (Vizualizări/Pornire/Parțial.cshtml)

Definiți o vizualizare parțială în Partial.cshtml. Conținutul este doar o listă de șiruri legate li aranjate după etichetă. Este exact la fel ca o vedere normală, așa că nu fi deosebit de atent. Deoarece este sintaxa razor, este, de asemenea, posibil să se încorporeze cod în C

Numele de fișier și ierarhia folderelor unei vizualizări parțiale pot fi plasate oriunde în conformitate cu legea de aliniere a vizualizării.

@model List<string>

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

Vizualizări (HTML) (Vizualizări/Home/index.cstml)

Deși este definiția partea HTML, există puține locuri pentru a explica, deoarece partea de afișare este în esență majoritatea.

Pentru partea din Server Partial, aveți posibilitatea să specificați partial eticheta . Aveți posibilitatea să extindeți vizualizarea parțială specificată. name Specificați numele vizualizării pentru și model specificați parametrii de legare pentru . Aceasta este similară cu metoda PartialView din partea controlerului. Apropo, acesta este un proces de implementare pe partea de server, astfel încât clientul a implementat-o deja atunci când primește HTML.

Client Load Ajax parțială și Button Ajax Partial buton Ajax parțială implementa asincron regăsit vizualizări parțiale la tag-uri div. Pe partea de buton, am plasat un buton care specifică un buton care poate fi regăsit cu succes și o acțiune care nu există intenționat.

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

Vizualizări (Javascript) (Vizualizări/Home/index.cstml)

Javascript descrie ce trebuie să faceți după afișarea inițială și ce să faceți atunci când butonul este apăsat.

Apelați funcția pe obiectul jQuery și apelați load metoda M:System.Data.DataQuery.GetQuery(System.Object). Puteți obține o vizualizare parțială asincron prin specificarea acțiunii țintă (URL) ca prim argument. Dacă conținutul regăsit este HTML, acesta poate fi încorporat ca HTML în interiorul obiectului jQuery.

Al doilea argument poate fi o funcție de apelare inversă, care vă permite să faceți referire la starea recuperată etc. Este posibil să se ramifice procesul în funcție de faptul dacă rezultatul obținut este normal sau eroare.

Această funcție poate fi înlocuită cu o funcție sau o funcție, dar load get face un pic mai ajax mult.

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