Użyj widoku częściowego, aby załadować częściowy kod HTML asynchronicznie po stronie klienta

Środowiska

Visual Studio

• Visual Studio 2019

Rdzeń ASP.NET

• 3.1

Dodawanie dynamicznych elementów HTML — informacje

Dynamicznie dodawać elementy HTML, zazwyczaj dodajesz je na przykład w javascript. Ponieważ jest obsługiwany niezależnie od strony serwera sieci Web, może być konieczne zarządzanie nim w podwójnej, takich jak wartości atrybutów.

ASP.NET Core używa widoku częściowego. Można pobrać kod HTML z przetwarzaniem serwera dodane do częściowego kodu HTML (cshtml) zdefiniowanego po stronie serwera. Po stronie klienta ten kod HTML jest pobierany, a element jest dodawany do określonej lokalizacji.

Co jest w próbce?

Definiuje <ul><li> listę jako widok częściowy.

Część częściowa serwera pokazuje widok częściowy zdefiniowany w pliku index.cstml. W związku z tym jest rozwijany po odebraniu widoku z serwera.

Część klienta Load Ajax Partial jest formantem T:System.Web.HTML natychmiast po pobraniu kodu HTML przez klienta i wyświetlenia go na ekranie. Pobiera i wyświetla widok częściowy z serwera w javascript.

Przycisk Ajax Partial jest używany po naciśnięciu przycisku. Pobiera i wyświetla widok częściowy z serwera w javascript. Proces jest taki sam jak Load. Opisano również obsługi błędów, jeśli nie jest możliwe, aby załadować raz.

Kontrolery (HomeController.cs)

Definiuje akcje dla widoków częściowych do załadowania w czasie ładowania i widoków częściowych, aby załadować po naciśnięciu przycisku.

Aby zwrócić PartialView widok częściowy, wywołaj metodę i wróć. Można również powiązać model z PartialView, więc List<string> jesteśmy powiązania w tym miejscu. Można zdefiniować, które typy są faktycznie powiązane po stronie widoku, która jest dokładnie taka sama jak składnia Razor, takich jak index.cstml.

Określanie nazwy widoku jest taka sama jak w przypadku innych funkcji widoku.

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

Widok częściowy (widoki/strona główna/częściowy.cshtml)

Zdefiniuj widok częściowy w częściowym.cshtml. Zawartość jest tylko listą powiązanych ciągów li uporządkowanych według tagu. Jest dokładnie taki sam jak normalny widok, więc nie bądź szczególnie ostrożny. Ponieważ jest to składnia Razor, możliwe jest również osadzenie kodu w C

Nazwa pliku i hierarchia folderów widoku częściowego można umieścić w dowolnym miejscu zgodnie z prawem wyrównania widoku.

@model List<string>

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

Widoki (HTML) (Widoki/Strona główna/index.cstml)

Chociaż jest to definicja strony HTML, istnieje kilka miejsc do wyjaśnienia, ponieważ część wyświetlania jest w zasadzie większość.

W przypadku części serwera częściowego można określić partial znacznik . Można rozwinąć określony widok częściowy. name Określ nazwę widoku dla , i model określ parametry wiązania dla . Jest to podobne do PartialView metody po stronie kontrolera. Nawiasem mówiąc, jest to proces wdrażania po stronie serwera, więc klient już wdrożył go po otrzymaniu kodu HTML.

Klient Załaduj Ajax Częściowe i Button Ajax Partial Przycisk Ajax Częściowe wdrażanie asynchronicznie pobranych widoków częściowych do znaczników div. Po stronie przycisku umieściliśmy przycisk, który określa przycisk, który można pomyślnie pobrać i akcję, która nie istnieje celowo.

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

Widoki (Javascript) (Widoki/Strona główna/index.cstml)

Javascript opisuje, co zrobić po pierwszym wyświetlaczu i co zrobić po naciśnięciu przycisku.

Wywołanie funkcji na obiekcie jQuery i wywołanie load metody M:System.Data.DataQuery.GetQuery(System.Object). Widok częściowy można uzyskać asynchronicznie, określając akcję docelową (ADRES URL) jako pierwszy argument. Jeśli pobrana zawartość to HTML, może być osadzona jako HTML wewnątrz obiektu jQuery.

Drugi argument może być funkcją wywołania zwrotnego, która umożliwia odwoływanie się do pobranego stanu itp. Istnieje możliwość rozgałęzienia procesu w zależności od tego, czy uzyskany wynik jest normalny, czy błąd.

Tę funkcję można zastąpić funkcją lub funkcją, ale load get robi to trochę ajax więcej.

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