Introduction

The FormView control is used to display a single record at a time from a data source. When you use the FormView control, you create templates to display and edit data-bound values. The templates contain controls, binding expressions, and formatting that define the look and functionality of the form. In this article, I will demonstrate how to dynamically bind FormView control in ASP.NET from the database.

Step 1 - Create database table in SQL server 2014

  1. CREATE TABLE [dbo].[StudentsResult](
  2. [RollNumber] [int] IDENTITY(10000,1) NOT NULL,
  3. [StudentName] [nvarchar](50) NULL,
  4. [Hindi] [int] NULL,
  5. [English] [int] NULL,
  6. [Physics] [int] NULL,
  7. [Chemistry] [int] NULL,
  8. [Biology] [int] NULL,
  9. [Mathematics] [int] NULL,
  10. [Total_Marks] [int] NULL,
  11. [Percentage] [float] NULL,
  12. CONSTRAINT [PK_StudentsResult] PRIMARY KEY CLUSTERED
  13. (
  14. [RollNumber] ASC
  15. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  16. ) ON [PRIMARY]
  18. GO
  1. CREATE PROCEDURE [dbo].[spGetStudentResult]
  2. AS
  3. BEGIN
  4. SELECT*FROM [dbo].[StudentsResult]
  5. END

Screenshot database table

ASP.NET

Step 2

Open Visual Studio 2015 click on New Project and create an empty web application project.

Screenshot for creating new project 1

ASP.NET

After clicking on New Project one window will appear select Web from left panel choose ASP.NET Web Application to give a meaningful name of your project then click on OK. As shown in below screenshot.

Screenshot for creating new project 2

ASP.NET

After clicking on OK one more window will appear to choose Empty check on Web Forms checkbox and click on OK. As shown below screenshot.

Screenshot for creating new project 3

ASP.NET
Step 3

Double click on webconfig file and database connections. Write the following line of code.
  1. <connectionStrings>
  2. <add name="DBCS" connectionString="data source=DESKTOP-M021QJH\SQLEXPRESS; database=DemoDB; integrated security=true;"/>
  3. </connectionStrings>

Step 4 - Add web form in your project

Right click on project, select add, choose Web Form and click on it.

Screenshot adding web form 1

ASP.NET

After clicking on the web form a window will appear. Assign a name to web form, such as FormView, or any meaningful name. Click OK, the web form will be added in the project.

Screenshot adding web form-2

ASP.NET

Step 5

Add script and styles of bootstrap in the head section of the web form.

  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

Step 6

Drag and drop a FormView control on the web form. Design FormView control.

  1. <body>
  2. <form id="form1" runat="server">
  3. <div class="container py-4">
  4. <h5 class="text-center text-uppercase">FormView control in asp.net</h5>
  5. <asp:FormView CssClass="container" ID="FormView1" AllowPaging="true" OnPageIndexChanging="FormView1_PageIndexChanging" runat="server">
  6. <ItemTemplate>
  7. <table class="table table-bordered table-striped">
  8. <tr>
  9. <td>Roll Number</td>
  10. <td><%#Eval("RollNumber") %></td>
  11. </tr>
  12. <tr>
  13. <td>Student Name</td>
  14. <td><%#Eval("StudentName") %></td>
  15. </tr>
  16. <tr>
  17. <td>Hindi</td>
  18. <td><%#Eval("Hindi") %></td>
  19. </tr>
  20. <tr>
  21. <td>English</td>
  22. <td><%#Eval("English") %></td>
  23. </tr>
  24. <tr>
  25. <td>Physics</td>
  26. <td><%#Eval("Physics") %></td>
  27. </tr>
  28. <tr>
  29. <td>Chemistry</td>
  30. <td><%#Eval("Chemistry") %></td>
  31. </tr>
  32. <tr>
  33. <td>Biology</td>
  34. <td><%#Eval("Biology") %></td>
  35. </tr>
  36. <tr>
  37. <td>Mathematics</td>
  38. <td><%#Eval("Mathematics") %></td>
  39. </tr>
  40. <tr>
  41. <td>Total Marks</td>
  42. <td><%#Eval("Total_Marks") %></td>
  43. </tr>
  44. <tr>
  45. <td>Percentage</td>
  46. <td><%#Eval("Percentage")%></td>
  47. </tr>
  48. </table>
  49. </ItemTemplate>
  50. </asp:FormView>
  51. </div>
  52. </form>
  53. </body>

Complete web form code

  1. <!DOCTYPE html>
  3. <html>
  4. <head runat="server">
  5. <title>FormView</title>
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  8. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  9. </head>
  10. <body>
  11. <form id="form1" runat="server">
  12. <div class="container py-4">
  13. <h5 class="text-center text-uppercase">FormView control in asp.net</h5>
  14. <asp:FormView CssClass="container" ID="FormView1" AllowPaging="true" OnPageIndexChanging="FormView1_PageIndexChanging" runat="server">
  15. <ItemTemplate>
  16. <table class="table table-bordered table-striped">
  17. <tr>
  18. <td>Roll Number</td>
  19. <td><%#Eval("RollNumber") %></td>
  20. </tr>
  21. <tr>
  22. <td>Student Name</td>
  23. <td><%#Eval("StudentName") %></td>
  24. </tr>
  25. <tr>
  26. <td>Hindi</td>
  27. <td><%#Eval("Hindi") %></td>
  28. </tr>
  29. <tr>
  30. <td>English</td>
  31. <td><%#Eval("English") %></td>
  32. </tr>
  33. <tr>
  34. <td>Physics</td>
  35. <td><%#Eval("Physics") %></td>
  36. </tr>
  37. <tr>
  38. <td>Chemistry</td>
  39. <td><%#Eval("Chemistry") %></td>
  40. </tr>
  41. <tr>
  42. <td>Biology</td>
  43. <td><%#Eval("Biology") %></td>
  44. </tr>
  45. <tr>
  46. <td>Mathematics</td>
  47. <td><%#Eval("Mathematics") %></td>
  48. </tr>
  49. <tr>
  50. <td>Total Marks</td>
  51. <td><%#Eval("Total_Marks") %></td>
  52. </tr>
  53. <tr>
  54. <td>Percentage</td>
  55. <td><%#Eval("Percentage")%></td>
  56. </tr>
  57. </table>
  58. </ItemTemplate>
  59. </asp:FormView>
  60. </div>
  61. </form>
  62. </body>
  63. </html>

Step 7

Right click and view web form code. Write the following code.

  1. using System;
  2. using System.Configuration;
  3. using System.Data;
  4. using System.Data.SqlClient;
  7. namespace BindDataControl_Demo
  8. {
  9. public partial class FormView : System.Web.UI.Page
  10. {
  11. protected void Page_Load(object sender, EventArgs e)
  12. {
  13. if (!IsPostBack)
  14. {
  15. BindFormView();
  16. }
  17. }
  19. private void BindFormView()
  20. {
  21. string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
  22. using (SqlConnection con = new SqlConnection(CS))
  23. {
  24. SqlCommand cmd = new SqlCommand("spGetStudentResult", con);
  25. cmd.CommandType = CommandType.StoredProcedure;
  26. SqlDataAdapter sda = new SqlDataAdapter(cmd);
  27. con.Open();
  28. DataTable dt = new DataTable();
  29. sda.Fill(dt);
  30. FormView1.DataSource = dt;
  31. FormView1.DataBind();
  32. }
  33. }
  35. protected void FormView1_PageIndexChanging(object sender, System.Web.UI.WebControls.FormViewPageEventArgs e)
  36. {
  37. FormView1.PageIndex = e.NewPageIndex;
  38. this.BindFormView();
  39. }
  40. }
  41. }

Step 8

Run the project ctrl+F5

Screenshot

ASP.NET

Conclusion

In this article, I have explained how to dynamically bind FormView control from the database step by step. Hope it will help you.