Kısmi HTML'yi istemci tarafına zaman uyumsuz olarak yüklemek için Kısmi Görünüm'i kullanma

Ortam

Görsel Stüdyo

• Visual Studio 2019

ASP.NET Çekirdek

• 3.1

Dinamik HTML öğeleri ekleme hakkında

HTML öğelerini dinamik olarak eklediğinizde, bunları genellikle Javascript'e eklersiniz, örneğin. Web sunucusu tarafından bağımsız olarak işlendiğinden, öznitelik değerleri gibi çift olarak yönetilmesi gerekebilir.

ASP.NET Core Kısmi Görünüm kullanır. Sunucu tarafında tanımlanan kısmi HTML'ye (.cshtml) eklenen sunucu işlemleriyle HTML alabilirsiniz. İstemci tarafında, bu HTML alınır ve belirtilen konuma bir öğe eklenir.

Örnekte ne var?

Kısmi görünüm olarak bir <ul><li> liste tanımlar.

Server Partial'in bölümü index.cstml'de tanımlanan kısmi görünümü gösterir. Bu nedenle, görünüm sunucudan alındığında genişletilir.

İstemci Yükü Ajax Partial'nin bir Bölümü, istemci HTML'yi alıp ekranda görüntülersonra bir T:System.Web.HTML denetimidir. Javascript'te sunucudan kısmi bir görünüm alır ve görüntüler.

Bir düğmeye bastığınızda Ajax Partial düğmesi kullanılır. Javascript'te sunucudan kısmi bir görünüm alır ve görüntüler. İşlem Yük ile aynıdır. Ayrıca, bir kez yüklemek mümkün değilse hata işleme açıklar.

Denetleyiciler (HomeController.cs)

Düğmeye basıldığında yüklemek için kısmi görünümlerin yüklenme süresini ve kısmi görünümleri yüklemek için eylemleri tanımlar.

Kısmi bir görünüm döndürmek için PartialView yöntemi arayın ve geri dönün. Modeli PartialView'e de bağlayabilirsiniz, bu nedenle List<string> burada bağlayıcıyız. Görünüm tarafında gerçekte hangi türlerin bağlı olduğunu tanımlayabilirsiniz, bu da index.cstml gibi Razor sözdizimiile tam olarak aynıdır.

Görünüm adını belirtmek diğer görünüm işlevleriyle aynıdır.

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

Kısmi Görünüm (Görünümler/Ev/Kısmi.cshtml)

Kısmi.cshtml'de kısmi bir görünüm tanımlayın. İçerik, etikete göre düzenlenmiş bağlı dizelerin yalnızca bir li listesidir. Bu tam olarak normal bir görünüm olarak aynı, bu yüzden özellikle dikkatli olmayın. Razor sözdizimi olduğundan, C'ye kod katıştırmak da mümkündür.

Kısmi görünümün dosya adı ve klasör hiyerarşisi, görünümün hizalama yasasına göre herhangi bir yere yerleştirilebilir.

@model List<string>

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

Görünümler (HTML) (Görünümler/Ev/index.cstml)

HTML tarafının tanımı olmasına rağmen, ekran parçası temelde çoğunluğu olduğu için açıklamak için birkaç yer vardır.

Sunucu Kısmi bölümü için etiketi partial belirtebilirsiniz. Belirtilen kısmi görünümü genişletebilirsiniz. name Görünüm adını belirtin ve model '' için bağlama parametrelerini belirtin. Bu denetleyici tarafında PartialView yöntemine benzer. Bu arada, bu bir sunucu tarafı dağıtım işlemidir, bu nedenle istemci HTML aldığında zaten dağıtmıştır.

İstemci Yük Button Ajax Partial Ajax Kısmi ve Düğme Ajax Kısmi div etiketleri için eşzamanlı olarak alınan kısmi görünümleri dağıtmak. Düğme tarafında, başarıyla alınabilen bir düğme yi ve kasıtlı olarak var olmayan bir eylemi belirten bir düğme yerleştirdik.

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

Görünümler (Javascript) (Görünümler/Ev/index.cstml)

Javascript, ilk ekrandan sonra ne yapmanız gerektiğini ve düğmeye basıldığında ne yapmanız gerektiğini açıklar.

jQuery nesnesi üzerindeki işlevi arayın ve load M:System.Data.DataQuery.GetQuery(System.Object) yöntemini arayın. Hedef eylemi (URL) ilk bağımsız değişken olarak belirterek kısmi bir görünüm elde edebilirsiniz. Alınan içerik HTML ise, jQuery nesnesinin içine HTML olarak katıştırılabilir.

İkinci bağımsız değişken, alınan duruma vb. başvurmanızı sağlayan bir geri arama işlevi olabilir. Elde edilen sonucun normal mi yoksa hata mı olduğuna bağlı olarak işlemi dallandırmak mümkündür.

Bu işlev bir işlev veya işlevle değiştirilebilir, ancak load get biraz daha fazlasını ajax yapar.

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