ग्राहक पक्ष पर आंशिक एचटीएमएल को अतुलकर लोड करने के लिए आंशिक दृश्य का उपयोग करें

वातावरण

विजुअल स्टूडियो

• विजुअल स्टूडियो 2019

ASP.NET कोर

• 3.1

गतिशील एचटीएमएल तत्वों को जोड़ने के बारे में

जब आप एचटीएमएल तत्वों को गतिशील रूप से जोड़ते हैं, तो आप आमतौर पर उन्हें जावास्क्रिप्ट में जोड़ते हैं, उदाहरण के लिए। चूंकि इसे वेब सर्वर साइड से स्वतंत्र रूप से संभाला जाता है, इसलिए इसे दोहरे में प्रबंधित करना आवश्यक हो सकता है, जैसे कि विशेषता मूल्य।

ASP.NET कोर आंशिक दृश्य का उपयोग करता है। आप सर्वर की ओर से परिभाषित आंशिक एचटीएमएल (.cshtml) में जोड़े गए सर्वर प्रोसेसिंग के साथ एचटीएमएल को पुनः प्राप्त कर सकते हैं। ग्राहक पक्ष पर, इस HTML को वापस लाया जाता है और निर्दिष्ट स्थान पर एक तत्व जोड़ा जाता है।

नमूने में क्या है?

आंशिक दृश्य के रूप में एक सूची को परिभाषित करता <ul><li> है।

सर्वर आंशिक का हिस्सा index.cstml में परिभाषित आंशिक दृश्य दिखाता है। इसलिए सर्वर से व्यू मिलने पर इसका विस्तार किया जाता है।

क्लाइंट लोड अजाक्स आंशिक का हिस्सा एक टी: System.Web.HTML नियंत्रण है, जिसके तुरंत बाद ग्राहक एचटीएमएल को पुनः प्राप्त करता है और इसे स्क्रीन पर प्रदर्शित करता है। जावास्क्रिप्ट में सर्वर से आंशिक दृश्य प्राप्त करता है और प्रदर्शित करता है।

बटन जब आप एक बटन दबाते हैं तो अजाक्स आंशिक का उपयोग किया जाता है। जावास्क्रिप्ट में सर्वर से आंशिक दृश्य प्राप्त करता है और प्रदर्शित करता है। प्रक्रिया लोड के समान है। यह त्रुटि हैंडलिंग का भी वर्णन करता है यदि एक बार लोड करना संभव नहीं है।

नियंत्रक (HomeController.cs)

लोड समय पर लोड करने के लिए आंशिक दृश्यों के लिए कार्यों को परिभाषित करता है और बटन दबाए जाने पर लोड करने के लिए आंशिक दृश्य।

आंशिक दृश्य लौटाने के 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);
  }
}

आंशिक दृश्य (दृश्य/होम/आंशिक.cshtml)

आंशिक रूप से एक आंशिक दृश्य को परिभाषित करें। सामग्री टैग द्वारा व्यवस्थित बाध्य तारों की एक सूची li है। यह बिल्कुल एक सामान्य दृश्य के समान है, इसलिए विशेष रूप से सावधान न रहें। क्योंकि यह रेज़र वाक्य रचना है, यह भी सी में कोड एंबेड करने के लिए संभव है

आंशिक दृश्य का फ़ाइल नाम और फ़ोल्डर पदानुक्रम दृश्य के संरेखण कानून के अनुसार कहीं भी रखा जा सकता है।

@model List<string>

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

विचार (HTML) (दृश्य/होम/इंडेक्स.cstml)

हालांकि यह एचटीएमएल पक्ष की परिभाषा है, लेकिन समझाने के लिए कुछ स्थान हैं क्योंकि प्रदर्शन हिस्सा मूल रूप से बहुमत है।

सर्वर आंशिक के हिस्से के लिए, आप टैग निर्दिष्ट कर सकते partial हैं। आप निर्दिष्ट आंशिक दृश्य का विस्तार कर सकते हैं। nameइसके लिए व्यू नाम निर्दिष्ट करें और model इसके लिए बाध्यकारी मापदंडों को निर्दिष्ट करें . यह नियंत्रक पक्ष पर आंशिक दृश्य विधि के समान है। वैसे, यह एक सर्वर-साइड तैनाती प्रक्रिया है, इसलिए ग्राहक ने एचटीएमएल प्राप्त होने पर इसे पहले ही तैनात कर दिया है।

क्लाइंट लोड अजाक्स आंशिक और 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>

दृश्य (जावास्क्रिप्ट) (दृश्य/होम/इंडेक्स.सीएसटीएमएल)

जावास्क्रिप्ट बताता है कि शुरुआती डिस्प्ले के बाद क्या करना है और बटन दबाने पर क्या करना है।

जेक्वेरी ऑब्जेक्ट पर फ़ंक्शन को कॉल करें और load एम:सिस्टम.डेटा.डेटाक्वेरी.गेटक्वेरी (System.Object) विधि पर कॉल करें। आप पहले तर्क के रूप में लक्ष्य कार्रवाई (यूआरएल) निर्दिष्ट करके एक आंशिक दृश्य प्राप्त कर सकते हैं। यदि प्राप्त सामग्री एचटीएमएल है, तो इसे जेक्वेरी ऑब्जेक्ट के अंदर एचटीएमएल के रूप में एम्बेडेड किया जा सकता है।

दूसरा तर्क एक कॉलबैक फ़ंक्शन हो सकता है, जो आपको पुनः प्राप्त स्थिति आदि का उल्लेख करने की अनुमति देता है। प्राप्त परिणाम सामान्य है या त्रुटि के आधार पर प्रक्रिया को शाखा करना संभव है।

इस फ़ंक्शन को किसी फ़ंक्शन या फ़ंक्शन के साथ बदला जा सकता है, लेकिन यह 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 + ')');
  }
});