JqGrid 和搜索表单 - ASP.NET MVC答案

【问题标题】：JqGrid and Search form - ASP.NET MVCJqGrid 和搜索表单 - ASP.NET MVC
【发布时间】：2023-03-16 11:38:01
【问题描述】：

看到这篇文章，link text，并通读，这篇文章有一个我想在我的网站上提供的东西的屏幕截图。这就是我要的，

jqGrid 是最好的方法吗？我想要的只是搜索参数界面。我想在选项卡式窗口中显示的搜索结果，我将在接下来处理它。

【问题讨论】：

标签： asp.net-mvc user-interface jqgrid

【解决方案1】：

JqGrid 将自动构建图像中显示的搜索控件。因此，如果图像中的内容是您想要的，那么是的，JqGrid 就是要走的路，因为这是我用来制作您在问题中包含的屏幕截图的内容。

当然，此控件基于 JqGrid，因此您需要使用它。搜索控件不是“独立的”（至少，不是设计使然）。不过，网格是可配置的，因此您可以得到您想要的外观。

如果您不能使用网格，那么您可能无法使用过滤器/搜索控件。但它只是 HTML，所以很容易复制。

【讨论】：

克雷格，在您的文章中，您提到“从视觉上看，这个主题有很多变体”..您能否进一步阐明？
搜索可以像上面那样显示在弹出对话框中，或者在网格中的每一列上方使用不同的输入（filterToolbar）。

【解决方案2】：

我假设您想在自己的表单和控件上进行搜索，然后在 jqGrid 中显示结果。网上找到的大多数解决方案都使用 jqGrid 自己的搜索控件，这可能不是您的问题的首选选项。

我将展示一个简单的例子来说明如何完成这个：

1) 根据需要构建您的搜索表单：

@using (Html.BeginForm("Index", "Campaign", FormMethod.Post, new { id = "searchCampaigns" }))
{
    <table class="DetailsTable" cellpadding="2" cellspacing="1">
        <tr>
            <td>Title</td>
            <td>@Html.TextBoxFor(A => A.Titulo, new { Id = "search_title", })</td>
            <td>Created by</td>
            <td>@Html.DropDownListFor(A => A.CreatedByUserId, Model.UserList, new { Id = "search_createdBy" })
            </td>
        </tr>
        <tr>
            <td> </td>
            <td colspan="3"><button type="button" onclick="javascript:search();">
                    Search !</button>
            </td>
        </tr>
    </table>

实现您的搜索功能以读取这些搜索字段：

<script type="text/javascript">
    function search()
    {
        var searchValue_title = document.getElementById("search_title");
        var searchValue_createdBy = document.getElementById("search_createdBy");

        var extraQueryParameters = "";

        extraQueryParameters = "?title=" + searchValue_title.value;
        extraQueryParameters = extraQueryParameters + "&createdBy=" + searchValue_createdBy.value;

        jQuery("#SearchResults").jqGrid().setGridParam({url : '@Url.Action("GridData")' + extraQueryParameters}).trigger("reloadGrid")

    }
</script>

请注意，您实际上不需要使用@HTML.TextBoxFor(...) 来创建输入元素。除非您想使用 MVC 3 的 dataAnnotation，否则您可以使用简单的元素。

搜索功能只是连接所有搜索参数并将它们附加到 GridData 操作。 url 应该变成http://mySite/Controller/GridData?title=hello&createdBy=3 之类的东西。然后将其馈入电网。

3) 按照以下思路实现 MVC 控制器功能：

public JsonResult GridData(string sidx, string sord, int? page, int? rows, int? createdBy, string title)
{
    using (MyDataContext ddc = new MyDataContext())
    {
        var baseQuery = ddc.MyCampaign.AsQueryable(); 
        string gridCaption = "Search Results";

        if (!string.IsNullOrEmpty(titulo))
            baseQuery = baseQuery.Where(A => A.Title.Contains(title));

        if(createdBy.HasValue())
            baseQuery = baseQuery.Where(A=>A.idCreationUser = createdBy.Value);

        int pageIndex = Convert.ToInt32(page) - 1;
        int pageSize = rows.HasValue ? rows.Value : 10;
        int totalRecords = baseQuery.Count();
        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

        var ds = (from A in baseQuery
                    select new
                    {
                        ID = A.ID,
                        Title = A.Title,
                    }).OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize).ToList();

        var jsonData = new
        {
            total = totalPages,
            page = page,
            records = totalRecords,
            rows = from A in ds
                    select new
                    {
                        id = A.ID,
                        cell = new[] { A.ID.ToString(), A.Title }
                    },
            caption = gridCaption
        };


        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }
}

4) 请注意以下问题：

C# 函数的参数名称必须与当您单击“搜索”时，会在查询字符串构建中传递按钮。 .OrderBy(sidx + " " + sord) 方法要求您使用动态 Linq DLL，可在： http://weblogs.asp.net/scottgu/archive/2008/01/07/dynamic-linq-part-1-using-the-linq-dynamic-query-library.aspx 这有错误，但在大多数情况下，它可以工作:)

【讨论】：