השתמש בתצוגה חלקית כדי לטעון HTML חלקית באופן אסינכרוני בצד הלקוח

בסביבה

דירת סטודיו חזותית

• סטודיו חזותי 2019

ASP.NET הליבה

• 3.1

אודות הוספת רכיבי HTML דינאמיים

בעת הוספת רכיבי HTML באופן דינאמי, בדרך כלל אתה מוסיף אותם ב- Javascript, לדוגמה. מאחר שהוא מטופל באופן עצמאי בצד שרת האינטרנט, ייתכן שיהיה צורך לנהל אותו באופן כפול, כגון ערכי תכונה.

ASP.NET משתמש בתצוגה חלקית. באפשרותך לאחזר HTML עם עיבוד שרת שנוסף ל- HTML החלקי ( .cshtml) המוגדר בצד השרת. בצד הלקוח, HTML זה מאוחזר ורכיב נוסף למיקום שצוין.

מה יש בדגימה?

הגדרת רשימה <ul><li> של כתצוגה חלקית.

החלק של Server חלקי מציג את התצוגה החלקית המוגדרת ב- index.cstml. לכן, הוא מורחב כאשר התצוגה מתקבלת מהשרת.

החלק של לקוח טעינת Ajax חלקי הוא פקד T:System.Web.HTML מיד לאחר הלקוח מאחזר את ה- HTML ומציג אותו על המסך. אחזור והצגה של תצוגה חלקית מהשרת ב- Javascript.

הלחצן Ajax חלקית משמש בעת לחיצה על לחצן. אחזור והצגה של תצוגה חלקית מהשרת ב- Javascript. התהליך זהה ל-Load. הוא גם מתאר את הטיפול בשגיאות אם לא ניתן לטעון פעם אחת.

בקרים (HomeController.cs)

הגדרת הפעולות עבור תצוגות חלקיות לטעינה בזמן הטעינה ותצוגות חלקיות לטעינה בעת לחיצה על הלחצן.

כדי להחזיר תצוגה PartialView חלקית, התקשר לפעולת השירות והחזר. אתה יכול גם לאגד את המודל ל- List<string> PartialView, אז אנחנו מחייבים כאן. באפשרותך להגדיר אילו סוגים מאוגדים למעשה בצד התצוגה, שזה בדיוק אותו תחביר 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 מאוגדים המסודרות לפי תג. זה בדיוק כמו השקפה רגילה, אז אל תהיה זהיר במיוחד. מכיוון שזה תחביר רייזור, אפשר גם להטביע קוד ב-C

ניתן מיקום שם הקובץ והירארכיית התיקיות של תצוגה חלקית בכל מקום בהתאם לחוק היישור של התצוגה.

@model List<string>

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

תצוגות (HTML) (תצוגות/בית/index.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>

תצוגות (Javascript) (תצוגות/בית/index.cstml)

Javascript מתאר מה לעשות לאחר התצוגה הראשונית ומה לעשות בעת לחיצה על הלחצן.

התקשר לפונקציה באובייקט jQuery והתקשר load לפעולת השירות M:System.Data.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 + ')');
  }
});