Use o Visualização Parcial para carregar HTML parcial assincronicamente no lado do cliente

Ambiente

Estúdio Visual

• Visual Studio 2019

Núcleo ASP.NET

• 3.1

Sobre adicionar elementos HTML dinâmicos

Quando você adiciona elementos HTML dinamicamente, você normalmente os adiciona no Javascript, por exemplo. Como ele é tratado independentemente do lado do servidor Web, pode ser necessário gerenciá-lo em dobro, como valores de atributos.

ASP.NET Core usa exibição parcial. Você pode recuperar HTML com processamento de servidor adicionado ao HTML parcial (.cshtml) definido no lado do servidor. No lado do cliente, este HTML é recuperado e um elemento é adicionado ao local especificado.

O que tem na amostra?

Define uma <ul><li> lista de como uma visão parcial.

A parte do Server Partial mostra a visualização parcial definida em index.cstml. Portanto, ele é expandido quando a visualização é recebida do servidor.

A parte da carga do cliente Ajax Partial é um controle T:System.Web.HTML imediatamente após o cliente recuperar o HTML e exibi-lo na tela. Recupera e exibe uma exibição parcial do servidor em Javascript.

O botão Ajax Partial é usado quando você aperta um botão. Recupera e exibe uma exibição parcial do servidor em Javascript. O processo é o mesmo que o Load. Ele também descreve o tratamento de erro se não for possível carregar uma vez.

Controladores (HomeController.cs)

Define as ações para que as visualizações parciais carreguem na hora da carga e visualizações parciais para carregar quando o botão é pressionado.

Para retornar uma PartialView visão parcial, ligue para o método e retorne. Você também pode vincular o modelo ao ParcialView, por isso List<string> estamos ligando aqui. Você pode definir quais tipos estão realmente vinculados no lado da vista, que é exatamente o mesmo que a sintaxe de Razor, como index.cstml.

Especificar o nome de exibição é o mesmo que para outras funções de exibição.

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

Defina uma visão parcial em Parcial.cshtml. O conteúdo é apenas uma lista de strings vinculadas li organizadas por tag. É exatamente o mesmo que uma visão normal, então não tenha muito cuidado. Porque é sintaxe naval, também é possível incorporar código em C

O nome do arquivo e a hierarquia da pasta de uma exibição parcial podem ser colocados em qualquer lugar de acordo com a lei de alinhamento da exibição.

@model List<string>

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

Visualizações (HTML) (Views/Home/index.cstml)

Embora seja a definição do lado HTML, há poucos lugares para explicar porque a parte de exibição é basicamente a maioria.

Para a parte do Servidor Parcial, você pode especificar a tag partial . Você pode expandir a visualização parcial especificada. name Especifique o nome de exibição e model especifique os parâmetros de vinculação para . Isso é semelhante ao método ParcialView no lado do controlador. A propósito, este é um processo de implantação do lado do servidor, então o cliente já o implantou quando recebe o HTML.

Carga do cliente Ajax Parcial e Button Ajax Partial Button Ajax Parcial implantam vistas parciais assíncrodas para as etiquetas div. No lado do botão, colocamos um botão que especifica um botão que pode ser recuperado com sucesso e uma ação que não existe de 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>

Visualizações (Javascript) (Views/Home/index.cstml)

Javascript descreve o que fazer após o visor inicial e o que fazer quando o botão é pressionado.

Ligue para a função no objeto jQuery e ligue para o load método M:System.DataQuery.GetQuery(System.Object). Você pode obter uma visualização parcial assincronous especificando a ação de destino (URL) como o primeiro argumento. Se o conteúdo recuperado for HTML, ele pode ser incorporado como HTML dentro do objeto jQuery.

O segundo argumento pode ser uma função de retorno de chamada, que permite que você se refira ao status recuperado, etc. É possível ramificar o processo dependendo se o resultado obtido é normal ou erro.

Esta função pode ser substituída por uma função ou função, mas load get faz um pouco ajax mais.

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