Dalinio rodinio naudojimas daliniam HTML įkelti asinchroniškai kliento pusėje

Aplinkos

"Visual" studija

• Visual Studio 2019

ASP.NET branduolys

• 3.1

Apie dinaminių HTML elementų įtraukimą

Kai html elementus pridedate dinamiškai, paprastai įtraukiate juos, pvz., į "JavaScript". Kadangi jis tvarkomas nepriklausomai nuo žiniatinklio serverio pusės, gali reikėti jį valdyti dvigubai, pvz., atributų reikšmes.

ASP.NET Core naudoja dalinį rodinį. Galite gauti HTML su serverio apdorojimo įtraukta į dalinio HTML (.cshtml) nurodyta serverio pusėje. Kliento pusėje šis HTML nuskaitomas ir elementas įtraukiamas į nurodytą vietą.

Kas yra mėginyje?

Apibrėžia <ul><li> dalinio rodinio sąrašą.

Serverio dalinio dalis rodo dalinį rodinį, apibrėžtą index.cstml. Todėl jis išplečiamas, kai rodinys gaunamas iš serverio.

Kliento apkrovos Ajax Dalinis dalis yra T:System.Web.HTML kontrolės iš karto po to, kai klientas nuskaito HTML ir rodo jį ekrane. Nuskaito ir rodo dalinį rodinį iš serverio JavaScript.

Mygtukas Ajax Dalinis naudojamas, kai paspausite mygtuką. Nuskaito ir rodo dalinį rodinį iš serverio JavaScript. Procesas yra toks pat kaip apkrova. Jame taip pat aprašomas klaidų tvarkymas, jei neįmanoma įkelti vieną kartą.

Valdikliai (HomeController.cs)

Apibrėžia dalinių rodinių, kuriuos reikia įkelti įkėlimo metu, ir dalinių rodinių, kuriuos reikia įkelti paspaudus mygtuką, veiksmus.

Norėdami grąžinti dalinį PartialView rodinį, iškvieskite metodą ir grąžinkite. Taip pat galite susieti modelį su PartialView, todėl List<string> mes privalomas čia. Galite nurodyti, kurie tipai iš tikrųjų yra susieti rodinio pusėje, o tai yra lygiai tokia pati kaip Skustuvo sintaksė, pvz., index.cstml.

Rodinio pavadinimo nurodymas yra toks pat kaip ir kitų rodinio funkcijų.

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

Dalinis rodinys (Peržiūros/Pagrindinis/Dalinis.cshtml)

Daliniame rodinyje nustatykite dalinį rodinį Partial.cshtml. Turinys yra tik surištų eilučių li sąrašas, išdėstytas žyma. Tai lygiai tas pats, kaip normalus vaizdas, todėl neturi būti ypač atsargūs. Kadangi tai Skustuvo sintaksė, taip pat galima įdėti kodą į C

Dalinio rodinio failo vardą ir aplankų hierarchiją galima padėti bet kur pagal rodinio lygiuotės įstatymus.

@model List<string>

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

Rodiniai (HTML) (Peržiūros/Pagrindinis/index.cstml)

Nors tai yra HTML pusės apibrėžimas, yra keletas vietų paaiškinti, nes ekrano dalis iš esmės yra dauguma.

Dalies Serverio dalis galite nurodyti partial žymę . Galite išplėsti nurodytą dalinį rodinį. name Nurodykite rodinio pavadinimą ir model nurodykite susiejimo parametrus . Tai panašu į Dalinio rodinio metodą valdiklio pusėje. Beje, tai yra serverio diegimo procesas, todėl klientas jau įdiegė jį, kai gauna HTML.

Client Load Ajax Dalinis ir Button Ajax Partial mygtukas Ajax Dalinis dislokuoti asinchroniškai gauta dalinių nuomonėmis div žodžius. Mygtuko pusėje įdėjome mygtuką, nurodantį mygtuką, kurį galima sėkmingai nuskaityti, ir veiksmą, kurio nėra pagal paskirtį.

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

Rodiniai (JavaScript) (Views/Home/index.cstml)

Javascript aprašoma, ką daryti po pradinio ekrano ir ką daryti, kai mygtukas yra nuspaustas.

Iškvieskite funkciją jQuery objekto ir iškvieskite load M:System.Data.DataQuery.GetQuery(System.Object) metodą. Galite gauti dalinį rodinį asinchroniškai nurodydami paskirties veiksmą (URL) kaip pirmąjį argumentą. Jei gautas turinys yra HTML, jis gali būti įdėtas kaip HTML viduje jQuery objekto.

Antrasis argumentas gali būti atgalinio skambinimo funkcija, kuri leidžia jums nurodyti gautą būseną ir tt Procesą galima šakotyje, atsižvelgiant į tai, ar gautas rezultatas yra normalus, ar klaida.

Šią funkciją galima pakeisti funkcija ar funkcija, tačiau ji load get šiek tiek ajax daugiau.

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