Використання часткового подання для асинхронного завантаження часткового 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> прив'язуємо тут. Можна визначити, які типи фактично прив'язані до перегляду, який точно так само, як синтаксис бритви, наприклад 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) (Перегляди/Домашня сторінка/індекс.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) (Перегляди/Головна/індекс.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 + ')');
  }
});