My previous tutorial showed "How to add Ajax Toolkit in Visual Studio 2010". Based on it, I will show you "How to use an Ajax Control". Here, how to make a registration form inside an Ajax Accordion will also be described.

Initial Chamber

Step 1

Open Visual Studio 2010 and create an Empty Website. Name it Accordion_ demo.

Step 2

In Solution Explorer, you will get your empty website. Next, add a web form and SQL Database. Now use the following procedure.

To create a Web Form, right-click the Accordion_demo (your empty website), then select Add New Item -> Web Form. Name it Accordion_demo.aspx.

To create the SQL Server Database, right-click the Accordion_demo (your empty website), then select Add New Item -> SQL Server Database. (Add the database inside the App_Data_folder.)

Database Chamber

Step 3

In Server Explorer, click on the arrow sign of your database (“Database.mdf”). Right-click on the tables and select Add New Table.

  1. tbl_data (Don't forgot IS INDENTITY = “TRUE”.)



  2. tbl_feedback (Don't forgot IS INDENTITY = “TRUE”.)

If you are at the beginner level in ASP.NET and not aware of VS10, then check it out on Google or my previous tutorials will help you out. I am keeping this as simple as possible, so that you can understand it properly.

Now to make a Stored Procedure for inserting data from the registration form into your database. So, here we will make a Stored Procedure for inserting data.

I believe you will make your own Stored Procedure for the feedback form (Home Work).

Design Chamber

Step 4

Open your Accordion.aspx file from Solution Explorer and start designing your application.

Here is the code:

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3. <title></title>
  4. <style type="text/css">
  6. .header
  7. {
  8. background-color: #2E4D7B;
  9. border: 1px solid #2F4F4F;
  10. color:White;
  11. cursor:pointer;
  12. font-family:Arial, Sans-Serif;
  13. font-size:12px;
  14. font-weight:bold;
  15. margin-top:5px;
  16. padding:5px;
  17. width:40%;
  19. }
  21. .accordianheaderselected
  22. {
  23. background-color: #5078B3;
  24. border:1px solid #2F4F4F;
  25. color:White;
  26. cursor:pointer;
  27. font-family:Arial, Sans-Serif;
  28. font-size:12px;
  29. font-weight:bold;
  30. margin-top:5px;
  31. padding:5px;
  32. width:40%;
  35. }
  37. </style>
  39. </head>
  40. <body>
  41. <form id="form1" runat="server">
  42. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
  43. </asp:ToolkitScriptManager>
  44. <div align="center">
  47. <asp:Accordion ID="Accordion1" runat="server" FadeTransitions="True"
  48. ForeColor="#3366FF" HeaderCssClass="header" BorderColor="#993333"
  49. BorderStyle="Dotted" BorderWidth="1px"
  50. RequireOpenedPane="False" ContentCssClass=""
  51. HeaderSelectedCssClass="accordianheaderselected" Width="700px">
  53. <Panes>
  54. <asp:AccordionPane ID="AccordionPane1" Font-Names="Verdana" BorderColor="AliceBlue" runat="server">
  55. <Header>Registration form</Header>
  56. <Content>
  57. <asp:Panel ID="panel12" runat="server">
  59. <table style="width: 100%;">
  61. <tr>
  62. <td>
  63. <asp:Label ID="Label1" runat="server" Text="FirstName:"></asp:Label>
  64. </td>
  65. <td>
  66. <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  67. </td>
  68. </tr>
  71. <tr>
  72. <td>
  73. <asp:Label ID="Label2" runat="server" Text="LastName:"></asp:Label>
  74. </td>
  75. <td>
  76. <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
  77. </td>
  78. </tr>
  80. <tr>
  81. <td>
  82. <asp:Label ID="Label3" runat="server" Text="Email:"></asp:Label>
  83. </td>
  84. <td>
  85. <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
  86. </td>
  87. </tr>
  90. <tr>
  91. <td>
  92. <asp:Label ID="Label4" runat="server" Text="PhoneNo:"></asp:Label>
  93. </td>
  94. <td>
  95. <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
  96. </td>
  101. <tr>
  102. <td>
  103. <asp:Label ID="Label5" runat="server" Text="City:"></asp:Label>
  104. </td>
  105. <td>
  106. <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
  107. </td>
  110. <tr>
  111. <td>
  113. </td>
  114. <td>
  115. <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Submit" />
  116. </td>
  117. </table>
  119. </asp:Panel>
  120. </Content>
  121. </asp:AccordionPane>
  124. <asp:AccordionPane ID="AccordionPane2" runat="server">
  125. <Header>Give me some Feedback</Header>
  126. <Content>
  128. <table>
  130. <tr>
  131. <td>
  132. <asp:TextBox ID="TextBox6" TextMode="MultiLine" runat="server"></asp:TextBox>
  133. </td>
  135. </tr>
  136. <tr>
  137. <td>
  138. <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Submit" />
  139. </td>
  141. </tr>
  143. </table>
  145. </Content>
  146. </asp:AccordionPane>
  148. </Panes>
  149. </asp:Accordion>
  151. </div>
  152. </form>
  153. </body>
  154. </html>

Don't forget to add ToolScriptManager for Ajax in VS10 after the form tag as in the following code.

  1. <form id="form1" runat="server">
  2. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
  3. </asp:ToolkitScriptManager>

As you use this tag, you will see the namespace in the topmost part of your .aspx file as shown in the following code.

  1. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

This is the namespace for Ajax from where we can get complete use of your AjaxToolkit.

Coding Chamber

Step 5

Now we are entering into our Code Zone. Let's begin by adding some namespaces into the Accordion.aspx.cs file.

Next, it's time for the real coding. Go through the following lines.

  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. }
  4. protected void Button1_Click(object sender, EventArgs e)
  5. {
  7. SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
  8. SqlCommand cmd = new SqlCommand("sp_insert", con);
  9. cmd.CommandType = CommandType.StoredProcedure;
  10. cmd.Parameters.AddWithValue("fname", TextBox1.Text);
  11. cmd.Parameters.AddWithValue("lname", TextBox2.Text);
  12. cmd.Parameters.AddWithValue("email", TextBox3.Text);
  13. cmd.Parameters.AddWithValue("phoneno", TextBox4.Text);
  14. cmd.Parameters.AddWithValue("city", TextBox5.Text);
  15. con.Open();
  16. int i = cmd.ExecuteNonQuery();
  17. con.Close();
  19. }
  22. protected void Button2_Click(object sender, EventArgs e)
  23. {
  25. SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
  26. SqlCommand cmd = new SqlCommand("sp_feedback", con);
  27. cmd.CommandType = CommandType.StoredProcedure;
  28. cmd.Parameters.AddWithValue("feedback", TextBox6.Text);
  31. con.Open();
  32. int i = cmd.ExecuteNonQuery();
  33. con.Close();
  35. if (i != 0)
  36. {
  37. Response.Write("success");
  38. }
  39. else
  40. {
  41. Response.Write("Temporary Failure");
  42. }
  43. }

Output Chamber

Here is your output.

I have attached a GIF image to give you a better idea of how to use your application. I hope you liked it. Have a good day and don't forget to do your homework and specify it in the comments (Stored Procedure of Feedback Form).