Используйте частичное представление для частичной загрузки HTML асинхронно на стороне клиента

Среды

Визуальная студия

• Визуальная студия 2019

ASP.NET ядро

• 3.1

О добавлении динамических элементов HTML

При динамическом добавлять HTML-элементы обычно добавляют их, например, в Javascript. Поскольку он обрабатывается независимо от стороны веб-сервера, может потребоваться управлять им в два раза, например значения атрибутов.

ASP.NET Core использует частичное представление. Вы можете получить HTML с помощью обработки сервера, добавленного к частичному HTML (.cshtml), определенному на стороне сервера. Со стороны клиента этот HTML извлекается и элемент добавляется в указанное местоположение.

Что в образце?

Определяет список <ul><li> как частичное представление.

Часть Server Partial показывает частичное представление, определенное в index.cstml. Таким образом, он расширяется, когда представление получено с сервера.

Частью частичной загрузки клиента Ajax является управление T:System.Web.HTML сразу после того, как клиент извлекает HTML и отображает его на экране. Извлекает и отображает частичное представление с сервера в Javascript.

Кнопка Ajax Partial используется при нажатия кнопке. Извлекает и отображает частичное представление с сервера в 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);
  }
}

Частичный вид (Виды/Дом/Partial.cshtml)

Определите частичное представление в Partial.cshtml. Содержимое является лишь списком связанных li строк, расположенных тегом. Это точно так же, как нормальный вид, так что не будьте особенно осторожны. Поскольку это синтаксис Razor, также можно встроить код в C

Имя файла и иерархия папок частичного представления могут быть размещены в любом месте в соответствии с законом выравнивания представления.

@model List<string>

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

Просмотры (HTML) (Виды/Home/index.cstml)

Хотя это определение HTML стороны, Есть несколько мест, чтобы объяснить, потому что часть дисплея в основном большинство.

Для части частичного сервера можно указать partial тег. Можно расширить указанное частичное представление. name Укажите название представления и model укажите параметры привязки для . Это похоже на метод PartialView на стороне контроллера. Кстати, это процесс развертывания на стороне сервера, поэтому клиент уже развернул его, когда получает HTML.

Клиент загружает Ajax Button Ajax Partial Partial и Button Ajax Частично развертывайте асинхронно извлеченные частичные представления для див-тегов. На стороне кнопки, мы разместили кнопку, которая определяет кнопку, которая может быть успешно извлечена и действие, которое не существует нарочно.

<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) (Виды/Home/index.cstml)

Javascript описывает, что делать после первоначального отображения и что делать при нажатии кнопки.

Позвоните в функцию на объекте j-Кери и load позвоните методу M:System.Data.Data.Get-ay (System.Object). Вы можете получить частичное представление асинхронно, указав целевое действие (URL) в качестве первого аргумента. Если извлеченное содержимое HTML, оно может быть встроено в HTML внутри объекта j-Кери.

Вторым аргументом может быть функция обратного вызова, которая позволяет ссылаться на полученный статус и т.д. Процесс можно ветвить в зависимости от того, является ли полученный результат нормальным или ошибкой.

Эта функция может быть заменена функцией или функцией, но 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 + ')');
  }
});