کلائنٹ کی طرف جزوی HTML synchronously لوڈ کرنے کے لیے جزوی منظر استعمال کریں

ماحول

بصری سٹوڈیو

• بصری سٹوڈیو 2019

ASP.NET کور

• 3.1

متحرک ایچ ٹی ایم ایل عناصر کو شامل کرنے کے بارے میں

جب آپ HTML عناصر کو متحرک طور پر شامل کرتے ہیں ، تو آپ عام طور پر جاوا اسکرپٹ میں شامل کرتے ہیں ، مثال کے طور پر. کیونکہ یہ ویب سرور کی طرف سے آزادانہ طور پر سنبھالا جاتا ہے ، یہ ڈبل میں اس کا انتظام کرنے کے لئے ضروری ہوسکتا ہے ، جیسے خصوصیت اقدار.

ASP.NET کور جزوی نقطہ نظر استعمال کرتا ہے. آپ اس سرور کی طرف سے جزوی HTML میں شامل سرور پروسیسنگ کے ساتھ ایچ ٹی ایم ایل کو دوبارہ حاصل کرسکتے ہیں (. cshtml). کلائنٹ کی طرف ، اس HTML کو بازیافت کیا جاتا ہے اور مخصوص مقام میں ایک عنصر شامل کیا جاتا ہے.

نمونے میں کیا ہے ؟

ایک <ul><li> جزوی منظر کے طور پر کی ایک فہرست کی وضاحت کرتا ہے.

سرور کا حصہ جزوی طور پر index. cstml میں وضاحت جزوی نقطہ نظر دکھاتا ہے. لہذا ، جب سرور سے منظر موصول ہوتا ہے تو یہ توسیع کی جاتی ہے.

کلائنٹ لوڈ ایجیکس جزوی کا حصہ ایک t:system.web.html کنٹرول فوری طور پر کلائنٹ کے لئے ایچ ٹی ایم ایل کو بازیافت اور سکرین پر دکھاتا ہے. بازیافت کریں اور جاوا اسکرپٹ میں سرور سے ایک جزوی نقطہ نظر دکھاتا ہے.

بٹن ایجیکس جزوی استعمال کیا جاتا ہے جب آپ بٹن دبائیں. بازیافت کریں اور جاوا اسکرپٹ میں سرور سے ایک جزوی نقطہ نظر دکھاتا ہے. عمل لوڈ کے طور پر ایک ہی ہے. یہ ایک بار لوڈ کرنے کے لئے ممکن نہیں ہے تو یہ بھی غلطی کو سنبھالنے کی وضاحت.

کنٹرولرز (HomeController.cs)

جب بٹن دبایا جاتا ہے لوڈ کرنے کے لئے لوڈ کے وقت اور جزوی خیالات لوڈ کرنے کے لئے جزوی خیالات کے اعمال کی وضاحت کرتا ہے.

جزوی منظر واپس کرنے کے لئے PartialView ، طریقہ کو کال کریں اور واپس جائیں ۔ آپ پارٹاالویو کو بھی ماڈل باندھ سکتے ہیں ، لہذا List<string> ہم یہاں پابند ہیں. آپ اس کی وضاحت کرسکتے ہیں کہ کونسی اقسام اصل میں نقطہ نظر پر پابند ہیں ، جو بالکل استرا نحو جیسے ہی ہے ، جیسے انڈیکس. 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)

جزوی میں جزوی نقطہ نظر کی وضاحت کریں. مواد صرف li ٹیگ کی طرف سے اہتمام پابند تار کی ایک فہرست ہے. یہ ایک عام نقطہ نظر کے طور پر بالکل ایک ہی ہے ، تو خاص طور پر محتاط نہ ہو. کیونکہ یہ استرا نحو ہے ، یہ C میں کوڈ کو سرایت کرنے کے لئے بھی ممکن ہے

ایک جزوی نقطہ نظر کے فائل کا نام اور فولڈر کے تنظیمی ڈھانچے کو کہیں بھی رکھا جا سکتا ہے نقطہ نظر کی سیدھ قانون کے مطابق.

@model List<string>

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

مناظر (HTML) (مناظر/ہوم/انڈیکس. cstml)

اگرچہ یہ ایچ ٹی ایم ایل کی طرف سے تعریف ہے ، اس کی وضاحت کرنے کے لئے کچھ جگہیں ہیں کیونکہ ڈسپلے حصہ بنیادی طور پر اکثریت ہے.

سرور جزوی کے حصے کے لئے ، آپ ٹیگ کی وضاحت کرسکتے ہیں partial . آپ اختصاصی جزوی منظر وسیع کر سکتے ہیں ۔ name کے لئے دیکھیں نام کی وضاحت کریں ، اور model کے لئے پابند پیرامیٹرز کی وضاحت کریں. یہ کنٹرولر کی طرف پارٹاالویو طریقہ کی طرح ہے. ویسے ، یہ ایک سرور کی طرف سے تعیناتی عمل ہے ، لہذا کلائنٹ پہلے ہی اس پر تعینات ہے جب یہ ایچ ٹی ایم ایل وصول کرتا ہے.

کلائنٹ لوڈ ایجیکس جزوی اور 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>

مناظر (جاوا اسکرپٹ) (مناظر/ہوم/انڈیکس. cstml)

جاوا سکرپٹ کی وضاحت کرتا ہے کہ ابتدائی ڈسپلے کے بعد کیا کرنا ہے اور جب بٹن دبایا جاتا ہے تو کیا کرنا ہے.

JQuery آبجیکٹ پر فعل کو کال کریں اور load m:system.data.dataquery.getquery (نظام. آبجیکٹ) طریقہ کو کال کریں ۔ آپ کو ہدف کے عمل کی وضاحت کرکے جزوی نقطہ نظر اقلیت حاصل کر سکتے ہیں (URL) پہلی دلیل کے طور پر. اگر اخذ کردہ مواد ایچ ٹی ایم ایل ہے تو ، یہ jQuery اعتراض کے اندر 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 + ')');
  }
});