Χρήση μερικής προβολής για την ασύγχρονη φόρτωση μερικής HTML από την πλευρά του υπολογιστή-πελάτη

Περιβάλλον

Οπτικό στούντιο

• Visual Studio 2019

πυρήνας ASP.NET

• 3.1

Πληροφορίες για την προσθήκη δυναμικών στοιχείων HTML

Όταν προσθέτετε δυναμικά στοιχεία HTML, συνήθως τα προσθέτετε σε Javascript, για παράδειγμα. Επειδή ο χειρισμός γίνεται ανεξάρτητα από την πλευρά του διακομιστή Web, ίσως χρειαστεί να το διαχειριστείτε με διπλό τρόπο, όπως τιμές χαρακτηριστικών.

ASP.NET πυρήνας χρησιμοποιεί μερική προβολή. Μπορείτε να ανακτήσετε HTML με επεξεργασία διακομιστή που προστίθεται στη μερική HTML (.cshtml) που ορίζεται από την πλευρά του διακομιστή. Από την πλευρά του υπολογιστή-πελάτη, αυτή η HTML ανακτάται και ένα στοιχείο προστίθεται στην καθορισμένη θέση.

Τι έχει το δείγμα;

Ορίζει μια <ul><li> λίστα ως μερική προβολή.

Το τμήμα του "Μερικό διακομιστή" εμφανίζει τη μερική προβολή που ορίζεται στο index.cstml. Επομένως, επεκτείνεται όταν λαμβάνεται η προβολή από το διακομιστή.

Το τμήμα του φορτίου ajax του προγράμματος-πελάτη είναι ένα στοιχείο ελέγχου T:System.Web.HTML αμέσως μετά την ανάκτηση του HTML από τον υπολογιστή-πελάτη και την εμφανίζει στην οθόνη. Ανακτά και εμφανίζει μια μερική προβολή από το διακομιστή σε Javascript.

Το κουμπί Ajax Partial χρησιμοποιείται όταν πατάτε ένα κουμπί. Ανακτά και εμφανίζει μια μερική προβολή από το διακομιστή σε 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 ταξινομημένων με ετικέτα. Είναι ακριβώς το ίδιο με μια κανονική άποψη, οπότε μην είστε ιδιαίτερα προσεκτικοί. Επειδή είναι σύνταξη Razor, είναι επίσης δυνατό να ενσωματώσετε κώδικα στο 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 Κουμπί Ajax Μερική ανάπτυξη ασύγχρονα ανακτηθεί μερικές προβολές σε tag 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>

Προβολές (Javascript) (Προβολές/Αρχική σελίδα/index.cstml)

Javascript περιγράφει τι πρέπει να κάνετε μετά την αρχική οθόνη και τι πρέπει να κάνετε όταν πατηθεί το κουμπί.

Καλέστε τη συνάρτηση στο αντικείμενο 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 + ')');
  }
});