Utilitzeu la visualització parcial per carregar l'HTML parcial asíncronament al costat del client

Medi ambient

Estudi Visual

• Estudi Visual 2019

ASP.NET nucli

• 3.1

Sobre l'addició d'elements HTML dinàmics

Quan afegiu elements HTML dinàmicament, normalment els afegiu en Javascript, per exemple. Com que es gestiona independentment del costat del servidor web, pot ser necessari administrar-lo en doble, com ara valors d'atributs.

ASP.NET Core utilitza la vista parcial. Podeu recuperar HTML amb el processament del servidor afegit a l'HTML parcial (.cshtml) definit al costat del servidor. Al costat del client, es recupera aquest HTML i s'afegeix un element a la ubicació especificada.

Què hi ha a la mostra?

Defineix una <ul><li> llista de com una visualització parcial.

La part del servidor Parcial mostra la vista parcial definida a index.cstml. Per tant, s'expandeix quan es rep la visualització des del servidor.

La part del Client Load Ajax Partial és un control T:System.Web.HTML immediatament després que el client recuperi l'HTML i el mostri a la pantalla. Recupera i mostra una visualització parcial del servidor en Javascript.

El botó Ajax Parcial s'utilitza quan premeu un botó. Recupera i mostra una visualització parcial del servidor en Javascript. El procés és el mateix que Carrega. També descriu la gestió d'errors si no és possible carregar-se una vegada.

Controladors (HomeController.cs)

Defineix les accions perquè les vistes parcials es carreguin en el temps de càrrega i les vistes parcials a carregar quan es prem el botó.

Per tornar una visualització PartialView parcial, truqueu al mètode i torneu. També podeu vincular el model a PartialView, de manera List<string> que estem vinculant aquí. Podeu definir quins tipus estan realment lligats al costat de la vista, que és exactament el mateix que la sintaxi razor, com ara index.cstml.

Especificar el nom de la visualització és el mateix que per a altres funcions de visualització.

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

Vista parcial (Vistes/Inici/Parcial.cshtml)

Definiu una vista parcial a Partial.cshtml. El contingut és només una llista de cadenes enllaçades li disposades per etiqueta. És exactament el mateix que una vista normal, així que no t'a vagis amb compte. Com que és sintaxi d'afaitar, també és possible incrustar codi en C

El nom del fitxer i la jerarquia de carpetes d'una vista parcial es poden col·locar en qualsevol lloc d'acord amb la llei d'alineació de la vista.

@model List<string>

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

Visualitzacions (HTML) (Vistes/Inici/index.cstml)

Encara que és la definició del costat HTML, hi ha pocs llocs per explicar perquè la part de visualització és bàsicament la majoria.

Per a la part del Servidor Parcial, podeu especificar l'etiqueta partial . Podeu ampliar la visualització parcial especificada. name Especifiqueu el nom de visualització per al i model especifiqueu els paràmetres d'enllaç per al . Això és similar al mètode PartialView al costat del controlador. Per cert, aquest és un procés de desplegament del servidor, de manera que el client ja l'ha desplegat quan rep l'HTML.

Càrrega del client Button Ajax Partial Ajax Parcial i botó Ajax Desplegament parcial desplegació asíncronament recuperada vistes parcials a les etiquetes div. Al costat del botó, hem col·locat un botó que especifica un botó que es pot recuperar correctament i una acció que no existeix a propòsit.

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

Visualitzacions (Javascript) (Vistes/Inici/index.cstml)

Javascript descriu què fer després de la pantalla inicial i què fer quan es prem el botó.

Truqueu a la funció de l'objecte jQuery i load truqueu al mètode M:System.Data.DataQuery.GetQuery(System.Object). Podeu obtenir una visualització parcial de manera asíncrona especificant l'acció de destinació (URL) com a primer argument. Si el contingut recuperat és HTML, es pot incrustar com a HTML dins de l'objecte jQuery.

El segon argument pot ser una funció de resposta, que li permet referir-se a l'estat recuperat, etc. És possible ramificar el procés en funció de si el resultat obtingut és normal o error.

Aquesta funció es pot substituir per una funció o funció, però ho load get fa una mica ajax més.

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