繁体   English   中英

JqG​​rid和搜索表单-ASP.NET MVC

[英]JqGrid and Search form - ASP.NET MVC

在这篇文章中, 链接了文本 ,并通读了这篇文章,其中提供了我想在自己的网站上提供的内容的屏幕快照。 这就是我要的, 替代文字

jqGrid是最好的方法吗? 我想要的只是该搜索参数界面。 我想在选项卡式窗口中显示搜索结果,接下来我将对其进行处理。

JqG​​rid将自动构建图像中显示的搜索控件。 因此,如果您想要的是图像中的内容,那么是的,JqGrid是必经之路,因为这就是我用来生成问题中包含的屏幕截图的方式。

自然,此控件基于JqGrid,因此您需要使用它。 搜索控件不是“独立的”(至少不是设计使然)。 但是,网格是可配置的,因此您可能能够获得所需的外观。

如果无法使用网格,则可能无法使用过滤器/搜索控件。 但这只是HTML,因此很容易复制。

我假设您要搜索自己的表单和控件,然后在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>

2)

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

<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 Action。 该网址应类似于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,该DLL可从以下网站获得: http ://weblogs.asp.net/scottgu/archive/2008/01/07/dynamic-linq-part- 1-using-the-linq-dynamic-query-library.aspx这有错误,但是在大多数情况下,它是有效的:)

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM