ASP.NET MVC에서 버튼 클릭 시 부분 뷰를 동적으로 렌더링하는 방법은 무엇입니까?

ASP.NET MVC에서 버튼 클릭 시 부분 뷰 렌더링

소개

버튼 클릭 시 부분 뷰를 동적으로 표시하는 작업은 일반적인 요구 사항입니다. ASP.NET MVC 개발에서. 이 기사에서는 이 문제에 대한 솔루션을 자세히 살펴보고 jQuery와 적절한 컨트롤러 방법을 사용하여 이 기능을 구현하는 방법을 보여줍니다.

문제 개요

ASP.NET MVC에서 부분 뷰는 일반적으로 다음과 같이 렌더링됩니다. 전체 페이지를 대체합니다. 그러나 특정 시나리오에서는 페이지의 특정 영역 내에서만 부분 보기를 렌더링하는 것이 바람직합니다. 예를 들어, 사용자가 버튼을 클릭하면 페이지의 지정된 섹션에 검색 결과가 포함된 부분 보기를 로드하고 표시할 수 있습니다.

해결책

이를 수행하려면 다음을 따르세요. 아래 설명된 단계:

1. 버튼 수정: 서버측 버튼을 HTML 버튼 요소로 교체 (예: <button>).
2. jQuery 이벤트 핸들러 구현: 버튼에 jQuery의 .click() 이벤트 핸들러를 사용하여 AJAX 호출을 시작합니다.
3. 모델 데이터 전달: AJAX 중에 jQuery의 .load() 메서드를 사용하여 필요한 모델 데이터를 컨트롤러에 보냅니다. call.
4. 컨트롤러에서 데이터 수신: 모델 데이터를 수신하고 적절한 부분 뷰를 반환하는 컨트롤러 메서드를 정의합니다.
5. 부분 뷰 렌더링: jQuery의 .load() 메소드를 사용하여 지정된 페이지 영역을 부분 보기로 업데이트합니다.

코드 예

다음은 버튼 클릭 시 부분 보기를 렌더링하는 코드 구현 예입니다.

Razor View (Index.cshtml)

<button>

JavaScript

var url = '@Url.Action("DisplaySearchResults", "Search")';
$('#search').click(function() {
  var keyword = $('#Keyword').val();
  $('#searchResults').load(url, { searchText: keyword });
});

컨트롤러(SearchController)

public ActionResult DisplaySearchResults(string searchText)
{
  var model = // Build list based on the searchText
  return PartialView("SearchResults", model);
}

추가 고려 사항

• type="button" 속성을 사용하여 양식 내 버튼에 대한 기본 양식 제출을 비활성화합니다.
• 모델이 view.
• 검증 기능이 있는 모델에 대해 jQuery의 .submit() 이벤트를 사용하여 양식 제출을 처리합니다. 속성입니다.

위 내용은 ASP.NET MVC에서 버튼 클릭 시 부분 뷰를 동적으로 렌더링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!