Home > DeveloperSection > Articles > Fetch values from database with Ajax

Fetch values from database with Ajax


AJAX AJAX 
Ratings:
1 Comment(s)
 4312  View(s)
Rate this:

Fetch values from database with Ajax

1         .Aspx Page

2    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

3     

4    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

5    /TR/xhtml1/DTD/xhtml1-transitional.dtd">

6     

7    <html xmlns="http://www.w3.org/1999/xhtml">

8    <head runat="server">

9    <title></title>

10  <link rel="shortcut icon" href="favicon.ico"/>

11  <link rel="Stylesheet" type="text/css" href="page.css" />

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

13  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery

14  /1.4.2/jquery.min.js?ver=3.0.1'></script>   

15  <script type='text/javascript' src='js/infinite-rotator.js'></script>            

16  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

17  <link rel="Stylesheet" href="styl.css" type="text/css" media="screen" />

18  <style type="text/css">

19  .style1

20  {

21  width: 100%;

22  height: 51px;

23  margin-left: 1px;

24  }

25  .accordion-header, .accordion-selected {

26  width: 390px;

27  background-color:#6EA538;

28  margin-bottom:2px;

29  padding:2px;

30  color:#F6FFD5;

31  font-weight:bold;

32  cursor:pointer;

33  }

34  .accordion-content {

35  width:390px;

36  margin-bottom:2px;

37  padding:2px;

38  }

39  .accordion-selected, .accordion-content {

40  border:solid 2px #666666;

41  }

42  .style2

43  {

44  width: 100%;

45  height: 141px;

46  margin-top: 0px;

47  }

48  .style3

49  {

50  width: 100%;

51  margin-top: 0px;

52  }

53  .style4

54  {

55  }

56  .style5

57  {

58  font-weight: normal;

59  font-size: x-large;

60  }

61  #wrapper

62  {

63  height: 316px;

64  width: 1177px;

65  }

66  .style6

67  {

68  color: #99CC00;

69  width: 680px;

70  height: 38px;

71  font-weight: normal;

72  font-size: x-large;

73  }

74  .style8

75  {

76  color: #99CC00;

77  width: 105px;

78  height: 38px;

79  }

80  .style9

81  {

82  height: 38px;

83  }

84  .style10

85  {

86  color: #FFFFFF;

87  }

88  </style>

89  </head>

90  <body class="b"  >

91  <form id="form1" runat="server">

92  <div class="b">

93  <asp:ScriptManager ID="ScriptManager1" runat="server">

94  </asp:ScriptManager>

95  <span class="style5"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

96  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

97  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

98  <table class="a" style ="margin-top: -12px";>

99  <tr>

100 <td style ="margin-left: 5px"; class="style9">

101 </td>

102 <td class="style8">

103 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

104 <td class="style6">

105 <strong>&nbsp;<asp:Label ID="Label1" runat="server" Font-Size="14pt"

106 ForeColor="White" style="font-size: x-large"></asp:Label>

107 <span class="style10">

108 <br />

109 </span></strong></td>

110 </tr>

111 </table>

112 </strong></span>&nbsp;<asp:Panel ID="Panel1" runat="server" Height="1240px"

113 Width="1271px">

114 <asp:Panel ID="Panel2" runat="server" Height="1222px" style="margin-left: 79px; margin-bottom: 0px;"

115 Width="1188px">

116 <table class="style1" bgcolor="White">

117 <tr>

118 <td align="center">

119 <div id="tabs">

120 <ul>

121 <li style="width: 100px; height: 50px"><a href="Home.aspx"><span>Home</span></a></li>

122 <li><a href="Aboutus.aspx"><span>About Us</span></a></li>

123 <li><a href="Ourproductcat.aspx"><span>Our Product</span></a></li>

124 <li><a href="Ourcustomer.aspx"><span>Our Customer</span></a></li>

125 <li><a href="Enquiry.aspx"><span>Send Enquiry</span></a></li>

126 <li><a href="Contactus.aspx"><span>Contact Us</span></a></li>

127 </ul>

128 </div>

129 <table class="style2" border="1" bgcolor="#669900" style="border-style: solid">

130 <tr>

131 <td>

132 <img src="image/top_top.png" width="1180px" alt="" />

133 <table class="style3" bgcolor="White">

134 <tr>

135 <td bgcolor="White">

136 <div ID="rotating-item-wrapper">

137 <img src="images/furniture.jpg" alt="photo of building across from our office"

138 class="rotating-item" width="850" height="140" />

139 <img src="images/household.jpg" alt="building entrance with neon backlit walls"

140 class="rotating-item" width="850" height="140" />

141 <img src="images/3.png" alt="building lobby window reflections" class="rotating-item"

142 width="850" height="140" />

143 <p style="display:none;">

144 Source code and instructions at:

145 <a href="http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/">

146 Infinite Loop: Rotating Images Using jQuery (JavaScript)</a><br/>by

147 <a href="http://trendmedia.com/">San Francisco WordPress website designers and

148 developers - TrendMedia</a></p>

