Post
Ask Question

Display Data On Click Of Row In GridView Using jQuery And Web Service In ASP.NET

Introduction

  • Here, I will explain how to display the data on click of row in GridView, using jQuery and Web Service in ASP.NET.
  • Follow the steps, mentioned below, to achieve our requirement.
Step 1

Create table, using query, mentioned below.
  1. CREATE TABLE [tblgrid](  
  2. [UserId] [int] IDENTITY(1,1) NOT NULL,  
  3. [userName] [varchar](50) NULL,  
  4. [City] [varchar](50) NULL,  
  5. [Designation] [varchar](50) NULL,  
  6. [sal] [bigint] NULL  
  7. )  
Step 2
 
Add below code to .aspx file.
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2.   
  3. <head runat="server">  
  4.     <title></title>  
  5.     <script src="http://dotnettricks-abdul.in/Contents/jquery-1.4.1.js" type="text/javascript"></script>  
  6.     <script type="text/javascript">  
  7.         function visiblefalse() {  
  8.   
  9.             $("#dv").attr("style", "display:none");  
  10.             $("#GridView1″).attr("  
  11.                 style ", "  
  12.                 backgroundColor: white ");    
  13.   
  14.             }  
  15.   
  16.             function GetDetails(id) {  
  17.   
  18.                 WebService.GetAllData(id, success, failure);  
  19.             }  
  20.   
  21.             function success(result) {  
  22.                 $(result).each(function(i) {  
  23.                     var username = result[i].userName;  
  24.                     var City = result[i].City;  
  25.                     var des = result[i].des;  
  26.                     var sal = result[i].sal;  
  27.                     $("div[id$=dv]").attr("style", "block");  
  28.                     $("#UName").html(username);  
  29.                     $("#City").html(City);  
  30.                     $("#Des").html(des);  
  31.                     $("#Sal").html(sal)  
  32.                 });  
  33.             }  
  34.   
  35.             function failure() {  
  36.                 alert("error");  
  37.   
  38.             }  
  39.     </script>  
  40. </head>  
  41.   
  42. <body>  
  43.     <form id="form1″ runat=" server ">    
  44. <div>    
  45. <asp:GridView ID="GridView1″ runat="server" AutoGenerateColumns="False" DataKeyNames="UserId,userName" EnableModelValidation="True" OnRowCommand="GridView1_RowCommand" HeaderStyle-BorderWidth="1″    
  46. HeaderStyle-Font-Bold=" true " OnRowDataBound="GridView1_RowDataBound ">    
  47. <Columns>    
  48. <asp:TemplateField HeaderText="UserName ">    
  49. <ItemTemplate>    
  50. <asp:Label ID="lblitemUser " runat="server " Text=’<%# Eval("userName ") %>’></asp:Label>    
  51. </ItemTemplate>    
  52. </asp:TemplateField>    
  53. <asp:TemplateField HeaderText="City ">    
  54. <ItemTemplate>    
  55. <asp:Label ID="lblitemCity " runat="server " Text=’<%# Eval("City ") %>’></asp:Label>    
  56. </ItemTemplate>    
  57. </asp:TemplateField>    
  58. <asp:TemplateField HeaderText="Designation ">    
  59. <ItemTemplate>    
  60. <asp:Label ID="lblDesig " runat="server " Text=’<%# bind("Designation ")%>’></asp:Label>    
  61. </ItemTemplate>    
  62. </asp:TemplateField>    
  63. <asp:TemplateField HeaderText="Salary ">    
  64. <ItemTemplate>    
  65. <asp:Label ID="lblsal " runat="server " Text=’<%# Eval("sal ") %>’></asp:Label>    
  66. </ItemTemplate>    
  67. </asp:TemplateField>    
  68. </Columns>    
  69. </asp:GridView>    
  70. </div>    
  71. <div>    
  72. <asp:Label ID="lblresult " runat="server "></asp:Label>    
  73. </div>    
  74. <div id="dv " runat="server " style="display: none; ">    
  75. <table>    
  76. <tr>    
  77. <td>    
  78. User Name:    
  79. </td>    
  80. <td id="UName ">    
  81. </td>    
  82. </tr>    
  83. <tr>    
  84. <td>    
  85. City:    
  86. </td>    
  87. <td id="City ">    
  88. </td>    
  89. </tr>    
  90. <tr>    
  91. <td>    
  92. Designation:    
  93. </td>    
  94. <td id="Des ">    
  95. </td>    
  96. </tr>    
  97. <tr>    
  98. <td>    
  99. Salary:    
  100. </td>    
  101. <td id="Sal ">    
  102. </td>    
  103. </tr>    
  104. </table>    
  105. <asp:ScriptManager ID="ScriptManager1″ runat="server">  
  106.         <Services>  
  107.             <asp:ServiceReference Path="~/WebService.asmx" />  
  108.         </Services>  
  109.         </asp:ScriptManager>  
  110.         </div>  
  111.     </form>  
  112. </body>  
  113.   
  114. </html>  
Step 3

Add below code to .cs page.
  1. SqlConnection con = new SqlConnection("Data Source=.\\SQLExpress;Initial Catalog=abc;Integrated Security=True");  
  2. SqlDataAdapter da = new SqlDataAdapter();  
  3. DataSet ds = new DataSet();  
  4. protected void Page_Load(object sender, EventArgs e)  
  5. {  
  6.     if (!IsPostBack)  
  7.     {  
  8.     bind();  
  9.   
  10.     }  
  11. }  
  12.   
  13. protected void bind()  
  14. {  
  15.   
  16.     SqlCommand cmd = new SqlCommand("select * from tblgrid", con);  
  17.   
  18.     da.SelectCommand = cmd;  
  19.     da.Fill(ds, "tblgrid");  
  20.     if (ds.Tables[0].Rows.Count > 0)  
  21.     {  
  22.         GridView1.DataSource = ds.Tables[0];  
  23.         GridView1.DataBind();  
  24.     }  
  25.   
  26. }  
  27.   
  28. protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)  
  29. {  
  30.     if (e.Row.RowType == DataControlRowType.DataRow)  
  31.     {  
  32.         e.Row.Attributes.Add("onclick", "JavaScript: GetDetails('" + Convert.ToInt32(GridView1.DataKeys[e.Row.RowIndex].Value.ToString()) + "')");  
  33.         e.Row.Attributes.Add("onmouseover", "JavaScript:this.style.cursor=’pointer’; this.style.backgroundColor=’Red’");  
  34.         e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=’white’");  
  35.     }  
  36. }  
