Geek Answers Handbook

JQGrid - Cannot call ASP.NET WebMethod, but can with Ajax

I'm new to jqGrid and it was hard for me to follow documentation jqGrid documentation

I cannot figure out how to call WebMethod when setting up JQGrid. I managed to make an Ajax call to get the data, and then set up a JQGrid with local data. I think this is an additional step in the installation process and that I should be able to provide the path to the web method using the url property.

The editurl property is similar. I never get a message to the server.

Original code

Attempt to install JQGrid


function GetData()
{
    $('#list').jqGrid({
        type: "POST",
        url: "Default.aspx/GetUsersJSON",
        datatype: "json",
        height: 250,
        colName: ['Username', 'Email'],
        colModel: [
                ...
    }).jqGrid(
                'navGrid',
                '#pager',
                {
                    edit: true,
                    add: true,
                    del: true
                });
}

Webmethod



        [WebMethod]
        public static string GetUsersJSON()
        {
            var users = new List();
            using(UserAdministrationSandboxDataContext uasd = new UserAdministrationSandboxDataContext())
            {
                users = uasd.GetUserList();                
            }
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            return serializer.Serialize(users); 

        }

Current code

Now I worked correctly, but I still have one last question. Why do I need to set "repeatitems: false" to display the content?

, , ajax.

(Ajax: type) - (jqgrid: mtype) (Ajax: contentType) (jqgrid: ajaxGridOptions: {contentType:})

, , , JSONReader.

, .

JS



function GetUserDataFromServer()
{
    $('#list').jqGrid({
        url: "Default.aspx/GetUsersJSON",
        mtype: 'POST',        
        ajaxGridOptions: { contentType: "application/json" },
        datatype: "json",
        serializeGridData: function (postData)
        {
            return JSON.stringify(postData);
        },
        jsonReader: {
            root: function (obj) { return obj.d; },
            page: function (obj) { return 1; },
            total: function (obj) { return 1; },
            records: function (obj) { return obj.d.length; },
            id:'0',
            cell:'',
            repeatitems: false            
        },
        datatype: "json",
        height: 250,
        colName: ['Username', 'Email'],
        colModel: [
                {
                    name: 'Username',
                    index: 'Username',
                    width: 100,
                    editable: true
                },
                {
                    name: 'Email',
                    index: 'Email',
                    width: 220,
                    editable: true
                },
                {
                    name: 'IsLockedOut',
                    index: 'IsLockedOut',
                    width: 100,
                    editable: true,
                    edittype: 'checkbox'
                }
        ],
        caption: "Users"
    })
}

-


        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List GetUsersJSON()
        {
            using (UserAdministrationSandboxDataContext uasd = new UserAdministrationSandboxDataContext())
            {
                return uasd.GetUserList();
            }
        }

JSON


{"__type":"UserAdministrationSandbox.UserData","PKID":"00000000-0000-0000-0000-000000000001","Username":"TestUser","ApplicationName":"Test","Email":"TestUser@test.com","Comment":"TestUser","Password":"D41D8CD98F00B204E9800998ECF8427E","PasswordQuestion":"Is this a blank Password?","PasswordAnswer":null,"IsApproved":true,"LastActivityDate":"\/Date(1298869200000)\/","LastLoginDate":"\/Date(1298869200000)\/","LastPasswordChangedDate":"\/Date(1298869200000)\/","CreationDate":"\/Date(1298869200000)\/","IsOnLine":false,"IsLockedOut":false,"LastLockedOutDate":"\/Date(1298869200000)\/","FailedPasswordAttemptCount":0,"FailedPasswordAttemptWindowStart":null,"FailedPasswordAnswerAttemptCount":null,"FailedPasswordAnswerAttemptWindowStart":null}
+5
2

, , (. ). , jqGrid

ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
    return JSON.stringify(postData);
},
jsonReader: { root: "d.rows", page: "d.page", total: "d.total",
              records: "d.records" };

rows, page, total records , , jsonReader

jsonReader: {
    root: function (obj) { return obj.d; },
    page: function (obj) { return 1; },
    total: function (obj) { return 1; },
    records: function (obj) { return obj.d.length; }
}

( ). , , , loadonce:true.

, . , JavaScriptSerializer.Serialize -. dataType: "json", JSON $.ajax. . - msg success d. msg.d - , JSON, eval(msg.d). , JSON .