149 </div>

150 </td>

151 </tr>

152 </table>

153 <img src="image/top_bot.png" width="1180px" alt=""/>

154 </td>

155 </tr>

156 <caption>

157 </caption>

158 </table>

159 </td>

160 </tr>

161 </table>

162 <div style="width: 1188px; height: 1027px">

163 <div style="width: 782px; height: 1026px; left: 500px; margin-left: 407px;" >

164 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

165 <asp:Panel ID="Panel3" runat="server" ScrollBars="Vertical"

166 style="font-size: small">

167 </asp:Panel>

168 <cc1:RoundedCornersExtender ID="Panel3_RoundedCornersExtender" runat="server"

169 BorderColor="AppWorkspace" Color="AppWorkspace" Enabled="True"

170 TargetControlID="Panel3"></cc1:RoundedCornersExtender>

171 </asp:ContentPlaceHolder>

172 </div>

173 <table style="width: 390px; height: 56px; margin-top: -1040px">

174 <tr>

175 <asp:Panel ID="Panel7" runat="server">

176 <td>

177 <cc1:Accordion ID="Accordion1" runat="server" TransitionDuration="100" 

178 SelectedIndex="0" FramesPerSecond="100" FadeTransitions="true" RequireOpenedPane="true"

179 OnItemDataBound="Accordion1_ItemDataBound"

180 ContentCssClass="accordion-content" HeaderCssClass="accordion-header"

181 HeaderSelectedCssClass="accordion-selected" ><HeaderTemplate><%#DataBinder.Eval(Container.DataItem,

182 "category_name")%></HeaderTemplate><ContentTemplate><asp:HiddenField ID="txt_categoryID"

183 runat="server" Value='<%#DataBinder.Eval(Container.DataItem,"id") %>'/><asp:GridView

184 ID="GridView1" runat="server" RowStyle-BackColor=#214200 RowStyle-HorizontalAlign="Left"

185 AutoGenerateColumns="false" GridLines="Both"

186 Width="390px"><Columns><asp:TemplateField HeaderStyle-HorizontalAlign="Left"

187 HeaderStyle-ForeColor="#EBF7F1"><ItemTemplate><img src="download.jpg"

188 alt="Image" height="15px" width="15px" onclick="go"/><asp:LinkButton

189 ID="lb1" Font-Underline="false" CausesValidation="false"  ForeColor="#F6FFD5"

190 Text= '<%#DataBinder.Eval(Container.DataItem,"category_name") %>' runat="server"

191 PostBackUrl='<%#"~/ourproducts.aspx?Name="+Eval("category_name") %>' />

192 </ItemTemplate></asp:TemplateField></Columns></asp:GridView>

193 </ContentTemplate></cc1:Accordion>

194 </td>

195 </asp:Panel>

196 </tr>

197 </table>

198 </div>

199 </asp:Panel>

200 <cc1:RoundedCornersExtender ID="Panel7_RoundedCornersExtender" runat="server"

201 BorderColor="AppWorkspace" Color="AppWorkspace" Corners="All" Enabled="True"

202 TargetControlID="Panel7">

203 </cc1:RoundedCornersExtender>

204 <cc1:RoundedCornersExtender ID="Panel2_RoundedCornersExtender" runat="server"

205 BorderColor="AppWorkspace" Color="AppWorkspace" Enabled="True" Radius="3"

206 TargetControlID="Panel2"></cc1:RoundedCornersExtender>

207 <div style="margin-top: 0px; width:100%; position:static; height: 179px;">

208 <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">

209 NavigateUrl="http://www.hunchsoft.co.in" style="color: #FFFFFF">Hunch Software Pvt. Ltd.</asp:HyperLink>

210 </div>

211 </td>

212 </tr>

213 </table>

214 </asp:Panel>

215 <cc1:RoundedCornersExtender ID="Panel6_RoundedCornersExtender" runat="server"

216 BorderColor="AppWorkspace" Color="AppWorkspace" Enabled="True" Radius="1"

217 TargetControlID="Panel6">

218 </cc1:RoundedCornersExtender>

219 </asp:ContentPlaceHolder>

220 </div>

221 </asp:Panel>

222 <cc1:RoundedCornersExtender ID="Panel1_RoundedCornersExtender" runat="server"

223 BorderColor="ActiveCaptionText" Color="ActiveCaptionText" Enabled="True"

224 Radius="5" TargetControlID="Panel1">

225 </cc1:RoundedCornersExtender>

226 </div>

227 </form>

228 </body>

229 </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

  

Fetch values from database with Ajax


Fetch values from database with Ajax

By John Smith on   4 years ago

Welcome Chandu Kumar!

As we can see you have posted your first article here on MindStick, I would like to give you few suggestions.

  1. Please try to explain your code.
  2. Strive to make your code as simple as possible.
  3. If you are not giving full idea to your audience (What you are doing in this article) then it would not be easier to understand.

We hope to see more Articles from you in near future.

Thanks


Don't want to miss updates? Please click the below button!

Follow MindStick