ASP.NET MVC4：在相同視圖中篩選搜索結果

Question

我已經完成了在partialView中搜索部分列表的操作。

我在這個應用程序的多個partialView你可以從圖片看到。

所以我的問題

每當我創建搜索過濾器網格，然後我要創建另外的看法，partialview顯示成功的結果。如何在同一分部視圖中顯示已過濾的搜索列表並且不需要再次爲該列表創建成功的部分視圖？

我已經私下作出─

從數據庫 -

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); 
} 

渲染列表搜索紀錄─

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

腳本用於檢索以下紀錄

<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結果在控權

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); 
     } 

所以，當我搜索的字符串M它檢索記錄，幷包含在他們的名字M只顯示記錄。

現在這個過濾結果爲JSON是我想要在同一個partialView中過濾而不創建額外的partialView。

Answer 1

可以讓搜索方法返回相同的局部視圖：

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

    return PartialView("_ProductSearchList", products); 
} 

如果換一個div內的局部視圖，可以取代它的使用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請求，可就是這樣，如果你有JavaScript中的視圖中：

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