Verwenden der Teilansicht zum asynchronen Laden von partiellem HTML auf der Clientseite

Umgebung

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.1

Informationen zum Hinzufügen dynamischer HTML-Elemente

Wenn Sie HTML-Elemente dynamisch hinzufügen, fügen Sie sie in der Regel z. B. in Javascript hinzu. Da es unabhängig von der Webserverseite behandelt wird, kann es erforderlich sein, es in doppelter Weise zu verwalten, z. B. Attributwerte.

ASP.NET Core verwendet die Teilansicht. Sie können HTML abrufen, wobei die Serververarbeitung dem teilweisen HTML (.cshtml) hinzugefügt wurde, der auf der Serverseite definiert ist. Auf der Clientseite wird dieser HTML-Code abgerufen, und dem angegebenen Speicherort wird ein Element hinzugefügt.

Was ist in der Stichprobe?

Definiert eine <ul><li> Liste von als Teilansicht.

Der Teil von Server Partial zeigt die in index.cstml definierte Teilansicht an. Daher wird sie erweitert, wenn die Ansicht vom Server empfangen wird.

Der Teil des Client Load Ajax Partial ist ein T:System.Web.HTML-Steuerelement unmittelbar nachdem der Client den HTML-Code abgerufen und auf dem Bildschirm angezeigt hat. Ruft eine Teilansicht vom Server in Javascript ab und zeigt sie an.

Die Taste Ajax Partial wird verwendet, wenn Sie eine Taste drücken. Ruft eine Teilansicht vom Server in Javascript ab und zeigt sie an. Der Prozess ist derselbe wie Load. Es beschreibt auch die Fehlerbehandlung, wenn es nicht möglich ist, einmal zu laden.

Controller (HomeController.cs)

Definiert die Aktionen für Teilansichten, die zum Laden geladen werden sollen, und Für Teilansichten, die geladen werden sollen, wenn die Schaltfläche gedrückt wird.

Um eine PartialView Teilansicht zurückzugeben, rufen Sie die Methode auf, und geben Sie zurück. Sie können das Modell auch an PartialView binden, daher List<string> sind wir hier verbindlich. Sie können definieren, welche Typen tatsächlich auf der Ansichtsseite gebunden sind, was genau der Razor-Syntax entspricht, z. B. index.cstml.

Die Angabe des Ansichtsnamens ist die gleiche wie für andere Ansichtsfunktionen.

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

Teilansicht (Ansichten/Home/Partial.cshtml)

Definieren Sie eine Teilansicht in Partial.cshtml. Der Inhalt ist nur eine Liste gebundener Zeichenfolgen, die li nach Tag angeordnet sind. Es ist genau das gleiche wie eine normale Ansicht, also seien Sie nicht besonders vorsichtig. Da es sich um Razor-Syntax handelt, ist es auch möglich, Code in C einzubetten.

Der Dateiname und die Ordnerhierarchie einer Teilansicht können entsprechend dem Ausrichtungsgesetz der Ansicht an einer beliebigen Stelle platziert werden.

@model List<string>

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

Ansichten (HTML) (Ansichten/Home/index.cstml)

Obwohl es die Definition der HTML-Seite ist, gibt es nur wenige Orte zu erklären, da der Anzeigeteil im Grunde die Mehrheit ist.

Für den Teil von Server Partial können Sie das Tag partial angeben. Sie können die angegebene Teilansicht erweitern. name Geben Sie den Ansichtsnamen für an, und model geben Sie die Bindungsparameter für an. Dies ähnelt der PartialView-Methode auf der Controllerseite. Übrigens handelt es sich um einen serverseitigen Bereitstellungsprozess, sodass der Client ihn bereits bereitgestellt hat, wenn er THE HTML empfängt.

Client Load Ajax Partial und Button Ajax Partial Button Ajax Partial stellen asynchron abgerufene Teilansichten für div-Tags bereit. Auf der Schaltflächenseite haben wir eine Schaltfläche platziert, die eine Schaltfläche angibt, die erfolgreich abgerufen werden kann, und eine Aktion, die absichtlich nicht vorhanden ist.

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

Ansichten (Javascript) (Ansichten/Home/index.cstml)

Javascript beschreibt, was nach der ersten Anzeige zu tun ist und was zu tun ist, wenn die Taste gedrückt wird.

Rufen Sie die Funktion für das jQuery-Objekt auf, und rufen Sie die load M:System.Data.DataQuery.GetQuery(System.Object)-Methode auf. Sie können eine Teilansicht asynchron abrufen, indem Sie die Zielaktion (URL) als erstes Argument angeben. Wenn der abgerufene Inhalt HTML ist, kann er als HTML in das jQuery-Objekt eingebettet werden.

Das zweite Argument kann eine Rückruffunktion sein, mit der Sie auf den abgerufenen Status usw. verweisen können. Es ist möglich, den Prozess zu verzweigen, je nachdem, ob das erhaltene Ergebnis normal oder Fehler ist.

Diese Funktion kann durch eine Funktion oder Funktion ersetzt werden, aber sie load get tut ein wenig ajax mehr.

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