Използване на частично изглед за зареждане на частичен HTML асинхронно от страна на клиента

Околната среда

Визуално студио

• Изглед от 10 до 2008

ASP.NET ядро

• 3.1

За добавянето на динамични HTML елементи

Когато добавяте HTML елементи динамично, обикновено ги добавяте в Javascript, например. Тъй като се обработва независимо от уеб сървъра страна, може да се наложи да го управлявате в двойна, като атрибут стойности.

ASP.NET Core използва частичен изглед. Можете да извлечете HTML с сървър обработка, добавен към частична HTML (.cshtml) от страна на сървъра. От страна на клиента този HTML се извлича и елемент се добавя към указаното местоположение.

Какво има в пробата?

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

Част от сървъра част от показва частичен изглед, определен в index.cstml. Затова е разширен, когато изгледът е получен от сървъра.

Част от клиент натоварване Ajax частичен е T:System.Web.HTML контрол веднага след като клиентът извлича HTML и го показва на екрана. Извлича и показва частичен изглед от сървъра в Javascript.

Бутонът Ajax Частичен се използва, когато натиснете бутон. Извлича и показва частичен изглед от сървъра в Javascript. Процесът е същият като Load. Той също така описва обработката на грешки, ако не е възможно да се зареди веднъж.

Контролери (HomeController.cs)

Определя действията за частично изгледи за зареждане по време на зареждане и частично изгледи за зареждане, когато бутонът е натиснат.

За да върнете частичен PartialView изглед, обадете се на метода и се върнете. Можете също така да свържете модела с Partialвюю, така че 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)

Дефинирайте частичен изглед в Частичен.cshtml. Съдържанието е само списък с обвързани li низове, подредени по етикет. Това е абсолютно същото като нормалното, така че не бъдете особено внимателни. Тъй като това е синтаксис Razor, също така е възможно да вграждате код в 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) (Изгледи/Начало/индекс.cstml)

Javascript описва какво да се прави след първоначалния дисплей и какво да се прави, когато бутонът е натиснат.

Повикване функцията на обект jQuery и обадете load се M: System.Data.DataQuery.GetQuery (система.обект) метод. Можете да получите асинхронно частично изглед, като зададете целевото действие (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 + ')');
  }
});