استفاده از نمایش جزئی برای بارگذاری ناهمزمان HTML جزئی در سمت مشتری

محیط

ویژوال استودیو

• ویژوال استودیو ۲۰۱۹

ASP.NET هسته

• 3.1

درباره اضافه کردن عناصر HTML پویا

هنگامی که عناصر HTML را به صورت پویا اضافه می کنید، به طور معمول آنها را به صورت جاوا اسکریپت اضافه می کنید، برای مثال. از آنجا که آن را به طور مستقل از سمت وب سرور رسیدگی می شود، ممکن است لازم باشد آن را به صورت دو برابر مدیریت، مانند مقادیر ویژگی.

ASP.NET Core از Partial View استفاده می کند. شما می توانید HTML با پردازش سرور اضافه شده به HTML جزئی (.cshtml) تعریف شده در سمت سرور بازیابی. در سمت مشتری، این HTML بازیابی می شود و یک عنصر به محل مشخص شده اضافه می شود.

توي نمونه چيه؟

فهرستی از آن <ul><li> را به عنوان یک نمایش جزئی تعریف می کند.

قسمتی از Server Partial نمایش جزئی تعریف شده در index.cstml را نشان می دهد. بنابراین زمانی گسترش می یابد که منظره از سرور دریافت شود.

بخشی از Client Load Ajax Partial یک کنترل T:System.Web.HTML بلافاصله پس از بازیابی HTML مشتری و نمایش آن بر روی صفحه نمایش است. بازیابی و نمایش یک نمایش جزئی از سرور در جاوا اسکریپت.

وقتی دکمه ای را فشار می دهید از دکمه Ajax Partial استفاده می شود. بازیابی و نمایش یک نمایش جزئی از سرور در جاوا اسکریپت. فرایند همان Load است. همچنین در صورتی که امکان بارگذاری یک بار وجود ندارد، دست زدن به خطا را توصیف می کند.

کنترل کننده ها (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);
  }
}

نمایش جزئی (نمایش ها / صفحه اصلی / Partial.cshtml)

تعریف یک دیدگاه جزئی در Partial.cshtml. محتوا فقط یک لیست از رشته های محدود مرتب li شده توسط برچسب است. این دقیقا همان یک دیدگاه عادی است، بنابراین به خصوص مراقب باشید. چون نحو تیغ است، امکان جاسازی کد در C نیز وجود دارد

نام فایل و سلسله مراتب پوشه از یک نمایش جزئی را می توان در هر نقطه با توجه به قانون هم ترازی مشاهده قرار داده شده است.

@model List<string>

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

نمایش ها (HTML) (نمایش ها / صفحه اصلی / index.cstml)

اگرچه تعریف سمت HTML است، اما مکان های کمی برای توضیح وجود دارد زیرا بخش نمایش اساساً اکثریت است.

برای قسمت Server Partial می توانید تگ را مشخص کنید partial . شما می توانید نمایش جزئی مشخص شده را گسترش می دهد. تعیین name نام نمایش برای ، و تعیین پارامترهای اتصال model برای. این شبیه به روش PartialView در سمت کنترل کننده است. به هر حال، این یک فرایند استقرار سمت سرور است، بنابراین مشتری در حال حاضر آن را هنگامی که آن را دریافت HTML مستقر شده است.

مشتری بار آژاکسی جزئی و دکمه Button Ajax Partial آژاکسی جزئی استقرار ناهمزمان بازیابی نمایش جزئی به برچسب های غواصی. در سمت دکمه، دکمه ای را قرار داده اند که دکمه ای را مشخص می کند که می تواند با موفقیت بازیابی شود و اقدامی که از عمد وجود ندارد.

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

نمایش ها (جاوا اسکریپت) (نمایش ها / صفحه اصلی / index.cstml)

جاوا اسکریپت توصیف می کند که بعد از صفحه نمایش اولیه چه باید کرد و وقتی دکمه فشرده شد چه باید کرد.

با تابع روی شی 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 + ')');
  }
});