---
title: "Fetch values from database with Ajax"  
description: "Fetch values from database with Ajax"  
author: "chandu kumar"  
published: 2012-11-09  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1056/fetch-values-from-database-with-ajax  
category: "ajax"  
tags: ["ajax"]  
reading_time: 4 minutes  

---

# Fetch values from database with Ajax

##### Aspx Page

```
   <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>            <!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 rel="shortcut icon" href="favicon.ico"/>  <link rel="Stylesheet" type="text/css" href="page.css" /> <script type="text/javascript" src="jquery-1.8.0.js"></script>  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery    /1.4.2/jquery.min.js?ver=3.0.1'></script>       <script type='text/javascript' src='js/infinite-rotator.js'></script>                 <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />   <link rel="Stylesheet" href="styl.css" type="text/css" media="screen" />   <style type="text/css">   .style1   {  width: 100%;   height: 51px;   margin-left: 1px;   }    .accordion-header, .accordion-selected {   width:  390px;   background-color:#6EA538;   margin-bottom:2px;   padding:2px;   color:#F6FFD5;   font-weight:bold;   cursor:pointer;   }   .accordion-content {   width:390px; margin-bottom:2px;   padding:2px;  }    .accordion-selected, .accordion-content {   border:solid 2px #666666;   }  .style2  {  width: 100%;   height:  141px;   margin-top: 0px;   }   .style3   {   width: 100%;   margin-top: 0px;   }   .style4   {   }   .style5   {   font-weight:  normal;   font-size:  x-large;  }   #wrapper   {  height:  316px;   width:  1177px;   }  .style6   {   color:  #99CC00;  width:  680px;   height: 38px;   font-weight:  normal;  font-size:  x-large;   }  .style8   {  color:  #99CC00;   width:  105px;   height: 38px;   }   .style9   {   height: 38px;   }   .style10   {   color:  #FFFFFF;   }   </style>   </head>   <body class="b"   >   <form id="form1" runat="server">   <div class="b">   <asp:ScriptManager ID="ScriptManager1" runat="server">  </asp:ScriptManager>   <span class="style5"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <table class="a" style ="margin-top: -12px";>   <tr> <td style ="margin-left: 5px"; class="style9"> </td> <td class="style8">  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> <td class="style6"> <strong>&nbsp;<asp:Label ID="Label1" runat="server" Font-Size="14pt"  ForeColor="White" style="font-size: x-large"></asp:Label> <span class="style10"> <br /> </span></strong></td> </tr> </table> </strong></span>&nbsp;<asp:Panel ID="Panel1" runat="server" Height="1240px"  Width="1271px"> <asp:Panel ID="Panel2" runat="server" Height="1222px" style="margin-left: 79px; margin-bottom: 0px;"  Width="1188px"> <table class="style1" bgcolor="White"> <tr> <td align="center"> <div id="tabs"> <ul> <li style="width: 100px; height: 50px"><a href="Home.aspx"><span>Home</span></a></li> <li><a href="Aboutus.aspx"><span>About Us</span></a></li> <li><a href="Ourproductcat.aspx"><span>Our Product</span></a></li> <li><a href="Ourcustomer.aspx"><span>Our Customer</span></a></li> <li><a href="Enquiry.aspx"><span>Send Enquiry</span></a></li> <li><a href="Contactus.aspx"><span>Contact Us</span></a></li> </ul> </div> <table class="style2" border="1" bgcolor="#669900" style="border-style: solid"> <tr> <td> <img src="image/top_top.png" width="1180px" alt="" /> <table class="style3" bgcolor="White"> <tr> <td  bgcolor="White"> <div ID="rotating-item-wrapper"> <img src="images/furniture.jpg"  alt="photo of building across from our office"  class="rotating-item" width="850" height="140" /> <img src="images/household.jpg"  alt="building entrance with neon backlit walls"  class="rotating-item" width="850" height="140" /> <img src="images/3.png" alt="building lobby window reflections" class="rotating-item"  width="850" height="140" /> <p style="display:none;"> Source code and instructions at: <a href="http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/"> Infinite Loop: Rotating Images Using jQuery (JavaScript)</a><br/>by <a href="http://trendmedia.com/">San Francisco WordPress website designers and  developers - TrendMedia</a></p> </div> </td> </tr> </table> <img src="image/top_bot.png" width="1180px" alt=""/> </td> </tr> <caption> </caption> </table> </td> </tr> </table> <div style="width: 1188px; height: 1027px"> <div style="width: 782px; height: 1026px; left: 500px; margin-left: 407px;" > <asp:ContentPlaceHolder ID="ContentPlaceHolder1"  runat="server"> <asp:Panel ID="Panel3" runat="server" ScrollBars="Vertical"  style="font-size: small"> </asp:Panel> <cc1:RoundedCornersExtender ID="Panel3_RoundedCornersExtender" runat="server"  BorderColor="AppWorkspace" Color="AppWorkspace" Enabled="True"  TargetControlID="Panel3"></cc1:RoundedCornersExtender> </asp:ContentPlaceHolder> </div> <table style="width: 390px; height: 56px; margin-top: -1040px"> <tr> <asp:Panel ID="Panel7" runat="server"> <td> <cc1:Accordion ID="Accordion1" runat="server"  TransitionDuration="100"    SelectedIndex="0"  FramesPerSecond="100" FadeTransitions="true" RequireOpenedPane="true"  OnItemDataBound="Accordion1_ItemDataBound" ContentCssClass="accordion-content"  HeaderCssClass="accordion-header"   HeaderSelectedCssClass="accordion-selected" ><HeaderTemplate><%#DataBinder.Eval(Container.DataItem,  "category_name")%></HeaderTemplate><ContentTemplate><asp:HiddenField ID="txt_categoryID"  runat="server" Value='<%#DataBinder.Eval(Container.DataItem,"id") %>'/><asp:GridView  ID="GridView1" runat="server"  RowStyle-BackColor=#214200 RowStyle-HorizontalAlign="Left" AutoGenerateColumns="false"  GridLines="Both" Width="390px"><Columns><asp:TemplateField  HeaderStyle-HorizontalAlign="Left"   HeaderStyle-ForeColor="#EBF7F1"><ItemTemplate><img src="download.jpg"  alt="Image" height="15px" width="15px" onclick="go"/><asp:LinkButton  ID="lb1"  Font-Underline="false" CausesValidation="false"  ForeColor="#F6FFD5"  Text= '<%#DataBinder.Eval(Container.DataItem,"category_name") %>' runat="server"  PostBackUrl='<%#"~/ourproducts.aspx?Name="+Eval("category_name") %>' /> </ItemTemplate></asp:TemplateField></Columns></asp:GridView> </ContentTemplate></cc1:Accordion> </td> </asp:Panel> </tr> </table> </div> </asp:Panel> <cc1:RoundedCornersExtender ID="Panel7_RoundedCornersExtender" runat="server"  BorderColor="AppWorkspace" Color="AppWorkspace" Corners="All" Enabled="True"  TargetControlID="Panel7"> </cc1:RoundedCornersExtender> <cc1:RoundedCornersExtender ID="Panel2_RoundedCornersExtender" runat="server"  BorderColor="AppWorkspace" Color="AppWorkspace" Enabled="True" Radius="3"  TargetControlID="Panel2"></cc1:RoundedCornersExtender> <div style="margin-top: 0px; width:100%; position:static; height: 179px;"> <asp:ContentPlaceHolder ID="ContentPlaceHolder2"  runat="server"> NavigateUrl="http://www.hunchsoft.co.in" style="color: #FFFFFF">Hunch Software Pvt. Ltd.</asp:HyperLink> </div> </td> </tr> </table> </asp:Panel> <cc1:RoundedCornersExtender ID="Panel6_RoundedCornersExtender" runat="server"  BorderColor="AppWorkspace" Color="AppWorkspace" Enabled="True" Radius="1"  TargetControlID="Panel6"> </cc1:RoundedCornersExtender> </asp:ContentPlaceHolder> </div> </asp:Panel> <cc1:RoundedCornersExtender ID="Panel1_RoundedCornersExtender" runat="server"  BorderColor="ActiveCaptionText" Color="ActiveCaptionText"  Enabled="True"  Radius="5"  TargetControlID="Panel1"> </cc1:RoundedCornersExtender> </div> </form> </body> </html>
```

