Utilizzare visualizzazione parziale per caricare codice HTML parziale in modo asincrono sul lato client

Ambiente

Visual Studio

• Visual Studio 2019

ASP.NET di lavoro

• 3.1

Informazioni sull'aggiunta di elementi HTML dinamici

Quando si aggiungono elementi HTML in modo dinamico, in genere vengono aggiunti in Javascript, ad esempio. Poiché viene gestito indipendentemente dal lato server Web, potrebbe essere necessario gestirlo in doppio, ad esempio i valori degli attributi.

ASP.NET Core utilizza la visualizzazione parziale. È possibile recuperare il codice HTML con l'elaborazione server aggiunta al codice HTML parziale (con estensione cshtml) definito sul lato server. Sul lato client, questo codice HTML viene recuperato e un elemento viene aggiunto alla posizione specificata.

Cosa c'è nel campione?

Definisce un <ul><li> elenco di come visualizzazione parziale.

La parte di Server Partial mostra la visualizzazione parziale definita in index.cstml. Pertanto, viene espanso quando la visualizzazione viene ricevuta dal server.

La parte del client Load Ajax Partial è un controllo T:System.Web.HTML immediatamente dopo che il client recupera il codice HTML e lo visualizza sullo schermo. Recupera e visualizza una visualizzazione parziale dal server in Javascript.

Il pulsante Ajax Partial viene utilizzato quando si preme un pulsante. Recupera e visualizza una visualizzazione parziale dal server in Javascript. Il processo è lo stesso di Load. Descrive inoltre la gestione degli errori se non è possibile caricarla una sola volta.

Controller (HomeController.cs)

Definisce le azioni per le viste parziali da caricare in fase di caricamento e le viste parziali da caricare quando si preme il pulsante.

Per restituire una visualizzazione PartialView parziale, chiamare il metodo e restituire. È anche possibile associare il modello a PartialView, quindi List<string> stiamo associando qui. È possibile definire quali tipi sono effettivamente associati sul lato vista, che è esattamente lo stesso della sintassi Razor, ad esempio index.cstml.

Specificare il nome della vista è lo stesso delle altre funzioni di visualizzazione.

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

Visualizzazione parziale (Visualizzazioni/Home/Partial.cshtml)

Definire una visualizzazione parziale in Partial.cshtml. Il contenuto è solo un elenco di stringhe associate li disposte per tag. È esattamente lo stesso di una vista normale, quindi non essere particolarmente attento. Poiché è la sintassi Razor, è anche possibile incorporare codice in C

Il nome file e la gerarchia di cartelle di una visualizzazione parziale possono essere posizionati in qualsiasi punto in base alla legge di allineamento della vista.

@model List<string>

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

Visualizzazioni (HTML) (Views/Home/index.cstml)

Anche se è la definizione del lato HTML, ci sono pochi posti da spiegare perché la parte di visualizzazione è fondamentalmente la maggioranza.

Per la parte di Server Partial, è possibile specificare il tag partial . È possibile espandere la visualizzazione parziale specificata. name Specificare il nome della vista per e i model parametri di associazione per . È simile al metodo PartialView sul lato controller. A proposito, si tratta di un processo di distribuzione lato server, pertanto il client lo ha già distribuito quando riceve il codice HTML.

Client Load Ajax Button Ajax Partial Partial e Button Ajax Partial distribuiscono viste parziali recuperate in modo asincrono in tag div. Sul lato pulsante, abbiamo inserito un pulsante che specifica un pulsante che può essere recuperato correttamente e un'azione che non esiste di proposito.

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

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

Javascript descrive cosa fare dopo la visualizzazione iniziale e cosa fare quando si preme il pulsante.

Chiamare la funzione sull'oggetto jQuery e chiamare il load metodo M:System.Data.DataQuery.GetQuery(System.Object). È possibile ottenere una visualizzazione parziale in modo asincrono specificando l'azione di destinazione (URL) come primo argomento. Se il contenuto recuperato è HTML, può essere incorporato come HTML all'interno dell'oggetto jQuery.

Il secondo argomento può essere una funzione di callback, che consente di fare riferimento allo stato recuperato e così via. È possibile diramare il processo a seconda che il risultato ottenuto sia normale o negativo.

Questa funzione può essere sostituita con una funzione o una funzione, ma fa load get un po 'di ajax più.

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