Daļēja skata izmantošana, lai klienta pusē asinhroni ielādētu daļēju HTML

Vides

Visual Studio

• Visual Studio 2019 Visual Studio 2019

ASP.NET Core

• 3.1

Par dinamisku HTML elementu pievienošanu

Dinamiski pievienojot HTML elementus, parasti tos pievieno, piemēram, Javascript. Tā kā ar to rīkojas neatkarīgi no Web servera puses, iespējams, tā ir jāpārvalda divreiz, piemēram, atribūtu vērtības.

ASP.NET Core izmanto daļējs skats. Varat izgūt HTML ar servera apstrādi, kas pievienota daļējam HTML (.cshtml), kas definēts servera pusē. Klienta pusē šis HTML tiek izgūts un elements tiek pievienots norādītajai atrašanās vietai.

Kas ir paraugā?

Definē <ul><li> kā daļēju skatu sarakstu.

Servera daļēja daļa parāda daļēju skatu, kas definēts index.cstml. Tādēļ tas tiek izvērsts, kad skats tiek saņemts no servera.

Daļa no klienta load Ajax daļēja ir T:System.Web.HTML kontrole tūlīt pēc tam, kad klients izgūst HTML un parāda to uz ekrāna. Izgūst un parāda daļēju skatu no servera Javascript.

Poga Ajax Daļēja tiek izmantota, kad nospiežat pogu. Izgūst un parāda daļēju skatu no servera Javascript. Process ir tāds pats kā ielādēt. Tas arī apraksta kļūdu apstrādi, ja to nav iespējams ielādēt vienu reizi.

Kontrolieri (HomeController.cs)

Definē darbības daļējiem skatiem, kas jāielādē ielādes laikā, un daļējus skatus, kas jāielādē, nospiežot pogu.

Lai atgrieztu daļēju PartialView skatu, izsauciet metodi un atgriezieties. Jūs varat arī saistīt modeli ar PartialView, List<string> tāpēc mēs esam saistoši šeit. Var definēt, kuri tipi skata pusē faktiski ir saistīti, kas ir tieši tāds pats kā Razor sintakse, piemēram, index.cstml.

Skata nosaukuma norādīšana ir tāda pati kā citām skata funkcijām.

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

Daļēja View (Views / Home / Partial.cshtml)

Definējiet daļēju skatu daļējā skatā daļējā cshtml. Saturs ir tikai saraksts ar saistītām virknēm, li kas sakārtotas pēc taga. Tas ir tieši tāds pats kā normāls skats, tāpēc nav īpaši uzmanīgi. Jo tas ir Razor sintakse, tas ir arī iespējams iegult kodu C

Daļēja skata faila nosaukumu un mapju hierarhiju var novietot jebkurā vietā saskaņā ar skata līdzinājuma likumu.

@model List<string>

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

Skati (HTML) (Views/Home/index.cstml)

Lai gan tā ir definīcija HTML pusē, ir dažas vietas, lai izskaidrotu, jo displeja daļa būtībā ir vairākums.

Servera daļējas daļas daļai varat norādīt partial tagu . Varat izvērst norādīto daļējo skatu. name Norādiet skata nosaukumu un model norādiet saistījuma parametrus programmai . Tas ir līdzīgs PartialView metodi kontrollera pusē. Starp citu, tas ir servera puses izvietošanas process, tāpēc klients jau ir izvietots, kad tas saņem HTML.

Client Load Ajax Button Ajax Partial Daļēja un poga Ajax Daļēja izvietot asinhroni izgūt daļēju viedokli div tagus. Pogas pusē mēs esam likuši pogu, kas norāda pogu, kuru var veiksmīgi izgūt, un darbību, kas nepastāv ar nolūku.

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

Skati (Javascript) (Skati/Sākums/indekss.cstml)

Javascript apraksta, ko darīt pēc sākotnējā displeja un ko darīt, kad poga ir nospiesta.

Izsauciet funkciju jQuery objektu un load izsauciet metodi M:System.Data.DataQuery.GetQuery(System.Object). Daļēju skatu var iegūt asinhroni, kā pirmo argumentu norādot mērķa darbību (URL). Ja izgūtais saturs ir HTML, to var iegult kā HTML iekšpusē jQuery objektu.

Otrais arguments var būt atzvanīšanas funkcija, kas ļauj atsaukties uz izgūto statusu utt. Ir iespējams zarot atkarībā no tā, vai iegūtais rezultāts ir normāls vai kļūda.

Šo funkciju var aizstāt ar funkciju vai funkciju, bet load get tas nedaudz ajax vairāk.

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