##### .cs File

```
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using MySql.Data.MySqlClient;using System.Data;using System.Configuration;public partial class MasterPage : System.Web.UI.MasterPage{MySqlConnection sqlConn = new MySqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString);protected void Page_Load(object sender,  EventArgs e){if (!IsPostBack){bind();company_bind();int? x = null;if (x.HasValue){}}}public void company_bind(){MySqlDataAdapter cmd =  new MySqlDataAdapter("select * from packpouch.company_info",sqlConn);DataTable tb =  new DataTable();cmd.Fill(tb);Label1.Text = tb.Rows[0][0].ToString();Label2.Text = tb.Rows[0][1].ToString();Label3.Text = tb.Rows[0][2].ToString();Label4.Text = tb.Rows[0][3].ToString();Label5.Text = tb.Rows[0][4].ToString();Label6.Text = tb.Rows[0][5].ToString();Label7.Text = tb.Rows[0][6].ToString();Label8.Text = tb.Rows[0][7].ToString();Label9.Text = tb.Rows[0][8].ToString();Label10.Text = tb.Rows[0][9].ToString();Label11.Text = tb.Rows[0][10].ToString();Label12.Text = tb.Rows[0][11].ToString();Label13.Text = tb.Rows[0][12].ToString();Label14.Text = tb.Rows[0][13].ToString();}public void bind(){//string p= Accordion1.Panes.ToString();string p= Accordion1.SelectedIndex.ToString();MySqlCommand sqlSelect = new MySqlCommand("SELECT * FROM category where parentid=0", sqlConn);sqlSelect.CommandType = System.Data.CommandType.Text;MySqlDataAdapter sqlAdapter = new MySqlDataAdapter(sqlSelect);DataSet myDataset = new DataSet();sqlAdapter.Fill(myDataset);Accordion1.DataSource = myDataset.Tables[0].DefaultView;Accordion1.DataBind();}protected void Accordion1_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e){// int p = 1;if (e.ItemType == AjaxControlToolkit.AccordionItemType.Content){//p = Accordion1.SelectedIndex;// int pp= Accordion1.TabIndex;HiddenField x= (HiddenField)e.AccordionItem.FindControl("txt_categoryID");string p= x.ToString();string xx = e.Item.ToString();// MySqlConnection sqlConn = new MySqlConnection("Server=packpouch.db.7649735.hostedresource.com; Database=packpouch;uid=packpouch;pwd=Hunch@123");sqlConn.Open();MySqlCommand sqlSelect = new MySqlCommand("SELECT category_name FROM category where parentid = " + ((HiddenField)e.AccordionItem.FindControl("txt_categoryID")).Value + "",sqlConn); sqlSelect.CommandType = System.Data.CommandType.Text; MySqlDataAdapter sqlAdapter = new MySqlDataAdapter(sqlSelect); DataSet myDataset =  new DataSet(); sqlAdapter.Fill(myDataset); sqlConn.Close(); GridView grd = new GridView(); grd = (GridView)e.AccordionItem.FindControl("GridView1"); grd.DataSource = myDataset; grd.DataBind(); } }
```

##### Database:

![Fetch values from database with Ajax](https://www.mindstick.com/mindstickarticle/07e27dea-bc99-4c07-b91a-32a597af940b/images/64f2f61e-ce8a-4643-9e4d-7ae778e2979c.png)

![Fetch values from database with Ajax](https://www.mindstick.com/mindstickarticle/07e27dea-bc99-4c07-b91a-32a597af940b/images/7f259c68-09bc-49b9-bd7d-5e45a37bdc8d.png)

\

---

Original Source: https://www.mindstick.com/articles/1056/fetch-values-from-database-with-ajax

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
