Osittaisen näkymän avulla voit ladata osittaisen HTML-koodin asynkronisesti asiakaspuolelle

Ympäristö

Visuaalinen studio

• Visuaalinen studio 2019

ASP.NET ydin

• 3.1

Tietoja dynaamisten HTML-elementtien lisäämisestä

Kun lisäät HTML-elementtejä dynaamisesti, ne yleensä lisätään esimerkiksi Javascriptiin. Koska sitä käsitellään Web-palvelimen puolelta riippumatta, sitä on ehkä hallittava kaksinkertaisesti, kuten määritearvoina.

ASP.NET Core käyttää osittainen näkymä. Voit hakea HTML-koodia palvelimen käsittely lisätään osittainen HTML (.cshtml) määritelty palvelimen puolella. Asiakaspuolella tämä HTML haetaan ja elementti lisätään määritettyyn sijaintiin.

Mitä näytteessä on?

Määrittää <ul><li> osittaisen näkymän luettelon.

Palvelimen osittaisen osan osittaista näkymää indeksi.cstml.In Tämän vuoksi näkymää laajennetaan, kun näkymä vastaanotetaan palvelimelta.

Asiakaskuormituksen Osa Ajax Partial on T:System.Web.HTML-ohjausobjekti heti, kun asiakas hakee HTML-koodin ja näyttää sen näytössä. Hakee ja näyttää osittaisen näkymän palvelimelta Javascriptissä.

Painiketta Ajax Partial käytetään, kun painat painiketta. Hakee ja näyttää osittaisen näkymän palvelimelta Javascriptissä. Prosessi on sama kuin Load. Siinä kuvataan myös virheiden käsittely, jos sitä ei voi ladata kerran.

Ohjaimet (HomeController.cs)

Määrittää toiminnot, jotka koskevat osittaisia näkymiä latautumaan lataushetkellä, ja osittaiset näkymät, jotka ladataan painiketta painettaessa.

Voit palauttaa osittaisen PartialView näkymän soittamalla menetelmään ja palaat. Voit myös sitoa mallin PartialViewiin, joten List<string> sidomme täällä. Voit määrittää, mitkä tyypit ovat todella sidottu näkymän puolella, joka on täsmälleen sama kuin Razor syntaksi, kuten index.cstml.

Näkymän nimen määrittäminen on sama kuin muissa näkymäfunktioissa.

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);
  }
}

Osittainen näkymä (Näkymät/Home/Partial.cshtml)

Määritä osittainen näkymä Partial.cshtml-tiedostossa. Sisältö on vain luettelo sidotuista li merkkijonoista, jotka on järjestetty tunnisteen mukaan. Se on täsmälleen sama kuin normaali näkymä, joten älä ole erityisen varovainen. Koska se on Razor syntaksi, se on myös mahdollista upottaa koodin C

Osittaisen näkymän tiedostonimi ja kansiohierarkia voidaan sijoittaa mihin tahansa näkymän kohdistuslain mukaan.

@model List<string>

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

Näkymät (HTML) (Näkymät/Koti/index.cstml)

Vaikka se on määritelmä HTML puolella, on olemassa muutamia paikkoja selittää, koska näyttö osa on pohjimmiltaan suurin osa.

Palvelimen osittaisen osan osalta voit määrittää partial tunnisteen . Voit laajentaa määritetyn osittaisen näkymän. name Määritä -näkymän nimi ja model määritä sidontaparametrit kohteelle . Tämä vastaa ohjaimen puolella olevaa PartialView-menetelmää. Tämä on muuten palvelinpuolen käyttöönottoprosessi, joten asiakas on jo ottanut sen käyttöön, kun se vastaanottaa HTML-koodin.

Client Load Ajax Osittainen ja Button Ajax Partial Button Ajax Osittainen käyttöön asynkronisesti haettu osittainen näkymät div tags. Painikkeen puolella on painike, joka määrittää painikkeen, joka voidaan hakea onnistuneesti ja toiminto, jota ei ole tarkoituksella.

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

Näkymät (Javascript) (Näkymät / Home / index.cstml)

Javascript kuvaa, mitä tehdä ensimmäisen näytön jälkeen ja mitä tehdä, kun painiketta painetaan.

Kutsu jQuery-objektin funktiota ja kutsu load M:System.Data.DataQuery.GetQuery(System.Object)-menetelmää. Voit tarkastella osittaista näkymää asynkronisesti määrittämällä kohdetoiminnon (URL) ensimmäiseksi argumentiksi. Jos haettu sisältö on HTML-koodia, se voidaan upottaa HTML:nä jQuery-objektin sisään.

Toinen argumentti voi olla takaisinsoittotoiminto, jonka avulla voit viitata haettuun tilaan jne. Prosessi voidaan haarautua sen mukaan, onko saatu tulos normaali vai virhe.

Tämä toiminto voidaan korvata toiminnolla tai toiminnolla, mutta se load get tekee hieman ajax enemmän.

$(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 + ')');
  }
});