JQGrid does not display data

前端未结

关注

 2  894

I have created both client and server side for JQgrid and ASP.net. The grid is displayed but with no data. I could not see the result. The grid displayed but no data.

相关标签:

2条回答

灰色年华

2020-12-20 10:04
Your main error is that you defined class jqGridHandler (public class jqGridHandler : IHttpHandler) inside of the User class. You should define it on the top level.

I don't comment the code of GetUsers included string connectionString = "" for example. You should know how you access your database.

Another minor error is the line
```
result.total = totalRecords / numberOfRows;
```
which should be fixed to
```
 result.total = (totalRecords + numberOfRows - 1) / numberOfRows;
```
It is not so important, but I would prefer to use List<User> instead of Collection<User>.

After the changes the code will work (you can download from here the demo project which I used). I recommend you additionally implement loadError event handle. See the answer as an example.
0 讨论(0)
发布评论:

提交评论
- 加载中...

太阳男子

2020-12-20 10:07

I have modified the source, now records are displayed very smoothly but the only problem is that the search is not working, can you please have a look? My Codes are given below:

The aspx page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQGrid.aspx.cs" Inherits="JQGrid" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <%--<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/ui-darkness/jquery-ui.css" type="text/css" media="all" />--%>

    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/redmond/jquery-ui.css" />
    <link href="jqScripts/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="jqScripts/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="jqScripts/js/jquery.jqGrid.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            $("#UsersGrid").jqGrid({
                url: 'jqGridHandler.ashx',
                datatype: 'json',
                height: 250,
                colNames: ['CustomerID', 'CompanyName', 'ContactName', 'ContactTitle', 'Address', 'City', 'PostalCode', 'Country'],
                colModel: [
                        { name: 'CustomerID', index: 'CustomerID', width: 75, sortable: true },
                        { name: 'CompanyName', width: 100, sortable: true },
                        { name: 'ContactName', width: 100, sortable: true },
                        { name: 'ContactTitle', width: 100, sortable: true },
                        { name: 'Address', width: 100, sortable: true },
                        { name: 'City', width: 100, sortable: true },
                        { name: 'PostalCode', width: 100, sortable: true },
                        { name: 'Country', width: 150, sortable: true }
                    ],
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: '#UsersGridPager',
                sortname: 'CustomerID',
                viewrecords: true,
                sortorder: 'asc',
                caption: 'My Data'
            });

            $("#UsersGrid").jqGrid('navGrid', '#UsersGridPager', { edit: false, add: false, del: false });
        });

    </script>

</head>
<body>
    <form id="HtmlForm" runat="server">
    <table id="UsersGrid" cellpadding="0" cellspacing="0">
        <div id="UsersGridPager">
        </div>
    </table>
    </form>
</body>
</html>

and the ashx:

<%@ WebHandler Language="C#" Class="jqGridHandler" %>

using System;
using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.Data;

using System.Data.SqlClient;

using System.Web;

using System.Web.Script.Serialization;

public class jqGridHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        HttpRequest request = context.Request;
        HttpResponse response = context.Response;

        string _search = request["_search"];
        string numberOfRows = request["rows"];
        //string numberOfRows = "10";
        string pageIndex= request["page"];
        string sortColumnName= request["sidx"];
        string sortOrderBy = request["sord"];


        int totalRecords;
        //public DataTable GetDataTable(string sidx, string sord, int page, int pageSize)
        Collection<User> users = GetUsers(numberOfRows, pageIndex, sortColumnName, sortOrderBy, out totalRecords, _search);
        string output = BuildJQGridResults(users, Convert.ToInt32(numberOfRows), Convert.ToInt32(pageIndex), Convert.ToInt32(totalRecords));
        response.Write(output);
    }

    private string BuildJQGridResults(Collection<User> users,int numberOfRows, int pageIndex,int totalRecords)
    {

        JQGridResults result = new JQGridResults();
        List<JQGridRow> rows = new List<JQGridRow>();
        foreach (User user in users)
        {
            JQGridRow row = new JQGridRow();
            row.id = user.CustomerID;
            row.cell = new string[8];
            row.cell[0] = user.CustomerID;
            row.cell[1] = user.CompanyName;
            row.cell[2] = user.ContactName;
            row.cell[3] = user.ContactTitle;
            row.cell[4] = user.Address;
            row.cell[5] = user.City;
            row.cell[6] = user.PostalCode;
            row.cell[7] = user.Country;

            rows.Add(row);
        }
        result.rows = rows.ToArray();
        result.page = pageIndex;
        result.total = totalRecords / numberOfRows;
        result.records = totalRecords;
        return new JavaScriptSerializer().Serialize(result);
    }

    private Collection<User> GetUsers(string numberOfRows, string pageIndex, string sortColumnName, string sortOrderBy, out int totalRecords, string _search)
    {
        Collection<User> users = new Collection<User>();
        string connectionString = "Data Source=ritetechno\\sqlexpress;Initial Catalog=Northwind;Integrated Security=True";
        //<add name="constr" connectionString="Data Source=Abdul-THINK;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient"/>

        using (SqlConnection connection = new SqlConnection(connectionString))
        {
            using (SqlCommand command = new SqlCommand())
            {
                int numRows=Convert.ToInt32(numberOfRows)*(Convert.ToInt32(pageIndex));
                int excluderows=Convert.ToInt32(numberOfRows)*((Convert.ToInt32(pageIndex)-1));
                command.Connection = connection;
                command.CommandText = "SELECT TOP " + numRows + " CustomerID, CompanyName, ContactName, ContactTitle, Address, City, PostalCode, Country FROM Customers WHERE CustomerID NOT IN (SELECT TOP " + excluderows +" CustomerID FROM Customers)";
                command.CommandType = CommandType.Text;
                connection.Open();

                using (SqlDataReader dataReader = command.ExecuteReader())
                {
                    User user;
                    while (dataReader.Read())
                    {
                        user = new User();
                        user.CustomerID = Convert.ToString(dataReader["CustomerID"]);
                        user.CompanyName = Convert.ToString(dataReader["CompanyName"]);
                        user.ContactName = Convert.ToString(dataReader["ContactName"]);
                        user.ContactTitle = Convert.ToString(dataReader["ContactTitle"]);
                        user.Address = Convert.ToString(dataReader["Address"]);
                        user.City = Convert.ToString(dataReader["City"]);
                        user.PostalCode = Convert.ToString(dataReader["PostalCode"]);
                        user.Country = Convert.ToString(dataReader["Country"]);
                        users.Add(user);                        
                    } 
                }
                string cmdTotRec = "SELECT COUNT(*) FROM Customers";
                SqlCommand chkTotRec = new SqlCommand(cmdTotRec, connection);
                totalRecords = Convert.ToInt32(chkTotRec.ExecuteScalar().ToString());
                connection.Close();
            }

            return users;
        }

    }
    public bool IsReusable
    {
        // To enable pooling, return true here.
        // This keeps the handler in memory.
        get { return false; }
    }

    public struct JQGridResults
    {
        public int page;
        public int total;
        public int records;
        public JQGridRow[] rows;

    }
    public struct JQGridRow
    {
        public string id;
        public string[] cell;
    }

    [Serializable]
    public class User
    {
        public string CustomerID { get; set; }
        public string CompanyName { get; set; }
        public string ContactName { get; set; }
        public string ContactTitle { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
    }
}

0 讨论(0)