ASP.NET MVC4：在同一视图中过滤搜索结果

Question

我已经在 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 是我想在同一个部分视图中过滤的结果，而不创建额外的部分视图。

Answer 1

可以让搜索方法返回相同的局部视图：

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

    return PartialView("_ProductSearchList", products);
}

如果将局部视图包装在 div 中，则可以将其 html 替换为 jQuery。

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

    });
});

注意：如果视图中有 JavaScript，您的 Ajax 获取请求可以是这样的：

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