Använd partiell vy för att läsa in partiell HTML-asynkront på klientsidan

Miljö

Visuell studio

• Visual Studio 2019

ASP.NET kärna

• 3.1

Om att lägga till dynamiska HTML-element

När du lägger till HTML-element dynamiskt lägger du vanligtvis till dem i exempelvis Javascript. Eftersom den hanteras oberoende av webbserversidan kan det vara nödvändigt att hantera det i dubbel, till exempel attributvärden.

ASP.NET Core använder Partiell vy. Du kan hämta HTML med serverbearbetning som lagts till den partiella HTML (.cshtml) som definierats på serversidan. På klientsidan hämtas denna HTML-kod och ett element läggs till på den angivna platsen.

Vad finns i provet?

Definierar en <ul><li> lista över som en partiell vy.

Delen av Server Partial visar den partiella vy som definierats i index.cstml. Därför expanderas när vyn tas emot från servern.

Den del av klienten Ladda Ajax Partiell är en T:System.Web.HTML kontroll omedelbart efter att klienten hämtar HTML och visar den på skärmen. Hämtar och visar en partiell vy från servern i Javascript.

Knappen Ajax Partial används när du trycker på en knapp. Hämtar och visar en partiell vy från servern i Javascript. Processen är samma som Load. Den beskriver också felhanteringen om det inte går att ladda en gång.

Controllers (HomeController.cs)

Definierar åtgärderna för partiella vyer att ladda vid inläsning tid och partiella vyer att ladda när knappen trycks.

Om du vill returnera en PartialView delvy anropar du metoden och returnerar. Du kan också binda modellen till PartialView, List<string> så vi är bindande här. Du kan definiera vilka typer som faktiskt är bundna på vysidan, vilket är exakt samma som Razor-syntax, till exempel index.cstml.

Att ange vynamnet är samma som för andra vyfunktioner.

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

Partiell vy (vyer/Hem/Partiell.cshtml)

Definiera en delvy i Partial.cshtml. Innehållet är bara en lista med bundna strängar li ordnade efter tagg. Det är exakt samma som en normal vy, så var inte särskilt försiktig. Eftersom det är Razor syntax, det är också möjligt att bädda in kod i C

Filnamnet och mapphierarkin för en partiell vy kan placeras var som helst enligt vyns justeringslag.

@model List<string>

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

Vyer (HTML) (Vyer/Startsida/index.cstml)

Även om det är definitionen av HTML-sidan, det finns få ställen att förklara eftersom displayen delen är i grunden majoriteten.

För den del av Server Partiell kan du ange partial taggen . Du kan expandera den angivna delvyn. name Ange vynamnet för , och ange model bindningsparametrarna för . Detta liknar Metoden PartialView på handkontrollens sida. Förresten är detta en distributionsprocess på serversidan, så klienten har redan distribuerat den när den tar emot HTML-

Client Load Ajax Button Ajax Partial Partiell och Button Ajax Delvis distribuera asynkront hämtat partiella vyer till div-taggar. På knappsidan har vi placerat en knapp som anger en knapp som kan hämtas utan problem och en åtgärd som inte finns med flit.

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

Vyer (Javascript) (Visningar/Startsida/index.cstml)

Javascript beskriver vad man ska göra efter den inledande visningen och vad som ska gå till när knappen trycks ned.

Anropa funktionen på jQuery-objektet och anropa load M:System.Data.DataQuery.GetQuery(System.Object)-metoden. Du kan få en partiell vy asynkront genom att ange målåtgärden (URL) som det första argumentet. Om det hämtade innehållet är HTML kan det bäddas in som HTML inuti jQuery-objektet.

Det andra argumentet kan vara en motringningsfunktion, som gör att du kan referera till hämtad status, etc. Det är möjligt att förgrena processen beroende på om det erhållna resultatet är normalt eller fel.

Denna funktion kan ersättas med en funktion eller funktion, men load get det gör lite ajax mer.

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