Utilice vista parcial para cargar HTML parcial de forma asincrónica en el lado del cliente

Ambiente

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.1

Acerca de la adición de elementos HTML dinámicos

Al agregar elementos HTML dinámicamente, normalmente los agrega en Javascript, por ejemplo. Dado que se controla independientemente del lado del servidor Web, puede ser necesario administrarlo en double, como los valores de atributo.

ASP.NET Core utiliza la vista parcial. Puede recuperar HTML con el procesamiento del servidor agregado al HTML parcial (.cshtml) definido en el lado del servidor. En el lado del cliente, se recupera este código HTML y se agrega un elemento a la ubicación especificada.

¿Qué hay en la muestra?

Define una <ul><li> lista de como una vista parcial.

La parte de Server Partial muestra la vista parcial definida en index.cstml. Por lo tanto, se expande cuando se recibe la vista desde el servidor.

La parte de la carga de cliente Ajax Partial es un control T:System.Web.HTML inmediatamente después de que el cliente recupera el HTML y lo muestra en la pantalla. Recupera y muestra una vista parcial del servidor en Javascript.

El botón Ajax Parcial se utiliza al pulsar un botón. Recupera y muestra una vista parcial del servidor en Javascript. El proceso es el mismo que Load. También describe el control de errores si no es posible cargar una vez.

Controladores (HomeController.cs)

Define las acciones para que las vistas parciales se carguen en tiempo de carga y que las vistas parciales se carguen cuando se presione el botón.

Para devolver una PartialView vista parcial, llame al método y devuelva. También puede enlazar el modelo a PartialView, por lo que List<string> estamos enlazando aquí. Puede definir qué tipos están enlazados realmente en el lado de la vista, que es exactamente el mismo que la sintaxis de Razor, como index.cstml.

Especificar el nombre de la vista es el mismo que para otras funciones de vista.

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 (Views/Home/Partial.cshtml)

Defina una vista parcial en Partial.cshtml. El contenido es sólo una lista de cadenas li enlazadas organizadas por etiqueta. Es exactamente lo mismo que una vista normal, así que no seas particularmente cuidadoso. Debido a que es la sintaxis de Razor, también es posible incrustar código en C

El nombre de archivo y la jerarquía de carpetas de una vista parcial se pueden colocar en cualquier lugar de acuerdo con la ley de alineación de la vista.

@model List<string>

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

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

Aunque es la definición del lado HTML, hay pocos lugares para explicar porque la parte de visualización es básicamente la mayoría.

Para la parte de Server Partial, puede especificar la etiqueta partial . Puede expandir la vista parcial especificada. name Especifique el nombre de la vista para , y model especifique los parámetros de enlace para . Esto es similar a la PartialView método en el lado del controlador. Por cierto, se trata de un proceso de implementación del lado servidor, por lo que el cliente ya lo ha implementado cuando recibe THE HTML.

Client Load Ajax Button Ajax Partial Partial y Button Ajax Partial implementan vistas parciales recuperadas asincrónicamente en etiquetas div. En el lado del botón, hemos colocado un botón que especifica un botón que se puede recuperar correctamente y una acción que no existe a propósito.

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

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

Javascript describe qué hacer después de la visualización inicial y qué hacer cuando se presiona el botón.

Llame a la función en el objeto jQuery y llame al load método M:System.Data.DataQuery.GetQuery(System.Object). Puede obtener una vista parcial de forma asincrónica especificando la acción de destino (URL) como primer argumento. Si el contenido recuperado es HTML, se puede incrustar como HTML dentro del objeto jQuery.

El segundo argumento puede ser una función de devolución de llamada, que le permite hacer referencia al estado recuperado, etc. Es posible bifurcar el proceso dependiendo de si el resultado obtenido es normal o error.

Esta función se puede reemplazar con una función o función, pero load get hace un poco 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 + ')');
  }
});