Gedeeltelijke weergave gebruiken om gedeeltelijke HTML asynchroon aan de clientzijde te laden

Milieu

Visual Studio

• Visual Studio 2019

ASP.NET Kern

• 3.1

Over het toevoegen van dynamische HTML-elementen

Wanneer u HTML-elementen dynamisch toevoegt, voegt u deze meestal toe in Javascript, bijvoorbeeld. Omdat het onafhankelijk van de webserverzijde wordt afgehandeld, kan het nodig zijn om het dubbel te beheren, zoals attribuutwaarden.

ASP.NET Core maakt gebruik van gedeeltelijke weergave. U HTML ophalen met serververwerking toegevoegd aan de gedeeltelijke HTML (.cshtml) die aan de serverzijde is gedefinieerd. Aan de clientzijde wordt deze HTML opgehaald en wordt een element toegevoegd aan de opgegeven locatie.

Wat zit er in het monster?

Hiermee definieert u een <ul><li> lijst met gedeeltelijke weergave.

Het deel van Server Partial toont de gedeeltelijke weergave die is gedefinieerd in index.cstml. Daarom wordt deze uitgebreid wanneer de weergave van de server wordt ontvangen.

Het onderdeel van de Client Load Ajax Partial is een T:System.Web.HTML-besturingselement onmiddellijk nadat de client de HTML heeft opgehaald en op het scherm wordt weergegeven. Hiermee wordt een gedeeltelijke weergave van de server opgehaald en weergegeven in Javascript.

De knop Ajax Part wordt gebruikt wanneer u op een knop drukt. Hiermee wordt een gedeeltelijke weergave van de server opgehaald en weergegeven in Javascript. Het proces is hetzelfde als Load. Het beschrijft ook de foutafhandeling als het niet mogelijk is om één keer te laden.

Controllers (HomeController.cs)

Hiermee definieert u de acties voor gedeeltelijke weergaven die moeten worden geladen tijdens de laadtijd en gedeeltelijke weergaven die moeten worden geladen wanneer de knop wordt ingedrukt.

Als u een gedeeltelijke PartialView weergave wilt retourneren, belt u de methode aan en keert u terug. U het model ook binden aan PartialView, dus List<string> we binden hier. U bepalen welke typen daadwerkelijk aan de weergavezijde zijn gebonden, wat precies hetzelfde is als de syntaxis van Razor, zoals index.cstml.

Het opgeven van de weergavenaam is hetzelfde als voor andere weergavefuncties.

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

Gedeeltelijke weergave (weergave/start/gedeeltelijk.cshtml)

Definieer een gedeeltelijke weergave in Part.cshtml. De inhoud is slechts een lijst van gebonden tekenreeksen li gerangschikt op tag. Het is precies hetzelfde als een normale weergave, dus wees niet bijzonder voorzichtig. Omdat het Razor syntax is, is het ook mogelijk om code in te sluiten in C

De bestandsnaam en maphiërarchie van een gedeeltelijke weergave kan overal worden geplaatst volgens de uitlijningswet van de weergave.

@model List<string>

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

Weergaven (HTML) (Weergaven/Start/index.cstml)

Hoewel het de definitie van de HTML-kant is, zijn er weinig plaatsen om uit te leggen omdat het weergavedeel in principe de meerderheid is.

Voor het onderdeel Server Partial u de partial tag opgeven. U de opgegeven gedeeltelijke weergave uitbreiden. name Geef de weergavenaam op voor en model geef de bindingsparameters op voor . Dit is vergelijkbaar met de PartiëleView-methode aan de kant van de controller. Dit is overigens een implementatieproces aan de serverzijde, dus de client heeft het al geïmplementeerd wanneer deze HTML ontvangt.

Client Load Ajax Button Ajax Partial Partial en Button Ajax Parting implement asynchroon opgehaalde gedeeltelijke weergaven om div-tags te delen. Aan de knopzijde hebben we een knop geplaatst die een knop aangeeft die met succes kan worden opgehaald en een actie die niet expres bestaat.

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

Weergaven (Javascript) (Weergaven/Start/index.cstml)

Javascript beschrijft wat te doen na de eerste weergave en wat te doen wanneer de knop wordt ingedrukt.

Bel de functie op het object jQuery en bel de load methode M:System.Data.DataQuery.GetQuery(System.Object). U een gedeeltelijke weergave asynchroon ophalen door de doelactie (URL) op te geven als het eerste argument. Als de opgehaalde inhoud HTML is, kan deze worden ingesloten als HTML in het object jQuery.

Het tweede argument kan een callback-functie zijn, waarmee u verwijzen naar de opgehaalde status, enz. Het is mogelijk om het proces te vertakken, afhankelijk van of het verkregen resultaat normaal of fout is.

Deze functie kan worden vervangen door een functie of functie, maar het load get doet een beetje ajax meer.

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