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

2024年1月12日 151次阅读

我已经在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.

最佳答案 您可以让搜索方法返回相同的局部视图：

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

    });
});

注意：如果视图中包含JavaScript,则Ajax get请求可以是这样的：

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