Utilisez Partial View pour charger html partiel asynchronité du côté client

Environnement

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.1

À propos de l’ajout d’éléments HTML dynamiques

Lorsque vous ajoutez des éléments HTML de manière dynamique, vous les ajoutez généralement en Javascript, par exemple. Étant donné qu’il est géré indépendamment du côté serveur Web, il peut être nécessaire de le gérer en double, tels que les valeurs d’attribut.

ASP.NET Core utilise l’affichage partiel. Vous pouvez récupérer html avec le traitement serveur ajouté au HTML partiel (.cshtml) défini du côté serveur. Du côté client, ce CODE HTML est récupéré et un élément est ajouté à l’emplacement spécifié.

Qu’y a-t-il dans l’échantillon ?

Définit une <ul><li> liste d’affichage partiel.

La partie de Server Partial affiche l’affichage partiel défini dans index.cstml. Par conséquent, il est étendu lorsque l’affichage est reçu du serveur.

La partie de la partie De charge client Ajax Partielle est un contrôle T:System.Web.HTML immédiatement après que le client récupère le CODE HTML et l’affiche à l’écran. Récupère et affiche une vue partielle à partir du serveur dans Javascript.

Le bouton Ajax Partial est utilisé lorsque vous appuyez sur un bouton. Récupère et affiche une vue partielle à partir du serveur dans Javascript. Le processus est le même que Charger. Il décrit également la gestion des erreurs s’il n’est pas possible de charger une fois.

Contrôleurs (HomeController.cs)

Définit les actions pour que les vues partielles se chargent au moment de la charge et les vues partielles à charger lorsque le bouton est appuyé.

Pour renvoyer une PartialView vue partielle, appelez la méthode et retournez. Vous pouvez également lier le modèle à PartialView, donc List<string> nous sommes contraignants ici. Vous pouvez définir quels types sont effectivement liés du côté de l’affichage, ce qui est exactement le même que la syntaxe Razor, tel que index.cstml.

La spécification du nom d’affichage est la même que pour les autres fonctions d’affichage.

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

Vue partielle (Vues/Accueil/Partiel.cshtml)

Définissez une vue partielle dans Partial.cshtml. Le contenu n’est qu’une liste de chaînes li liées disposées par balise. C’est exactement la même chose qu’une vue normale, alors ne soyez pas particulièrement prudent. Parce que c’est la syntaxe razor, il est également possible d’incorporer du code dans C

Le nom de fichier et la hiérarchie des dossiers d’une vue partielle peuvent être placés n’importe où conformément à la loi d’alignement de la vue.

@model List<string>

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

Vues (HTML) (Vues/Accueil/index.cstml)

Bien qu’il s’agit de la définition du côté HTML, il ya peu d’endroits à expliquer parce que la partie d’affichage est essentiellement la majorité.

Pour la partie de Server Partial, vous pouvez spécifier la balise partial . Vous pouvez étendre l’affichage partiel spécifié. name Spécifiez le nom d’affichage pour , et model spécifiez les paramètres de liaison pour . Ceci est similaire à la méthode PartialView du côté du contrôleur. Soit dit en passant, il s’agit d’un processus de déploiement côté serveur, de sorte que le client l’a déjà déployé quand il reçoit LE HTML.

Charge client Ajax Button Ajax Partial Partielle et Bouton Ajax Partielle déployer asynchronement récupéré des vues partielles sur les balises div. Du côté du bouton, nous avons placé un bouton qui spécifie un bouton qui peut être récupéré avec succès et une action qui n’existe pas exprès.

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

Vues (Javascript) (Vues/Accueil/index.cstml)

Javascript décrit ce qu’il faut faire après l’affichage initial et ce qu’il faut faire lorsque le bouton est appuyé.

Appelez la fonction sur l’objet jQuery et appelez la load méthode M:System.Data.DataQuery.GetQuery(System.Object). Vous pouvez obtenir une vue partielle de façon asynchrone en spécifiant l’action cible (URL) comme premier argument. Si le contenu récupéré est HTML, il peut être incorporé en HTML à l’intérieur de l’objet jQuery.

Le deuxième argument peut être une fonction de rappel, qui vous permet de vous référer à l’état récupéré, etc. Il est possible d’assaifier le processus selon que le résultat obtenu est normal ou une erreur.

Cette fonction peut être remplacée par une fonction ou une fonction, mais elle load get fait un peu ajax plus.

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