Gunakan Paparan Separa untuk memuatkan sebahagian HTML secara asynchronously di sebelah pelanggan

Persekitaran

Visual Studio

• Studio Visual 2019

ASP.NET Teras

• 3.1

Mengenai menambah elemen HTML dinamik

Apabila anda menambah elemen HTML secara dinamik, anda biasanya menambahnya dalam Javascript, sebagai contoh. Kerana ia dikendalikan secara bebas dari sisi pelayan Web, mungkin perlu menguruskannya dalam dua kali ganda, seperti nilai atribut.

ASP.NET Teras menggunakan Paparan Separa. Anda boleh mendapatkan HTML dengan pemprosesan pelayan yang ditambahkan pada separa HTML (.cshtml) yang ditakrifkan di sisi pelayan. Di sisi pelanggan, HTML ini diambil dan elemen ditambah ke lokasi yang ditentukan.

Apa yang ada dalam sampel?

<ul><li>Mentakrifkan senarai sebagai paparan separa.

Bahagian Separa Pelayan menunjukkan paparan separa yang ditakrifkan dalam index.cstml. Oleh itu, ia diperluaskan apabila pandangan diterima daripada pelayan.

Bahagian Load Ajax Sebahagian daripada Pelanggan adalah kawalan T:System.Web.HTML sejurus selepas pelanggan mendapatkan HTML dan memaparkannya di skrin. Dapatkan semula dan memaparkan paparan separa daripada pelayan dalam Javascript.

Butang Ajax Separa digunakan apabila anda menekan butang. Dapatkan semula dan memaparkan paparan separa daripada pelayan dalam Javascript. Prosesnya adalah sama seperti Beban. Ia juga menerangkan pengendalian ralat jika tidak dapat dimuatkan sekali.

Pengawal (HomeController.cs)

Mentakrifkan tindakan untuk paparan separa untuk dimuatkan pada masa beban dan pandangan separa untuk dimuatkan apabila butang ditekan.

Untuk mengembalikan pandangan PartialView separa, hubungi kaedah dan pulangan. Anda juga boleh mengikat model ke PartialView, List<string> jadi kami mengikat di sini. Anda boleh menentukan jenis mana yang sebenarnya terikat pada bahagian pandangan, yang sama seperti syntax Razor, seperti index.cstml.

Menentukan nama paparan adalah sama seperti untuk fungsi paparan lain.

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

Pandangan Separa (Pandangan / Rumah/Separa.cshtml)

Tentukan paparan separa dalam Separa.cshtml. Kandungannya hanyalah senarai rentetan terikat yang li diatur oleh tag. Ia sama seperti pandangan biasa, jadi jangan berhati-hati. Kerana ia adalah syntax Razor, ia juga mungkin untuk membenamkan kod dalam C

Nama fail dan hierarki folder paparan separa boleh diletakkan di mana-mana sahaja mengikut undang-undang penjajaran pandangan.

@model List<string>

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

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

Walaupun ia adalah definisi sebelah HTML, terdapat beberapa tempat untuk dijelaskan kerana bahagian paparan pada dasarnya adalah majoriti.

Untuk bahagian Separa Pelayan, anda boleh menentukan partial tag . Anda boleh mengembangkan paparan separa yang ditentukan. name Tentukan nama paparan untuk , dan model tentukan parameter yang mengikat untuk . Ini sama dengan kaedah SeparaView di sebelah pengawal. Dengan cara ini, ini adalah proses penggunaan bahagian pelayan, jadi pelanggan telah menggunakannya apabila ia menerima HTML.

Pelanggan Memuatkan Ajax Separa Button Ajax Partial dan Butang Ajax Sebahagian penggunaan separa asynchronously mendapatkan pandangan separa untuk menyelam tag. Di sisi butang, kami telah meletakkan butang yang menentukan butang yang boleh berjaya diambil dan tindakan yang tidak wujud pada tujuan.

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

Pandangan (Javascript) (Views/Home/index.cstml)

Javascript menerangkan apa yang perlu dilakukan selepas paparan awal dan apa yang perlu dilakukan apabila butang ditekan.

Hubungi fungsi pada objek jQuery dan hubungi load kaedah M:System.Data.DataQuery.GetQuery (System.Object). Anda boleh mendapatkan pandangan separa asynchronously dengan menentukan tindakan sasaran (URL) sebagai hujah pertama. Jika kandungan yang diambil adalah HTML, ia boleh dibenamkan sebagai HTML di dalam objek jQuery.

Hujah kedua boleh menjadi fungsi panggil balik, yang membolehkan anda merujuk kepada status yang diambil, dan lain-lain. Ia adalah mungkin untuk cawangan proses bergantung kepada sama ada keputusan yang diperoleh adalah normal atau kesilapan.

Fungsi ini boleh digantikan dengan fungsi atau fungsi, load get tetapi ia tidak lebih ajax sedikit.

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