페이지를 다시 로드하지 않고 단추 클릭 시 ASP.NET MVC에서 부분 보기를 렌더링하는 방법은 무엇입니까?

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

ASP.NET MVC에서 버튼 클릭은 일반적인 작업입니다. 이를 통해 전체 페이지를 다시 로드하지 않고도 페이지의 특정 섹션을 동적으로 업데이트할 수 있습니다.

문제 설명:

제공된 코드는 버튼 클릭 후 페이지의 특정 div. 그러나 버튼은 다른 URL로 이동하므로 전체 페이지가 다시 로드됩니다. 목표는 클라이언트측 div 내의 부분 보기를 렌더링하는 것입니다.

해결책:

이를 달성하려면 JavaScript를 사용하여 버튼 클릭을 처리해야 합니다. 서버에 AJAX 요청을 수행합니다. 다음 단계에서는 이 작업을 수행하는 방법을 설명합니다.

1. 버튼 유형 변경: 앵커 태그 대신 버튼 요소를 사용하도록 HTML 버튼을 변경합니다.

<button>

2. JavaScript 코드 추가: 다음 JavaScript 코드를 페이지:

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

3. 컨트롤러 메서드 수정: 컨트롤러에서 검색 텍스트를 매개변수로 허용하도록 DisplaySearchResults 작업을 수정합니다.

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

JavaScript 코드는 버튼 클릭을 처리하고 페이지에서 검색 텍스트를 검색하며 jQuery의 .load 메소드를 사용하여 DisplaySearchResults 작업에 대한 AJAX 요청을 합니다. 서버는 부분 보기를 생성하여 클라이언트에 전송한 후 #searchResults div의 콘텐츠를 업데이트합니다.

참고:

색인 모델의 경우 보기에는 유효성 검사 속성이 있는 속성이 포함되어 있으므로 버튼 대신 제출 버튼을 추가하는 것이 좋습니다. JavaScript 코드는 AJAX 요청을 하기 전에 양식의 .submit 이벤트를 처리하고 유효성 검사를 수행해야 합니다.

위 내용은 페이지를 다시 로드하지 않고 단추 클릭 시 ASP.NET MVC에서 부분 보기를 렌더링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!