JqG​​rid与ASP.NET MVC 2

时间:2013-05-11 03:36:34

标签: jquery asp.net asp.net-mvc asp.net-mvc-2 jqgrid

我已经使用ASP.NET MVC 2成功地将数据绑定到JqGrid。我按照示例代码来实现它。下面是我的代码,我对代码有一些疑问。

  1. 我在jquery代码中看不到传递给“string sidx,string sord,int page,int rows”的参数?

  2. 我需要在模型中使用完全相同的名称吗?我的意思是总数,页数,记录,行可以更改这些属性或JQgrid需要相同的属性名称?

  3. 型号:

    public class JQGrid
        {
            public int total { get; set; }
            public int page { get; set; }
            public int records { get; set; }
            public Array rows { get; set; }
        }
    

    存储库:

    public JQGrid DynamicGridData(string sidx, string sord, int page, int rows)
            {
    
                dc = new StockDataClassesDataContext(ConString.DBConnection);
    
                int pageIndex = Convert.ToInt32(page) - 1;
                int pageSize = rows;
                int totalRecords = dc.tblClients.Count();
                int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
    
                var GridData = new JQGrid
                {
                    total = totalPages,
                    page =page,
                    records = totalRecords,
                    rows = (
                        from client in dc.tblClients
                        select new 
                        {
                            i = client.ClientID,
                            cell = new string[] { client.ClientID.ToString(), client.Address.ToString(), client.Company.ToString(), client.Name.ToString() }
                        }).ToArray()
                };
    
                return GridData;
            }
    

    控制器:

    public ActionResult DynamicGridData(string sidx, string sord, int page, int rows)
            {
                JqGridClientRepository rep = new JqGridClientRepository();
                var jsonData = rep.DynamicGridData(sidx, sord, page, rows);
    
                return Json(jsonData, JsonRequestBehavior.AllowGet);
            }
    

    查看:

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
     <title>jqGrid for ASP.NET MVC - Demo</title>
        <!-- The jQuery UI theme that will be used by the grid -->    
        <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/redmond/jquery-ui.css" />
        <!-- The Css UI theme extension of jqGrid -->
        <link rel="stylesheet" type="text/css" href="../../Content/themes/ui.jqgrid.css" />    
        <!-- jQuery library is a prerequisite for jqGrid -->
        <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
        <!-- language pack - MUST be included before the jqGrid javascript -->
        <script type="text/javascript" src="../../Scripts/trirand/i18n/grid.locale-en.js"></script>
        <!-- the jqGrid javascript runtime -->
        <script type="text/javascript" src="../../Scripts/trirand/jquery.jqGrid.min.js"></script>  
    
        <script type="text/javascript">
            $(function () {
                $("#list").jqGrid({
                    url: '/JqGridClients/DynamicGridData/',
                    datatype: 'json',
                    mtype: 'GET',
                    colNames: ['ClientID', 'Address', 'Company','Name'],
                    colModel: [
              { name: 'ClientID', index: 'ClientID',width: 60, align: 'left' },
              { name: 'Address', index: 'Address', align: 'left' },
              { name: 'Company', index: 'Company', align: 'left' },
              { name: 'Name', index: 'Name', align: 'left'}],
                    pager: jQuery('#pager'),
                    rowNum: 10,
                    rowList: [5, 10, 20, 50],
                    sortname: 'ClientID',
                    sortorder: "desc",
                    viewrecords: true,
                    imgpath: '/scripts/themes/coffee/images',
                    caption: 'Clients'
                });
            }); 
        </script>  
    
        <h2>Index</h2>
    
    <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
    <div id="pager" class="scroll" style="text-align:center;"></div>
    
    </asp:Content>
    

0 个答案:

没有答案