Gunakan Tampilan Parsial untuk memuat sebagian HTML secara tidak sinkron di sisi klien

Lingkungan

Visual Studio

• Lihat riwayat suntingan dalam bahasa Inggris.

ASP.NET Inti

• 3.1

Tentang menambahkan elemen HTML dinamis

Ketika Anda menambahkan elemen HTML secara dinamis, Anda biasanya menambahkannya di Javascript, misalnya. Karena ditangani secara independen dari sisi server Web, mungkin perlu untuk mengelolanya dua kali lipat, seperti nilai atribut.

ASP.NET Core menggunakan Tampilan Sebagian. Anda dapat mengambil HTML dengan pemrosesan server ditambahkan ke HTML parsial (.cshtml) didefinisikan di sisi server. Di sisi klien, HTML ini diambil dan elemen ditambahkan ke lokasi yang ditentukan.

Apa yang ada dalam sampel?

Mendefinisikan <ul><li> daftar sebagai tampilan parsial.

Bagian dari Server parsial menunjukkan tampilan parsial yang didefinisikan dalam index.cstml. Oleh karena itu, diperluas ketika tampilan yang diterima dari server.

Bagian dari klien beban Ajax parsial adalah kontrol T:System.Web.HTML segera setelah klien mengambil HTML dan menampilkannya di layar. Mengambil dan menampilkan tampilan parsial dari server di Javascript.

Tombol Ajax Parsial digunakan ketika Anda menekan tombol. Mengambil dan menampilkan tampilan parsial dari server di Javascript. Prosesnya sama dengan Load. Ini juga menjelaskan penanganan kesalahan jika tidak mungkin untuk memuat sekali.

Pengontrol (HomeController.cs)

Menentukan tindakan untuk tampilan parsial untuk dimuat pada waktu pemuatan dan tampilan parsial untuk dimuat saat tombol ditekan.

Untuk mengembalikan tampilan PartialView parsial, hubungi metode dan kembali. Anda juga dapat mengikat model ke PartialView, jadi List<string> kami mengikat di sini. Anda dapat menentukan jenis mana yang benar-benar terikat di sisi tampilan, yang persis sama dengan sintaks Razor, seperti index.cstml.

Menentukan nama tampilan sama dengan fungsi tampilan lainnya.

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

Tampilan Sebagian (Tampilan/Rumah/Sebagian.cshtml)

Tentukan tampilan parsial di Partial.cshtml. Konten hanyalah daftar string terikat yang diatur li berdasarkan tag. Ini persis sama dengan pandangan normal, jadi jangan terlalu berhati-hati. Karena sintaks Razor, anda juga dapat menyematkan kode dalam C

Nama file dan hierarki folder tampilan parsial dapat ditempatkan di mana saja sesuai dengan hukum perataan tampilan.

@model List<string>

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

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

Meskipun itu adalah definisi dari sisi HTML, ada beberapa tempat untuk dijelaskan karena bagian tampilan pada dasarnya adalah mayoritas.

Untuk bagian dari Server Partial, Anda dapat menentukan partial tag . Anda dapat memperluas tampilan parsial yang ditentukan. name Tentukan nama tampilan untuk , dan tentukan model parameter pengikatan untuk . Ini mirip dengan metode PartialView di sisi controller. By the way, ini adalah proses penyebaran sisi server, sehingga klien telah disebarkan ketika menerima HTML.

Klien beban Ajax Button Ajax Partial parsial dan tombol Ajax parsial menyebarkan asynchronously diambil sebagian dilihat ke div tag. Di sisi tombol, kami telah menempatkan tombol yang menentukan tombol yang dapat berhasil diambil dan tindakan yang tidak ada dengan sengaja.

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

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

Javascript menjelaskan apa yang harus dilakukan setelah tampilan awal dan apa yang harus dilakukan ketika tombol ditekan.

Memanggil fungsi pada objek jQuery dan memanggil load metode M:System.Data.DataQuery.GetQuery(System.Object). Anda bisa mendapatkan tampilan parsial secara asinkron dengan menentukan tindakan target (URL) sebagai argumen pertama. Jika konten yang diambil adalah HTML, itu dapat disematkan sebagai HTML di dalam objek jQuery.

Argumen kedua dapat menjadi fungsi callback, yang memungkinkan Anda untuk merujuk ke status yang diambil, dll. Dimungkinkan untuk cabang proses tergantung pada apakah hasil yang diperoleh normal atau kesalahan.

Fungsi ini dapat diganti dengan fungsi atau fungsi, tetapi load get tidak sedikit ajax lagi.

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