Thursday, May 2, 2013

jQuery-jqGrid : some code which works somewhere

Client aspx code


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

<!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 runat="server">
    <title></title>
    <link href="js/jquery-1.10.2-ui.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.9.1.js" type="text/javascript"></script>

    <script src="js/jquery-1.10.2-ui.js" type="text/javascript"></script>

    <script src="js/grid.locale-en.js" type="text/javascript"></script>

    <link href="js/ui.jqgrid.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
   
    <script type="text/javascript">
        function aa() {
            Service.DoWork(bb, cc, null);
        }
        function bb(result) {
            alert(result);
        }
        function cc(result) {
            alert(result);
        }

        function dd() {
            $.ajax({
                type: "POST",
                url: "Service.svc/DoWork",
                contentType: "application/json",
                dataType: "json",
                success: function(data) { alert(data.d); }
            });
        }

        function ee() {
            alert("aaaaa");
            /*************/
            $.ajax({
                type: "POST",
                url: "Service.svc/DoWork1",
                contentType: "application/json",
                dataType: "json",
                success: function(data) {
                alert(data.d);
                /********/
                var thegrid = jQuery("#grid");
                var data1 = JSON.parse(data.d).rows;
                alert(data1);
                alert(data1.length);
                thegrid.clearGridData();
                for (var i = 0; i < data1.length; i++) {
                    alert(data1[i].name);
                    thegrid.addRowData(i + 1, data1[i]);
                }
                /********/
                 }
            });          
            /*************/
        }

        $(document).ready(function() {


            alert("aa");
            $("#grid").jqGrid({
            datatype: ee,
            mtype: 'GET',
            colNames: ['id', 'name'],
            colModel: [
      { name: 'id', index: 'id', width: 55 },
      { name: 'name', index: 'name', width: 90 }

    ],

            pager: '#pager',
            rowNum: 10,
            rowList: [10, 20, 30],
            sortname: 'id',
            sortorder: 'desc',
            viewrecords: true,
            gridview: true,
            caption: 'My first grid'
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="SCM">
    <Services>
    <asp:ServiceReference Path="~/Service.svc" />
    </Services>
    </asp:ScriptManager>
    <div>
   
    </div>
    <button type="button" id="btn" onclick="aa();"></button>
    <button type="button" id="Button1" onclick="dd();"></button>
    <button type="button" id="Button2" onclick="ee();"></button>
    <table id="grid"></table>
    <div id="pager"></div>
    </form>
</body>
</html>



=======================================================
service code : 
using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;

using System.Collections;
using System.Collections.Generic;
using System.Web.Script.Serialization;

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
// Add [WebGet] attribute to use HTTP GET
[OperationContract]
public string DoWork()
{
// Add your operation implementation here
return "deluxe";
}


    [OperationContract]
    public string DoWork1()
    {
        Person[] p = new Person[] { new Person(1, "aaaa"), new Person(2, "bbbb") };
        List<Person> lp = new List<Person>();
        lp.Add(p[0]);
        lp.Add(p[1]);
        lp.Add(new Person(3, "cccc"));
        lp.Add(new Person(4, "dddd"));
        lp.Add(new Person(5, "cccc"));
        lp.Add(new Person(6, "dddd"));
        lp.Add(new Person(7, "cccc"));
        lp.Add(new Person(8, "dddd"));
        lp.Add(new Person(9, "cccc"));
        lp.Add(new Person(10, "dddd"));
        PagedList pl = new PagedList(lp, 10, 2, 2);
        string s = pl.ToString();
        return s;
    }
// Add more operations here and mark them with [OperationContract]
}

public class PagedList
{
    IEnumerable _rows;
    int _totalRecords;
    int _pageIndex;
    int _pageSize;
    object _userData;

    public PagedList(IEnumerable rows, int totalRecords, int pageIndex, int pageSize, object userData)
    {
        _rows = rows;
        _totalRecords = totalRecords;
        _pageIndex = pageIndex;
        _pageSize = pageSize;
        _userData = userData;
    }

    public PagedList(IEnumerable rows, int totalRecords, int pageIndex, int pageSize)
        : this(rows, totalRecords, pageIndex, pageSize, null)
    {
    }

    public int total { get { return (int)Math.Ceiling((decimal)_totalRecords / (decimal)_pageSize); } }

    public int page { get { return _pageIndex; } }

    public int records { get { return _totalRecords; } }

    public IEnumerable rows { get { return _rows; } }

    public object userData { get { return _userData; } }

    public override string ToString()
    {
        JavaScriptSerializer js = new JavaScriptSerializer();
        return js.Serialize(this);
        //return "{\"total\":\"2\",\"page\":\"2\",\"records\":\"4\",\"rows\":[{\"id\":\"1\",\"name\":\"aaaa\"},{\"id\":\"2\",\"name\":\"bbbb\"},{\"id\":\"3\",\"name\":\"cccc\"},{\"id\":\"4\",\"name\":\"dddd\"}],\"userData\":null}";

    }
}



public class Person
{
    public int id { get; set; }
    public string name { get; set; }
    public Person(int i, string s)
    {
        id = i;
        name = s;
    }
} 

-

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

How to check local and global angular versions

 Use the command ng version (or ng v ) to find the version of Angular CLI in the current folder. Run it outside of the Angular project, to f...