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

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

개요

이 문서에서는 작업 후 클라이언트 측에서 부분 보기 렌더링에 대해 설명합니다. 버튼 클릭으로 ASP.NET MVC 애플리케이션의 일반적인 문제를 해결합니다. 다음 방법을 살펴보겠습니다.

• 버튼 클릭 이벤트 캡처
• 컨트롤러에 데이터 보내기
• 지정된 div 내부에서 부분 보기 렌더링

문제 설명

단순화된 ASP.NET MVC 애플리케이션에서는 동적으로 버튼 클릭 시 검색 결과를 div에 표시합니다. 문제는 데이터베이스 액세스를 통해 데이터를 가져온 다음 전체 페이지를 다시 로드하지 않고 이 데이터를 사용하여 부분 보기를 렌더링하는 것입니다.

해결책

1. 이벤트 처리:

버튼을 다음으로 교체:

<button></button>

2. JavaScript:

다음 스크립트를 추가하세요.

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

• 이 스크립트는 클릭 이벤트를 캡처하고 jQuery의 .load() 메서드를 사용하여 검색 텍스트를 컨트롤러로 보냅니다.

3. 컨트롤러 메서드:

검색 텍스트를 허용하도록 컨트롤러 메서드 수정:

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

• 이 메서드는 데이터베이스에서 데이터를 가져오고 부분 보기를 반환합니다.

추가 고려 사항

• 검증: SearchCriterionModel에 검증 속성이 있는 여러 속성이 포함된 경우 제출 버튼을 사용하고 양식의 .submit() 이벤트를 대신 처리하세요.
• 컨트롤러 메서드 서명: 전체 SearchCriterionModel을 수신하도록 컨트롤러 메서드를 업데이트합니다. object:

public ActionResult DisplaySearchResults(SearchCriterionModel criteria)

Div 내부의 부분 뷰 렌더링을 위한 팁

• div에 "searchResults"와 같은 고유 ID가 있는지 확인하세요.
• 부분 뷰 자체에는 자체 모델 클래스와 데이터가 있어야 합니다.
• .load() 메서드 부분 보기에서 생성된 HTML로 div의 내용을 업데이트합니다.

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