, - GetUsersJSON :

[WebMethod]
[ScriptMethod (ResponseFormat = ResponseFormat.Json)]
public static List<User> GetUsersJSON()
{
    using(UserAdministrationSandboxDataContext uasd =
                                    new UserAdministrationSandboxDataContext())
    {
        return uasd.GetUserList();                
    }
}

data: eval(msg.d) data: msg.d.

- [ScriptMethod (ResponseFormat = ResponseFormat.Json)] [ScriptMethod (UseHttpGet = true, ResponseFormat = ResponseFormat.Json)], (, ) .

ajaxGridOptions, serializeGridData jsonReader jqGrid , JSON, JSON, .

. , repeatitems:false jsonReader, . , jsonReader, .

, , JSON jqGrid. . ,

1) ,

{"Username":"TestUser","Email":"TestUser@test.com","Comment":"..","IsApproved":true}

2) ,

["TestUser","TestUser@test.com","true"]


["TestUser","TestUser@test.com","1"]

jqGrid "true" "1" "true" edittype:'checkbox'. , -, "1" / "0" .

repeatitems:false , jqGrid JSON () . repeatitems:true ( ).

, (repeatitems:false), cell jsonReader , cell:'', .

id jsonReader , . id:'0' , " " . Firebug IE Chrome, , <tr> id="TestUser" ( ). HTML , , . jqGrid id , "1" , "2",... , , , id jsonReader.

: (repeatitems:false) (repeatitems:true)

  • ( ).
  • , .

(repeatitems:true) .

  • . , , "" , jqGrid.
  • , ( ) .

, , , (repeatitems:true) . , cell:'' jsonReader .

jqGrid jsonReader, xmlReader localReader.

+12

jqGrid WebMethod. , .

ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridTest.aspx.cs" Inherits="SMFLWeb.GridTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!--  jQuery-UI theme Redmond is used. The UI iles should be copied to the following location -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/Redmond/jquery-ui.css" />

    <!--  This is a CSS file from jqGrid download -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

    <!--  jQuery file -->
    <script src="Scripts/jquery-1.11.3.min.js"></script>

    <!--  Following two jqGrid Script Files.  -->
    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.js" type="text/javascript"></script>

    <script>

        $(document).ready(function () {

            $("#grid").jqGrid({
                url: "GridTest.aspx/GetMyGames",
                mtype: 'POST',
                postData:
                {
                    useMyFilter: "1"
                },
                datatype: "json",
                ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                serializeGridData: function (postData) {
                    return JSON.stringify(postData);
                },
                jsonReader: {
                    repeatitems: false,
                    root: function (obj) { return obj.d; }
                },
                colNames: ['GameID', 'GameName'],
                colModel: [
                    { name: 'GameID', index: 'GameID', width: 250},
                    { name: 'GameName', index: 'GameName', width: 250}
                ],
                rowNum: 2,
                /*rowList: [10, 20, 30],*/
                pager: '#pager2',
                sortname: 'id',
                viewrecords: true,
                sortorder: "desc",
                caption: "JSON Example",
                gridview: true,
                height: "auto",
                loadonce: true,
                recordtext: "Records {0} - {1} of {2}",
                emptyrecords: "No records to view",
                loadtext: "Loading...",
                pgtext: "Page {0} of {1}"
            });


        });


    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table id="grid"></table>
            <div id="pager2"></div>

        </div>
    </form>
</body>
</html>


namespace SMFLWeb
{
    public partial class GridTest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        [System.Web.Services.WebMethod(BufferResponse = false)]
        public static List<Game> GetMyGames(string useMyFilter)
        {
            List<Game> games = new List<Game>();
            Game g1 = new Game();
            g1.GameID = 1;
            g1.GameName = "A";

            Game g2 = new Game();
            g2.GameID = 2;
            g2.GameName = "B";

            Game g3 = new Game();
            g3.GameID = 3;
            g3.GameName = "C";

            Game g4 = new Game();
            g4.GameID = 4;
            g4.GameName = "D";

            Game g5 = new Game();
            g5.GameID = 5;
            g5.GameName = "E";

            games.Add(g1);
            games.Add(g2);
            games.Add(g3);
            games.Add(g4);
            games.Add(g5);

            return games;
        }


    }
}
0

More articles:


All Articles