ASP.NET MVC4 : 동일한보기에서 검색 결과 필터링

Question

partialView에서 목록을 검색했습니다. 당신이 이미지에서 볼 수

나는이 응용 프로그램에서 여러 partialView 있습니다.

그래서 내 질문

을 내가 그리드에 대한 검색 필터를 만들 때마다 다음 나는 성공의 결과를 표시하는 또 다른보기와 partialview을 만들어야합니다. 이 부분 뷰 내에서 필터링 된 검색 목록을 표시하고 해당 목록에 대한 부분 뷰를 다시 만들 필요가 없습니다.

나는했습니다

는 개인 기록

을 검색하는 기록 -

<div> 
<legend>Prducts</legend> 
         <input type="text" id="search-products" /> 
         @Html.Action("_ProductSearchList", "LedgerIndex") 
</div> 

스크립트 검색 데이터베이스 -

public ActionResult _ProductSearchList() { 
     List<ProductModel> product; 
     product = (from u in db.ProductTables 
        select new ProductModel { 
         productname = u.ProductName, 
         productprice = Convert.ToInt32(u.ProductPrice), 
         productID = u.ProductID, 
         dateaddproduct = Convert.ToDateTime(u.ProductAddDate) 

       }).ToList(); 

    return PartialView(product); 
} 

에서 목록을 렌더링 done- 내가 문자열 M 검색 할 때

public JsonResult JsonSearchProduct(string stringSearched) { 
      List<ProductModel> product; 
      product = (from u in db.ProductTables 
         where u.ProductName.Contains(stringSearched) 
         select new ProductModel { 
          productID = u.ProductID, 
          productname = u.ProductName, 
          productprice = Convert.ToInt32(u.ProductPrice), 
          dateaddproduct = Convert.ToDateTime(u.ProductAddDate) 
         }).ToList(); 
      return Json(product, JsonRequestBehavior.AllowGet); 
     } 

컨트롤러 -에서 5,

<script type="text/javascript"> 
    $(function() { 
     $('#search-products').keyup(function() { 
      var serachstring = $(this).val(); 
      $.ajax({ 
       url: '/Product/JsonSearchProduct/?stringSearched=' + serachstring, 
       type: 'get', 
       datatype: 'json', 
       success: function (data) { 
        JSON.stringify(data); 
       } 
      }); 

     }); 
    }); 
</script> 

JSON 결과는 그래서 기록과 이름에 M을 포함 보여주는 레코드 만 검색합니다.

이 필터링 결과는 JSON이므로 추가 partialView를 만들지 않고이 partialView에서 필터링하고 싶은 결과입니다.

Answer 1

당신은 검색 방법이 동일한 부분 뷰를 반환하도록 할 수 있습니다 : 당신이 div 내부의 부분보기를 포장하는 경우

public ActionResult JsonSearchProduct(string stringSearched) 
{ 
    List<ProductModel> products; 
    // Search for products... 

    return PartialView("_ProductSearchList", products); 
} 

, 당신은 jQuery로 자사의 HTML을 대체 할 수 있습니다.

$(function() { 
    $('#search-products').keyup(function() { 
     var serachstring = $(this).val(); 
     $.ajax({ 
      url: '/Product/JsonSearchProduct/?stringSearched=' + serachstring, 
      type: 'get', 
      datatype: 'json', 
      success: function (data) { 
       // data will contain the html of the partial view. 
       $('div#product-grid').html(data); 
      } 
     }); 

    }); 
}); 

참고 : Ajax를 사용하면 뷰 내부의 자바 스크립트가있는 경우 요청, 이렇게 될 수 있습니다 얻을 :

$.get('@Url.Action("JsonSearchProduct", "Product")', 
     { 
      stringSearched: searchstring 
     }, 
     function (data) { 
      $('div#product-grid').html(data); 
     } 
    });