Results 1 to 2 of 2

Thread: uable to bind grid with jsons data

Hybrid View

  1. #1

    Thread Starter
    Fanatic Member
    Join Date
    Jun 2007
    Location
    Karachi
    Posts
    551

    uable to bind grid with jsons data

    I am unable to bind gridview with json data ..although data is returning from json webservice


    here is the code
    Code:
    <%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site1.Master" CodeBehind="AdminMainPage1.aspx.cs" Inherits="SIM.AdminMainPage" %>
    
    
     
    
    <asp:Content ID="Content1" runat="server"  ContentPlaceHolderID="MainContent">
        
      <title>jQuery UI Tabs - Vertical Tabs functionality</title>
    
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"/>
    
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    
      <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    
      <link rel="stylesheet" href="/resources/demos/style.css"/>
        <script type="text/javascript">
    
        //    $(document).ready(function ()
            //    {
            function getUsers() {
    
                $.ajax({
    
                    type: "POST",
    
                    contentType: "application/json; charset=utf-8",
    
                    url: "WebService1.asmx/getUsers",
    
                    data: "{}",
    
                    dataType: "json",
    
                    success: function (data) {
    
                        for (var i = 0; i < data.d.length; i++) {
    
                            $("#gdRows").append("<tr><td>" + data.d[i].UserName + "</td><td>" + data.d[i].password + "</td><td>" + data.d[i].Name + "</td></tr>");
    
                        }
    
                    },
    
                    error: function (result) {
    
                        alert("Error");
    
                    }
    
                });
            }
           // });
    
    </script>
        
        <script type="text/javascript">
    
    
            function ChangePassword() {
                var username = 'erum'
                $.ajax({
                    type: "POST",
                    url: "WebService1.asmx/ChangePassword",
                    //data: "{ 'value1': " + "'" + $("#TextBox5").val() + "'" + ", 'value2': " + "'" + username + "'" + "}",
                    data: "{ 'value2': " + "'" + $("#TextBox5").val() + "'" + ", 'value1': " + "'" + username + "'" + "}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    //   success: OnSuccess,
                    //  error: OnError
                });
            }
    
    
    
    
    
    </script>
        
        <script>
    
            $(document).ready(function () {
                $("#flip-DeleteUpdateuser").click(function () {
                    $("#panel-DeleteUpdateuser").slideDown("slow");
                    getUsers();
                });
            });
    </script>
        <script>
    
            $(document).ready(function () {
                $("#flip-RemoveCategory").click(function () {
                    $("#panel-RemoveCategory").slideDown("slow");
                });
            });
    </script>
    
        <script>
    
            $(document).ready(function () {
                $("#flip-RemoveItem").click(function () {
                    $("#panel-RemoveItem").slideDown("slow");
                });
            });
    </script>
    <script>
    
        $(document).ready(function () {
            $("#flip").click(function () {
                $("#panel").slideDown("slow");
            });
        });
    </script>
        <script>
    
            $(document).ready(function () {
                $("#flip-updatePrice").click(function () {
                    $("#panel-updatePrice").slideDown("slow");
                });
            });
    </script>
    
        <script>
    
            $(document).ready(function () {
                $("#flip-user").click(function () {
                    $("#panel-user").slideDown("slow");
                });
            });
    </script>
        <script>
    
            $(document).ready(function () {
                $("#flip-category").click(function () {
                    $("#panel-category").slideDown("slow");
                });
            });
    </script>
      <script>
    
          $(document).ready(function () {
              $("#flip1").click(function () {
                  $("#panel1").slideDown("slow");
              });
          });
    </script>
        <script>
    
            $(document).ready(function () {
                $("#flip2").click(function () {
                    $("#panel2").slideDown("slow");
                });
            });
    
            $(document).ready(function () {
                $("#<%=gdRows.ClientID%> tr").
                filter(":odd").css("background-color", "grey");
            });
    </script>
        <script>
    
            $(function () {
    
                $("#tabs").tabs();
    
            });
    
      </script>
        <style> 
    #panel,#flip,#panel1,#flip1,#panel2,#flip2,#panel-user,#flip-user,#flip-category,#panel-category,#flip-updatePrice,#panel-updatePrice,#flip-RemoveItem,#panel-RemoveItem,#panel-RemoveCategory,#flip-RemoveCategory,#flip-DeleteUpdateuser,#panel-DeleteUpdateuser
    {
    padding:5px;
    text-align:center;
    /*background-color:black;*/
    width:400px;
    color:white;
    border:solid 1px #c3c3c3;
    font:smaller;
    font-family:Trebuchet MS;
    font-size:small;
    }
        #flip,#flip1,#flip2,#flip-user,#flip-category,#flip-updatePrice,#flip-RemoveItem,#flip-RemoveCategory,#flip-DeleteUpdateuser
        {
            background-color:black;
        }
    
    #panel,#panel1,#panel2,#panel-user,#panel-category,#panel-updatePrice,#panel-RemoveItem,#panel-RemoveCategory,#panel-DeleteUpdateuser
    {
    /*//padding:50px;*/
    display:none;
    height:auto;
    background-color:#99004c;
    
    
    
    
    
    }
        #table
        {
            
        }
        .ul {
         font-size:7px;
         
    
     }
    </style>
    
      <script>
    
          $(function () {
    
              $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    
              $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
    
          });
    
      </script>
    
      <style>
    
      .ui-tabs-vertical { width: 55em; }
    
      .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
    
      .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
    
      .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
    
      .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
    
      .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
    
      </style>
    
    
    <div id="tabs">
    
      <ul>
            <li><a href="#tabs-4">Password Change</a></li>
    
        <li><a href="#tabs-5">Create new user</a></li>
    
        <li><a href="#tabs-6">Add Category</a></li>
        <li><a href="#tabs-1">Update Product Price</a></li>
    
        <li><a href="#tabs-2">Remove Item</a></li>
    
        <li><a href="#tabs-3">Remove Category</a></li>
         <li><a href="#tabs-7">Delete and update Users</a></li>
    
       
    
      </ul>
    
         <div id="tabs-4">
    
       
       <div id="flip2">
        Click  here to change Password
    
    </div>
    <div id="panel2"><table border="0">
                    <tr>
                        <td>Change Password</td>
                         <td> <input type="text" id="TextBox5" />
                 <%--      <asp:TextBox ID="TextBox54" runat="server"></asp:TextBox>--%>
    
                         </td>
                       
                    </tr>
         <tr>
                        <td>Verify Password</td>
                        <td><asp:TextBox ID="TextBox6" runat="server"></asp:TextBox></td>
                       
                    </tr>
          <tr>
              <td></td>
          </tr>
                    <tr>
                        <td><asp:Button ID="Button2" OnClientClick="ChangePassword(); return false;" runat="server" Text="Change" /></td>
                        <td>&nbsp;</td>
                    </tr>
                </table></div>
      </div>
    
      <div id="tabs-5">
    
       
    <div id="flip-user">
        Click  here to Add New User
    
    </div>
    <div id="panel-user"><table border="0">
                    <tr>
                        <td>Add Users</td>  
                        <td> <input type="text" id="txt_user" /></td>
                       
                    </tr>
          <tr>
              <td></td>
          </tr>
                    <tr>
                        <td><asp:Button ID="btn1" runat="server" Text="Add" /></td>
                        <td>&nbsp;</td>
                    </tr>
                </table></div>
      </div>
    
      <div id="tabs-6">
    
        
    
    <div id="flip-category">
        Click  here to Add Category
    
    </div>
    <div id="panel-category">
        <table border="0">
                    <tr>
                        <td>Add Categories</td>
                        <td><asp:TextBox ID="txt_category" runat="server"></asp:TextBox></td>
                       
                    </tr>
          <tr>
              <td></td>
          </tr>
                    <tr>
                        <td><asp:Button ID="btn3" runat="server" Text="Add" /></td>
                        <td>&nbsp;</td>
                    </tr>
                </table></div>
      </div>
     <div id="tabs-1">
    
        
    
    <div id="flip-updatePrice">
        Click  here to update product Price
    
    </div>
    <div id="panel-updatePrice"><table border="0">
                    <tr>
                        <td>selct category</td>
                        <td><asp:TextBox ID="txt_category2" runat="server"></asp:TextBox></td>
                       
                    </tr>
          <tr>
                        <td>select item</td>
                        <td><asp:TextBox ID="txt_item" runat="server"></asp:TextBox></td>
                       
                    </tr>
          <tr>
              <td></td>
          </tr>
                    <tr>
                        <td><asp:Button ID="btn_priceupdate" runat="server" Text="Update" /></td>
                        <td>&nbsp;</td>
                    </tr>
                </table></div>
      </div>
    
      <div id="tabs-2">
    
      
    <div id="flip-RemoveItem">
        Click  here to Remove Item
    
    </div>
    <div id="panel-RemoveItem">
        <table border="0">
                    <tr>
                        <td>selct category</td>
                        <td><asp:TextBox ID="cat" runat="server"></asp:TextBox></td>
                       
                    </tr>
          <tr>
                        <td>select item</td>
                        <td><asp:TextBox ID="it" runat="server"></asp:TextBox></td>
                       
                    </tr>
          <tr>
              <td></td>
          </tr>
                    <tr>
                        <td><asp:Button ID="btn_Remove_Item" runat="server" Text="Remove" /></td>
                        <td>&nbsp;</td>
                    </tr>
                </table></div>
      </div>
    
      <div id="tabs-3">
    
       
    <div id="flip-RemoveCategory">
        Click  here to Remove Category
    
    </div>
    <div id="panel-RemoveCategory"><table border="0">
                    <tr>
                        <td>select category</td>
                        <td><asp:TextBox ID="txt_cat2" runat="server"></asp:TextBox></td>
                       
                    </tr>
          <tr>
                        <td>select item</td>
                        <td><asp:TextBox ID="txt_item2" runat="server"></asp:TextBox></td>
                       
                    </tr>
          <tr>
              <td></td>
          </tr>
                    <tr>
                        <td><asp:Button ID="btn_category3" runat="server" Text="Remove" /></td>
                        <td>&nbsp;</td>
                    </tr>
                </table></div>
      </div>
    
       <div id="tabs-7">
    
       
    <div id="flip-DeleteUpdateuser">
        Click  here to Update/Delete Users
    
    </div>
    <div id="panel-DeleteUpdateuser">
        <asp:GridView ID="gdRows" runat="server">
    
        </asp:GridView>
    
    
    </div>
      </div>
    
    </div>
    
     
    
    
    
     
        
    </asp:Content>
    any one not need to check whole code just consider following information in pasted code :

    Gridname : gdRows

    javascript method call : getUsers
    There is no achievement without goals

  2. #2
    Frenzied Member KGComputers's Avatar
    Join Date
    Dec 2005
    Location
    Cebu, PH
    Posts
    2,022

    Re: uable to bind grid with jsons data

    Hi,

    Here's a sample on databinding asp.net gridview using jQuery. I used webmethod approach as oppose to asmx. Databinding-ASP-NET-GridView-with-jQuery

    KGC
    CodeBank: VB.NET & C#.NET | ASP.NET
    Programming: C# | VB.NET
    Blogs: Personal | Programming
    Projects: GitHub | jsFiddle
    ___________________________________________________________________________________

    Rating someone's post is a way of saying Thanks...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width