jqGrid的和搜索表​​单 - ASP.NET MVC [英] JqGrid and Search form - ASP.NET MVC

查看:138
本文介绍了jqGrid的和搜索表​​单 - ASP.NET MVC的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

跨这篇文章中,链接文本来了,通过阅读,文章有那我想提供我的网站上的东西的屏幕截图。这就是我想要的,

Came across this article, link text, and reading through, the article had a screen shot of something that I want to provide on my site. This is what I want,

时的jqGrid去的最佳途径?我要的是,搜索参数界面。搜索结果我想在一个选项卡式窗口,我将努力在旁边显示。

Is jqGrid the best way to go? All I want is that search parameter interface. The search result I want to display in a tabbed window, which I will work on next.

推荐答案

我假设你想搜索你自己的窗体和控件,然后显示jqGrid的结果。大多数发现网上使用的jqGrid自己的搜索控制的解决方案,这可能不是你的问题prefered选项。

I'm assuming you want to search on your own form and controls and then display the results in jqGrid. Most of the solutions found online use jqGrid's own search controls, which might not be the prefered option for your problem.

我将展示如何acomplish一个简单的例子:

I'll show a simple example on how to acomplish this:

1)建立搜索表单需要:

1) Build your search form as needed:

@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)

实施搜索功能,以读取这些搜索字段:

Implement your search function in order to read those search fields:

<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,可以凑合着用简单的元素。

Please note that you actually don't need to use @HTML.TextBoxFor(...) to create the input elements. Unless you want make use of the dataAnnotation of MVC 3, you can make do with simple elements.

搜索功能只是串联所有的搜索参数,并将其追加到的GridData行动。 URL应该成为像的http:// MYSITE /控制器/标题的GridData打招呼=&安培; createdBy = 3 。这然后供给到电网。

The search function just concatenates all the search parameters and appends them to GridData Action. The url should become something like http://mySite/Controller/GridData?title=hello&createdBy=3. This is then fed to the grid.

3)实施沿着这些线路的MVC控制器功能:

3) Implement an MVC controller function along these lines:

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)请把下列问题注意:

4) Please take note of the following issues:

的参数名称为C#函数必须的参数匹配
   在查询字符串传递建造当你点击搜索
   按钮。该.OrderBy(SIDX ++ SORD)方法要求您使用
   动态LINQ的DLL,请访问:
   <一href=\"http://weblogs.asp.net/scottgu/archive/2008/01/07/dynamic-linq-part-1-using-the-linq-dynamic-query-library.aspx\" rel=\"nofollow\">http://weblogs.asp.net/scottgu/archive/2008/01/07/dynamic-linq-part-1-using-the-linq-dynamic-query-library.aspx
   这有错误,但在大多数情况下,它的工作原理:)

The parameter names for the C# function must match the arguments that are passed on the query string build when you click the Search button. The .OrderBy(sidx + " " + sord) method requires that you use the Dynamic Linq DLL, available at: http://weblogs.asp.net/scottgu/archive/2008/01/07/dynamic-linq-part-1-using-the-linq-dynamic-query-library.aspx This has bugs, but for the most part, it works :)

这篇关于jqGrid的和搜索表​​单 - ASP.NET MVC的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