Brug delvis visning til at indlæse delvis HTML asynkront på klientsiden

Miljø

Visuel Studio

• Visual Studio 2019

ASP.NET kerne

• 3.1

Om at tilføje dynamiske HTML-elementer

Når du tilføjer HTML-elementer dynamisk, tilføjer du dem f.eks. Da den håndteres uafhængigt af webserversiden, kan det være nødvendigt at administrere den i dobbelt, f.eks.

ASP.NET Kerne bruger delvis visning. Du kan hente HTML med serverbehandling føjet til den delvise HTML (.cshtml), der er defineret på serversiden. På klientsiden hentes denne HTML, og der føjes et element til den angivne placering.

Hvad er der i prøven?

Definerer en <ul><li> liste over som en delvis visning.

Den del af Serverdels viser den delvise visning, der er defineret i index.cstml. Den udvides derfor, når visningen modtages fra serveren.

Den del af Client Load Ajax Partial er et T:System.Web.HTML-kontrolelement umiddelbart efter, at klienten henter HTML-koden og viser den på skærmen. Henter og viser en delvis visning fra serveren i Javascript.

Knappen Ajax Partial bruges, når du trykker på en knap. Henter og viser en delvis visning fra serveren i Javascript. Processen er den samme som Load. Den beskriver også fejlhåndteringen, hvis det ikke er muligt at indlæse én gang.

Controllere (HomeController.cs)

Definerer handlingerne for delvise visninger, der skal indlæses ved indlæsningstid, og delvise visninger, der skal indlæses, når der trykkes på knappen.

Hvis du vil returnere en PartialView delvis visning, skal du kalde metoden og returnere. Du kan også binde modellen til PartialView, List<string> så vi binder her. Du kan definere, hvilke typer der rent faktisk er bundet på visningssiden, hvilket er nøjagtig det samme som Razor-syntaksen, f.eks.

Angivelse af visningsnavnet er det samme som for andre visningsfunktioner.

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

Delvis visning (visninger/Hjem/Partial.cshtml)

Definer en delvis visning i Partial.cshtml. Indholdet er blot en liste over bundne strenge arrangeret li af tag. Det er nøjagtig det samme som en normal visning, så vær ikke særlig forsigtig. Da det er Razor syntaks, er det også muligt at integrere kode i C

Filnavnet og mappehierarkiet for en delvis visning kan placeres hvor som helst i henhold til visningens justeringslov.

@model List<string>

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

Visninger (HTML) (Visninger/Startside/index.cstml)

Selv om det er definitionen af HTML-side, er der få steder at forklare, fordi skærmen del er dybest set flertallet.

For den del af Server Partial kan du angive koden partial . Du kan udvide den angivne delvise visning. name Angiv visningsnavnet for , og model angiv bindingsparametrene for . Dette svarer til Metoden PartialView på controllersiden. Af den måde, er dette en server-side installationsproces, så klienten har allerede installeret det, når den modtager HTML.

Client Load Ajax Button Ajax Partial Delvis og Knap Ajax Delvis installere asynkront hentet delvis visninger til div tags. På knapsiden har vi placeret en knap, der angiver en knap, der kan hentes, og en handling, der ikke eksisterer med vilje.

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

Visninger (Javascript) (Visninger/Startside/index.cstml)

Javascript beskriver, hvad du skal gøre efter den første skærm, og hvad du skal gøre, når der trykkes på knappen.

Kald funktionen på jQuery-objektet, og kald load metoden M:System.Data.DataQuery.GetQuery(System.Object). Du kan få en delvis visning asynkront ved at angive destinationshandlingen (URL-adressen) som det første argument. Hvis det hentede indhold er HTML, kan det integreres som HTML i jQuery-objektet.

Det andet argument kan være en tilbagekaldsfunktion, som giver dig mulighed for at henvise til den hentede status osv. Det er muligt at forgrene processen, afhængigt af om det opnåede resultat er normalt eller fejl.

Denne funktion kan erstattes med en funktion eller funktion, men load get det gør lidt ajax mere.

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