Step 4
 
Create webService project.
  1. [WebMethod]  
  2. public GetRec[] GetAllData(int ID)  
  3. {  
  4.     SqlCommand cmd = new SqlCommand("select userName,City,Designation,sal from tblgrid where UserId="+ID);  
  5.     DataTable dt = new DataTable();  
  6.     cmd.Connection = con;  
  7.     da.SelectCommand = cmd;  
  8.     //da.Fill(ds, "tblgrid");  
  9.     da.Fill(dt);  
  10.     List<GetRec> objList = new List<GetRec>();  
  11.     foreach(DataRow dr in dt.Select())  
  12.     {  
  13.         objList.Add(new GetRec   
  14.             {  
  15.             userName=dr["userName"].ToString(),  
  16.             City=dr["City"].ToString(),  
  17.             des = dr["Designation"].ToString(),  
  18.             sal = Convert.ToInt32(dr["sal"])  
  19.   
  20.             }  
  21.         );  
  22.     }  
  23. return objList.ToArray();  
  24. }  
  25.   
  26. public struct GetRec {  
  27.   
  28.     public string userName { get; set; }  
  29.     public string City { get; set; }  
  30.     public string des { get; set; }  
  31.     public int sal { get; set; }  
  32.   
  33.     }  
Step 5
 
We got the output, mentioned below.
Next Recommended Reading How To Call ASP.NET Web Service Using jQuery Ajax