부분 보기를 사용하여 클라이언트 측에 부분 HTML을 비동기적으로 로드합니다.

환경.

Visual Studio.

• Visual Studio 2019.

ASP.NET Core.

• 3.1。

동적 HTML 요소 추가 정보.

HTML 요소를 동적으로 추가할 때 일반적으로 Javascript와 같은 요소가 추가됩니다. 웹 서버 쪽과 독립적으로 처리되므로 속성 값과 같은 이중 방식으로 관리해야 합니다.

ASP.NET Core는 부분 뷰(Partial View)를 사용합니다. 서버 측 정의의 일부 HTML(.cshtml)에서 HTML을 가져오고 서버 처리를 추가할 수 있습니다. 클라이언트에서 이 HTML을 가져와 지정된 위치에 요소를 추가합니다.

샘플 콘텐츠입니다.

목록 을 <ul><li> 부분 뷰로 정의합니다.

Server Partial 섹션에는 index.cshtml에 정의된 부분 뷰의 부분 뷰가 표시됩니다. 따라서 서버에서 뷰를 받을 때 배포됩니다.

Client Load Ajax Partial은 클라이언트가 HTML을 가져오고 화면에 표시되는 직후에 발생합니다. Javascript에서 서버에서 뷰의 일부를 가져오고 표시합니다.

단추를 누를 때 Button Ajax Partial의 일부입니다. Javascript에서 서버에서 뷰의 일부를 가져오고 표시합니다. 작업은 Load와 동일합니다. 일시적으로 읽을 수 없는 오류 처리도 기록됩니다.

컨트롤러(HomeController.cs)

Load 중에 로드되는 뷰의 일부와 단추를 누를 때 로드할 뷰의 일부를 정의하는 작업입니다.

부분 보기 로 PartialView 돌아가면 return 메서드를 호출합니다. 모델은 PartialView에 바인딩할 수 있으므로 List<string> 여기서 바인딩합니다. 실제 바인딩 형식은 index.cshtml과 같은 Razor 구문과 동일한 뷰 쪽에 정의할 수 있습니다.

다른 뷰 함수와 동일한 방식으로 뷰 이름을 지정합니다.

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

부분 뷰(Views/Home/Partial.cshtml)

Partial.cshtml에서 부분 뷰를 정의합니다. 콘텐츠는 바인딩 문자열 목록을 li 태그별로 정렬합니다. 일반 보기와 정확히 동일하므로 특히 조심하지 않습니다. Razor 구문으로 인해 C# 코드를 포함할 수 있습니다.

부분 뷰의 파일 이름 및 폴더 계층 구조는 뷰 배치 규칙의 어느 곳에나 있을 수 있습니다.

@model List<string>

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

뷰(HTML) (Views/Home/index.cshtml)

이것은 HTML 쪽의 정의이지만 기본적으로 대부분의 표시 부분 때문에 해석이 거의 필요하지 않습니다.

Server Partial 섹션에 태그를 partial 지정하여 지정된 부분 뷰를 확장합니다. name 뷰 이름을 지정하고 에 model 바인딩된 매개 변수를 지정합니다. 컨트롤러 측의 PartialView 메서드와 유사합니다. 참고로 서버 측 배포 프로세스이므로 클라이언트는 HTML을 받을 때 배포했습니다.

Client Load Ajax Partial 및 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>

뷰(Javascript) (Views/Home/index.cshtml)

Javascript 쪽에서는 초기 표시 후 처리 및 단추 누름에 대한 처리를 설명합니다.

jQuery 객체에 load 대한 함수 호출, 첫 번째 인수에 대한 대상 작업(URL)을 지정하여 부분 뷰를 비동기적으로 가져올 수 있습니다. 검색된 콘텐츠가 HTML인 경우 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 + ')');
  }
});