استخدام طريقة العرض الجزئية لتحميل HTML جزئي بشكل غير متزامن على جانب العميل

البيئه

استوديو مرئي

• ستوديو مرئي 2019

ASP.NET الأساسية

• 3.1

حول إضافة عناصر HTML ديناميكية

عند إضافة عناصر HTML بشكل حيوي، فإنك تقوم بإضافتها عادةً في جافا سكريبت، على سبيل المثال. لأنه تتم معالجة بشكل مستقل عن جانب ملقم ويب قد يكون من الضروري إدارته في مزدوجة، مثل قيم السمة.

ASP.NET يستخدم Core طريقة عرض جزئية. يمكنك استرداد HTML مع معالجة الملقم المضافة إلى HTML جزئية (.cshtml) المعرفة على جانب الملقم. على جانب العميل، يتم استرداد هذا HTML ويتم إضافة عنصر إلى الموقع المحدد.

ماذا يوجد في العينة؟

تعريف <ul><li> قائمة كـ طريقة عرض جزئية.

يعرض جزء من "الملقم الجزئي" طريقة العرض الجزئية المعرفة في index.cstml. لذلك، يتم توسيع عند تلقي طريقة العرض من الملقم.

الجزء من تحميل العميل Ajax جزئي هو عنصر تحكم T:System.Web.HTML مباشرة بعد استرداد العميل HTML ويعرضها على الشاشة. استرداد وعرض طريقة عرض جزئية من الخادم في Javascript.

يتم استخدام زر اياكس الجزئي عند الضغط على زر. استرداد وعرض طريقة عرض جزئية من الخادم في 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);
  }
}

طريقة عرض جزئية (طرق عرض/الصفحة الرئيسية/جزئية.cshtml)

تعريف طريقة عرض جزئية في Partial.cshtml. المحتوى هو مجرد قائمة من سلاسل منضم li مرتبة حسب العلامة. انها بالضبط نفس وجهة نظر عادية، لذلك لا تكن حذرا بشكل خاص. لأنه بناء الجملة الحلاقة، فمن الممكن أيضا لتضمين التعليمات البرمجية في 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 اياكس جزئي نشر طرق العرض الجزئية غير متزامن استردادها إلى علامات 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>

طرق العرض (جافا سكريبت) (طرق العرض/الصفحة الرئيسية/index.cstml)

جافا سكريبت يصف ما يجب القيام به بعد العرض الأولي وماذا تفعل عند الضغط على الزر.

استدعاء الدالة على الكائن jQuery و استدعاء load الأسلوب M:System.Data.DataQuery.GetQuery(System.object). يمكنك الحصول على طريقة عرض جزئية بشكل غير متزامن عن طريق تحديد الإجراء الهدف (URL) كوسيطة أولى. إذا كان المحتوى المسترد HTML، يمكن تضمينه كـ HTML داخل كائن مسج.

يمكن أن تكون الوسيطة الثانية دالة رد اتصال، والتي تسمح لك بالرجوع إلى حالة استردادها، إلخ. من الممكن أن تتفرع العملية استناداً إلى ما إذا كانت النتيجة التي تم الحصول عليها عادية أو خطأ.

يمكن استبدال هذه الوظيفة مع وظيفة أو وظيفة، ولكنها 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 + ')');
  }
});