代码之家 › 专栏 › 技术社区 › Manoz

ASP.NET MVC4:在同一视图中筛选搜索结果

search asp.net-mvc-4 json asp.net-mvc c#

4

Manoz · 技术社区 · 12 年前

我已经在部分视图中搜索了部分列表。

enter image description here

我在这个应用程序中有多个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。

1 回复 | 直到 12 年前

1

2

Henk Mollema 12 年前

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

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请求可以是这样的:

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