This article shows how to get data from a database using select ids from a dropdown list, where you select the ids from the dropdown list and when you click on the button you get the id's necessary information (well I include only name and city :P).

INITIAL CHAMBER

Step 1

Open Your Visual Studio 2010 and create an empty website. Provide a suitable name (gridview_demo).

Step 2

In Solution Explorer you get your empty website, then add a Web Form and SQL Server Database. By going like this.

For Web Form:

gridview_demo (your empty website) then right-click then select Add New Item -> Web Form. Name it as -> gridviewid_demo.aspx.

For SQL Server Database:

gridview_demo (your empty website) then right-click 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 your database (Database.mdf) then select Tables -> Add New Table. Make the table like this.

Table -> tbl_data (Don't forget to make the ID as IS Identity -- True.)


Figure 1: Data Table

Make some entries in the database by going to Table -> tbl_data then right-click then Show Table Data. Don't copy my entries, make yours something else.


Figure 2: Database

DESIGN CHAMBER

Step 4

Now make some design for your application by going to gridviewid_demo.aspx and try the code like this.

Gridviewid_demo.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html
  4. xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title></title>
  7. <style type="text/css">
  8. .style1
  9. {
  10. font-size: large;
  11. text-align: center;
  12. }
  13. .style2
  14. {
  15. width: 272px;
  16. }
  17. .style3
  18. {
  19. width: 264px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <form id="form1" runat="server">
  25. <div class="style1">
  26. <strong>Get Data From Database using Seleceted IDs</strong>
  27. </div>
  28. <table style="width:100%;">
  29. <tr>
  30. <td class="style2">
  31. </td>
  32. <td class="style3">
  33. </td>
  34. <td>
  35. </td>
  36. </tr>
  37. <tr>
  38. <td class="style2">
  39. </td>
  40. <td class="style3">
  41. <asp:DropDownList ID="DropDownList1" runat="server" AppendDataBoundItems="True"
  42. AutoPostBack="True" DataTextField="id" DataValueField="id" Height="16px"
  43. Width="118px">
  44. <asp:ListItem Value="0">-- Select Id--</asp:ListItem>
  45. </asp:DropDownList>
  46. </td>
  47. <td>
  48. <asp:Button ID="Button1" runat="server" BackColor="#FFFF66"
  49. BorderColor="#CC3300" ForeColor="#6600FF" onclick="Button1_Click"
  50. Text="Click Here to show the Data" />
  51. </td>
  52. </tr>
  53. <tr>
  54. <td class="style2">
  55. </td>
  56. <td class="style3">
  57. </td>
  58. <td>
  59. </td>
  60. </tr>
  61. <tr>
  62. <td class="style2">
  63. </td>
  64. <td class="style3">
  65. <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
  66. BackColor="White" BorderColor="#336666" BorderStyle="Double" BorderWidth="3px"
  67. CellPadding="4" DataKeyNames="id" GridLines="Horizontal">
  68. <Columns>
  69. <asp:TemplateField HeaderText="UserId">
  70. <EditItemTemplate>
  71. <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("id") %>'>
  72. </asp:TextBox>
  73. </EditItemTemplate>
  74. <ItemTemplate>
  75. <asp:Label ID="Label2" runat="server" Text='<%# Bind("id") %>'>
  76. </asp:Label>
  77. </ItemTemplate>
  78. </asp:TemplateField>
  79. <asp:TemplateField HeaderText="Name">
  80. <EditItemTemplate>
  81. <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("name") %>'>
  82. </asp:TextBox>
  83. </EditItemTemplate>
  84. <ItemTemplate>
  85. <asp:Label ID="Label1" runat="server" Text='<%# Bind("name") %>'>
  86. </asp:Label>
  87. </ItemTemplate>
  88. </asp:TemplateField>
  89. <asp:TemplateField HeaderText="City">
  90. <EditItemTemplate>
  91. <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("city") %>'>
  92. </asp:TextBox>
  93. </EditItemTemplate>
  94. <ItemTemplate>
  95. <asp:Label ID="Label3" runat="server" Text='<%# Bind("city") %>'>
  96. </asp:Label>
  97. </ItemTemplate>
  98. </asp:TemplateField>
  99. </Columns>
  100. <FooterStyle BackColor="White" ForeColor="#333333" />
  101. <HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
  102. <PagerStyle BackColor="#336666" ForeColor="White" HorizontalAlign="Center" />
  103. <RowStyle BackColor="White" ForeColor="#333333" />
  104. <SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
  105. <SortedAscendingCellStyle BackColor="#F7F7F7" />
  106. <SortedAscendingHeaderStyle BackColor="#487575" />
  107. <SortedDescendingCellStyle BackColor="#E5E5E5" />
  108. <SortedDescendingHeaderStyle BackColor="#275353" />
  109. </asp:GridView>
  110. </td>
  111. <td>
  112. </td>
  113. </tr>
  114. <tr>
  115. <td class="style2">
  116. </td>
  117. <td class="style3">
  118. </td>
  119. <td>
  120. </td>
  121. </tr>
  122. </table>
  123. </form>
  124. </body>
  125. </html>

Your design will look like this:


Figure 3: Get Data from database

CODE CHAMBER

Step 5

Now it's time for server-side coding so that our application works. Open your gridviewid_demo.aspx.cs file and code it as in the following.

Gridviewid_demo.aspx.cs

Don't forget the namespaces as in the following:


Figure 4: Namespace

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Data;
  8. using System.Data.SqlClient;
  9. public partial class _Default: System.Web.UI.Page {
  10. protected void Page_Load(object sender, EventArgs e) {
  11. if (!Page.IsPostBack) {
  12. SqlConnection con = new SqlConnection(@
  13. "Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
  14. SqlCommand cmd = new SqlCommand("select * from tbl_data", con);
  15. SqlDataAdapter sda = new SqlDataAdapter(cmd);
  16. DataTable dt = new DataTable();
  17. sda.Fill(dt);
  18. DropDownList1.DataSource = dt;
  19. DropDownList1.DataBind();
  20. }
  21. }
  22. protected void Button1_Click(object sender, EventArgs e) {
  24. SqlConnection con = new SqlConnection(@
  25. "Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
  26. SqlCommand cmd = new SqlCommand("select * from tbl_data where id=" + DropDownList1.SelectedItem.Value, con);
  27. SqlDataAdapter sda = new SqlDataAdapter(cmd);
  28. DataTable dt = new DataTable();
  29. sda.Fill(dt);
  30. GridView1.DataSource = dt;
  31. GridView1.DataBind();
  32. }
  33. }
OUTPUT CHAMBER


Figure 5: Output

Check out the database, that who is ID=2. We will get ID=2 (purnima's data in GridView).


Figure 6: Get Data


Figure 7: Complete output

I hope you Like it, thank you for reading. Have a good day.