Question

我已经在partialView中搜索了一个列表。

enter image description here

我在此应用程序中有多个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);
            }
        });

    });
});

注意：如果您在视图中包含JavaScript，那么您的Ajax get请求可能是这样的：

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

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

1 个答案: