Sử dụng Partial View để tải một phần HTML không đồng bộ trên máy khách

Môi trường

Visual Studio

• Visual Studio 2019

ASP.NET lõi

• 3.1

Giới thiệu về cách thêm thành phần HTML động

Khi bạn thêm các phần tử HTML một cách động, bạn thường thêm chúng vào Javascript, ví dụ. Bởi vì nó được xử lý một cách độc lập của phía máy chủ Web, nó có thể là cần thiết để quản lý nó trong đôi, chẳng hạn như giá trị thuộc tính.

ASP.NET Sử dụng Dạng xem Một phần. Bạn có thể truy xuất HTML với xử lý máy chủ được thêm vào HTML một phần (.cshtml) được xác định ở phía máy chủ. Về phía khách hàng, HTML này được lấy và một phần tử được thêm vào vị trí được chỉ định.

Có gì trong mẫu?

Defines a <ul><li> list of as a partial view.

Phần của Phần Máy chủ hiển thị dạng xem một phần được xác định trong index.cstml. Vì vậy, nó được mở rộng khi xem nhận được từ máy chủ.

Một phần của khách hàng tải Ajax một phần là một điều khiển T:System.Web.HTML ngay lập tức sau khi khách hàng lấy HTML và hiển thị nó trên màn hình. Truy xuất và hiển thị chế độ xem một phần từ máy chủ trong Javascript.

Nút Ajax một phần được sử dụng khi bạn nhấn một nút. Truy xuất và hiển thị chế độ xem một phần từ máy chủ trong Javascript. Quá trình này giống như tải. Nó cũng mô tả việc xử lý lỗi nếu không thể tải một lần.

Bộ điều khiển (HomeController.cs)

Xác định các hành động cho chế độ xem một phần để tải tại thời điểm tải và xem một phần để tải khi nút được nhấn.

Để trả về dạng xem PartialView một phần, hãy gọi phương thức và trả về. Bạn cũng có thể liên kết mô hình với PartialView, vì vậy List<string> chúng tôi đang liên kết ở đây. Bạn có thể xác định loại nào thực sự bị ràng buộc ở phía chế độ xem, chính xác giống như cú pháp Razor, chẳng hạn như index.cstml.

Chỉ định tên dạng xem giống như đối với các hàm dạng xem khác.

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

Dạng xem Một phần (Dạng xem/Trang chủ/Partial.cshtml)

Xác định dạng xem một phần trong Partial.cshtml. Nội dung chỉ là một danh sách các chuỗi bị ràng buộc li được sắp xếp theo thẻ. Nó giống hệt như một cái nhìn bình thường, vì vậy đừng đặc biệt cẩn thận. Bởi vì đó là cú pháp Razor, nó cũng có thể nhúng mã trong C

Tên tệp và cấu trúc phân cấp thư mục của dạng xem một phần có thể được đặt ở bất kỳ đâu theo luật căn chỉnh của dạng xem.

@model List<string>

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

Dạng xem (HTML) (Dạng xem/Trang chủ/index.cstml)

Mặc dù nó là định nghĩa của phía HTML, có vài nơi để giải thích bởi vì phần hiển thị về cơ bản là phần lớn.

Đối với một phần của Máy chủ Một phần, bạn có thể chỉ định thẻ partial . Bạn có thể mở rộng dạng xem một phần đã chỉ định. name Chỉ rõ tên dạng xem cho , và chỉ model định các tham số ràng buộc cho . Điều này tương tự như phương pháp PartialView ở phía bộ điều khiển. Bằng cách này, đây là một quá trình triển khai phía máy chủ, do đó, khách hàng đã triển khai nó khi nó nhận được HTML.

Khách hàng tải Ajax một phần và Button Ajax Partial nút Ajax một phần triển khai không đồng bộ lấy một phần quan điểm để div thẻ. Ở phía nút, chúng tôi đã đặt một nút chỉ định một nút có thể được truy xuất thành công và một hành động không tồn tại cố ý.

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

Lượt xem (Javascript) (Views/Home/index.cstml)

Javascript mô tả phải làm gì sau khi hiển thị ban đầu và phải làm gì khi nút được nhấn.

Gọi hàm trên đối tượng jQuery và gọi phương load thức M:System.Data.DataQuery.GetQuery(System.Object). Bạn có thể xem một phần không đồng bộ bằng cách chỉ định hành động đích (URL) làm đối số đầu tiên. Nếu nội dung được truy xuất là HTML, nó có thể được nhúng dưới dạng HTML bên trong đối tượng jQuery.

Đối số thứ hai có thể là một hàm gọi lại, cho phép bạn tham khảo trạng thái truy xuất, v.v. Có thể phân nhánh quá trình tùy thuộc vào kết quả thu được là bình thường hay lỗi.

Chức năng này có thể được thay thế bằng một chức năng hoặc chức năng, nhưng load get nó làm nhiều hơn một ajax chút.

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