ใช้มุมมองส่วนเพื่อโหลด HTML บางส่วนแบบอะซิงโครนัสบนไคลเอนต์

สภาพ แวด ล้อม

สตูดิโอภาพ

• สตูดิโอภาพ 2019

แกนASP.NET

• 3.1

เกี่ยวกับการเพิ่มองค์ประกอบ HTML แบบไดนามิก

เมื่อคุณเพิ่มองค์ประกอบ HTML แบบไดนามิก คุณมักจะเพิ่มองค์ประกอบใน Javascript ตัวอย่างเช่น เนื่องจากจัดการอย่างอิสระของฝั่งเว็บเซิร์ฟเวอร์ อาจจําเป็นต้องจัดการในสองเท่า เช่น ค่าแอตทริบิวต์

หลักASP.NETใช้มุมมองบางส่วน คุณสามารถเรียก HTML ด้วยการประมวลผลเซิร์ฟเวอร์เพิ่มไปยัง HTML บางส่วน (.cshtml) ที่กําหนดไว้ในฝั่งเซิร์ฟเวอร์ ในด้านไคลเอ็นต์ HTML นี้ถูกเรียกข้อมูลและองค์ประกอบจะถูกเพิ่มไปยังตําแหน่งที่ระบุ

อะไรอยู่ในตัวอย่าง

กําหนด <ul><li> รายการของเป็นมุมมองบางส่วน

ส่วนหนึ่งของ เซิร์ฟเวอร์บางส่วนแสดงมุมมองบางส่วนที่กําหนดไว้ใน index.cstml ดังนั้น จะขยายเมื่อมุมมองที่ได้รับจากเซิร์ฟเวอร์

ส่วนหนึ่งของไคลเอ็นต์โหลด Ajax บางส่วนเป็นตัวควบคุม T:System.Web.HTML ทันทีหลังจากที่ไคลเอนต์ดึง HTML และแสดงบนหน้าจอ ดึงข้อมูลและแสดงมุมมองบางส่วนจากเซิร์ฟเวอร์ใน Javascript

ปุ่ม Ajax บางส่วนจะใช้เมื่อคุณ กดปุ่ม ดึงข้อมูลและแสดงมุมมองบางส่วนจากเซิร์ฟเวอร์ใน Javascript กระบวนการจะเหมือนกับโหลด นอกจากนี้ยังอธิบายถึงการจัดการข้อผิดพลาดถ้าไม่สามารถโหลดครั้งเดียว

ตัวควบคุม (HomeController.cs)

กําหนดการดําเนินการสําหรับมุมมองบางส่วนเพื่อโหลดในเวลาที่โหลดและมุมมองบางส่วนที่จะโหลดเมื่อกดปุ่ม

เมื่อต้องการคืนค่ามุมมองบางส่วน PartialView ให้เรียกใช้วิธีการและส่งคืน นอกจากนี้คุณยังสามารถผูกรูปแบบเพื่อ PartialView, List<string> ดังนั้นเราจึงมีผลผูกพันที่นี่. คุณสามารถกําหนดชนิดที่เป็นจริงผูกบนด้านมุมมองซึ่งตรงกับไวยากรณ์ Razor เช่น index.cstml

การระบุชื่อมุมมองจะเหมือนกับฟังก์ชันมุมมองอื่นๆ

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

มุมมองบางส่วน (มุมมอง/หน้าแรก/บางส่วน.cshtml)

กําหนดมุมมองบางส่วนใน Partial.cshtml เนื้อหาเป็นเพียงรายการของสตริงที่ถูกผูก li ไว้โดยแท็ก มันเหมือนกับมุมมองปกติดังนั้นอย่าระมัดระวังเป็นพิเศษ เพราะมันเป็นไวยากรณ์ Razor ก็เป็นไปได้ที่จะฝังรหัสใน C

ชื่อไฟล์และลําดับชั้นของโฟลเดอร์ของมุมมองบางส่วนสามารถวางได้ทุกที่ตามกฎหมายการจัดตําแหน่งมุมมอง

@model List<string>

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

มุมมอง (HTML) (มุมมอง/หน้าแรก/ดัชนี.cstml)

แม้ว่าจะเป็นนิยามของด้าน HTML มีไม่กี่สถานที่อธิบายเพราะส่วนแสดงผลเป็นพื้นส่วนใหญ่

สําหรับส่วนของเซิร์ฟเวอร์ บางส่วน คุณสามารถระบุ partial แท็ก คุณสามารถขยายมุมมองบางส่วนที่ระบุได้ name ระบุชื่อมุมมองสําหรับ และ model ระบุพารามิเตอร์การผูกข้อมูลสําหรับ ซึ่งคล้ายกับวิธีการ PartialView บนด้านตัวควบคุม โดยวิธีการนี้เป็นกระบวนการปรับใช้ฝั่งเซิร์ฟเวอร์ เพื่อให้ไคลเอนต์ได้ปรับใช้แล้วเมื่อได้รับ HTML

โหลดลูกค้า Ajax Button Ajax Partialบางส่วนและปุ่ม Ajax บางส่วนปรับใช้อะซิงโครนัสดึงมุมมองบางส่วนเพื่อ div แท็ก. บนด้านปุ่มเราได้วางปุ่มที่ระบุปุ่มที่สามารถดึงสําเร็จและการกระทําที่ไม่มีอยู่ในวัตถุประสงค์

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

มุมมอง (จาวาสคริปต์) (มุมมอง/หน้าแรก/ดัชนี.cstml)

Javascript อธิบายสิ่งที่จะทําหลังจากการแสดงผลเริ่มต้นและสิ่งที่จะทําอย่างไรเมื่อกดปุ่ม

เรียกฟังก์ชันบนวัตถุ jQuery และเรียก load เมธอด M:System.DataQuery.GetQuery(System.Object) คุณสามารถเรียกดูมุมมองแบบอะซิงโครนัสบางส่วนได้โดยการระบุแอคชันเป้าหมาย (URL) เป็นอาร์กิวเมนต์แรก ถ้าเนื้อหาที่ดึงมาเป็น HTML จะสามารถฝังเป็น HTML ภายใน jQuery วัตถุ

อาร์กิวเมนต์ที่สองสามารถเป็นฟังก์ชันการเรียกกลับซึ่งช่วยให้คุณสามารถอ้างถึงสถานะที่เรียกข้อมูลฯลฯ มันเป็นไปได้ที่จะสาขากระบวนการขึ้นอยู่กับว่าผลที่ได้เป็นปกติหรือข้อผิดพลาด

ฟังก์ชันนี้สามารถเปลี่ยนด้วยฟังก์ชันหรือฟังก์ชัน แต่ load get จะไม่ ajax มากขึ้นเล็กน้อย

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