복붙노트

[JQUERY] ASP.NET MVC에서 버튼 클릭에 대한 부분보기 렌더링

JQUERY

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

해결법


  1. 1.버튼을 변경

    버튼을 변경

    <button id="search">Search</button>
    

    다음과 같은 스크립트를 추가

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

    하고 검색 텍스트를 사용하는 컨트롤러 메소드를 수정

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

    JQuery와 .load 방법은 검색 텍스트의 값을 전달, 컨트롤러 메소드를 호출하고, 부분보기와 함께

    의 내용을 업데이트합니다.

    사이드 참고 :

    태그와 @ Html.ValidationSummary ()와 @ Html.ValidationMessageFor (의 사용) 여기에 아마 필요하지 않습니다. 의 ValidationSummary가 이해되지 않는다 그래서는 결코 인덱스보기를 반환하지 않습니다 그리고 당신이 널 검색 텍스트가 모든 결과를 반환한다고 가정하고, 어떤 경우에 당신은 너무 유효성을 검사 할 것이없는 재산 키워드에 대한 유효성 검사 속성이 없습니다.

    편집하다

    SearchCriterionModel 유효성 검사 속성을 가진 여러 속성을 포함하는 것을 영업의 의견을 바탕으로, 다음 방법을 포함하는 것) (이벤트 버튼을 제출 양식을 .submit 처리

    <input type="submit" value="Search" />
    
    var url = '@Url.Action("DisplaySearchResults", "Search")';
    $('form').submit(function() {
      if (!$(this).valid()) { 
        return false; // prevent the ajax call if validation errors
      }
      var form = $(this).serialize();
      $('#searchResults').load(url, form);
      return false; // prevent the default submit action
    })
    

    컨트롤러 방법은 것

    public ActionResult DisplaySearchResults(SearchCriterionModel criteria)
    {
      var model = // build list based on the properties of criteria
      return PartialView("SearchResults", model);
    }
    

  2. 2.그래서 여기 컨트롤러 코드입니다.

    그래서 여기 컨트롤러 코드입니다.

    public IActionResult AddURLTest()
    {
        return ViewComponent("AddURL");
    }
    

    당신은 JQuery와 부하 방법을 사용하여로드 할 수 있습니다.

    $(document).ready (function(){
        $("#LoadSignIn").click(function(){
            $('#UserControl').load("/Home/AddURLTest");
        });
    });
    

    소스 코드 링크

  3. from https://stackoverflow.com/questions/29142422/rendering-partial-view-on-button-click-in-asp-net-mvc by cc-by-sa and MIT license