Search This Blog

Monday 1 October 2012

Bind data to gridview with JQuery or JSON in asp.net

In Default.aspx page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
         function Disp(obj) {
            // debugger;
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Default.aspx/BindDatatable",
                data: '{ID:"' + obj + '"}',
                dataType: "json",
                success: function (data) {
                    // debugger;
                    if (data.d.length == 0) {
                      
                    }
                    else {                      
                        $("#ctl00_CPHBody_gvDisplay").show();                               
                         $("#ctl00_CPHBody_gvDisplay tr:has(td)").remove();                      
                        for (var i = 0; i < data.d.length; i++) {
                            $("#ctl00_CPHBody_gvDisplay").append("<tr><td width='35%'>" + data.d[i].Code + "</td><td width='45%'>" + data.d[i].Description + "</td><td width='30%'>" + data.d[i].Date + "</td><td width='20%'>" + data.d[i].Seq + "</td></tr>");
                        }
                           }
                },
                error: function (result) {
                    alert("Error");
                }
            });
        }

    <asp:Button ID="btnAdd" runat="server" Text="Add" OnClientClick="Disp(2)" />
    <table width="100%">
                <tr>
                    <td>
                        <asp:GridView ID="gvDisplay" runat="server">
                            <HeaderStyle CssClass="tdheader" />
                            <RowStyle CssClass="trwhite" />
                        </asp:GridView>
                    </td>
                </tr>
            </table>

In Default.aspx.cs file
[WebMethod]
        public static UserDetails[] BindDatatable(string ID)
        {
            DataTable dt = new DataTable();
            List<UserDetails> details = new List<UserDetails>();
            if (ID != "undefined")
            {
                dt = "fetch data from database";
            }
            foreach (DataRow dtrow in dt.Rows)
            {
                UserDetails user = new UserDetails();
                user.FundCode = dtrow["Code"].ToString();
                user.FundDescription = dtrow["Description"].ToString();
                user.FundDate = dtrow["Date"].ToString();
                user.Seq = dtrow["Seq"].ToString();
                details.Add(user);
            }
            return details.ToArray();

        }
        public class UserDetails
        {
            public string Code { get; set; }
            public string Description { get; set; }
            public string Date { get; set; }
            public string Seq { get; set; }
        }

1 comment:

  1. Hi please look for ASP.Net GridView

    http://www.reddyinfosoft.blogspot.in/2012/12/jquery-datatable-plugin-in-aspnet-using_15.html

    and For ASP.Net Repeater

    http://www.reddyinfosoft.blogspot.in/2012/12/jquery-datatable-plugin-in-aspnet-using.html

    ReplyDelete