Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

ASP.NET data binding


May 13, 2021 ASP.NET


Table of contents


ASP.NET - Data binding

Each ASP.NET web form control inherits the DataBind method from its parent control class, which gives it the ability to inherit data to at least one property in its properties. T his is called simple data binding or internal data binding.

Simple data binding includes attaching any collection (project collection) that implements the IEnumerable interface, or the DataSet and DataTable classes to the DataSource property of the control.

On the other hand, some controls can bind records, lists, or data columns into their structures through dataSource controls. T hese controls originate from the BaseDataBoundControl class. T his is called descriptive data binding.

The data source control helps the data-bound control implement features such as sorting, plying, and editing data collections.

BaseDataBoundControl is an abstract class that is inherited from two abstract classes:

  • DataBoundControl
  • HierarchicalDataBoundControl

The abstract class DataBoundControl is also inherited by two abstract classes:

  • ListControl
  • CompositeDataBoundControl

Controls that can simply bind data originate from the ListControl abstract class and are:

  • BulletedList
  • CheckBoxList
  • DropDownList
  • ListBox
  • RadioButtonList

Controls that can descriptive data binding (a more complex data binding) originate from the abstract class CompositeDataBoundControl. T his is where the control is:

  • DetailsView
  • FormView
  • Gridview
  • RecordList

Simple data binding

Simple data binding includes a read-only selection list. T hese controls can bind an array column or a database field. T he selection list takes two values from the database or data source;

Let's use a small example to understand this concept. C reate a Web page with a bulleted list and a SqlDataSource control. C onfigure the data source control to retrieve two values from your database (we used the same DotNetReferences table in previous chapters).

Select a data source for the included bulleted list control:

  • Select the data source control
  • Select a field to display, which is called a data field
  • Select the field of the value

ASP.NET data binding

When the application executes, check that the entire title column is bound to the bulleted list and displayed.

ASP.NET data binding

Descriptive data binding

We've used GridView controls in previous guides to use descriptive data binding. O ther composite data bound controls that present and manipulate data as a table are DetailsView, FormView, and RecordList controls.

In the next guide, we'll look at the technology for solving databases, i.e., ADO.NET.

However, data binding includes the following objects:

  • Stores a dataset that retrieves data from the database.
  • A data provider that retrieves data from a database by using a connected command.
  • A data adapter that emits select statements stored in a command object;

Relationships between data bonding objects:

ASP.NET data binding

Example

Let's take the following steps:

Step (1): Create a new Web page. A dd a class named booklist by right-clicking the solution name on Solution Explorer and selecting item 'Class' from the 'Add Item' dialog box. N ame it booklist.cs.

using System;
using System.Data;
using System.Configuration;
using System.Linq;

using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

namespace databinding
{
   public class booklist
   {
      protected String bookname;
      protected String authorname;
      public booklist(String bname, String aname)
      {
         this.bookname = bname;
         this.authorname = aname;

      }

      public String Book
      {
         get
         {
            return this.bookname;
         }
         set
         {
            this.bookname = value;
         }
      }

      public String Author
      {
         get
         {
            return this.authorname;
         }
         set
         {
            this.authorname = value;
         }
      }
   }
}

Step (2): Add four list controls, one list box control, one radio button control, one check box control, and one drop down list on the page, and four forms with these list controls. T he page should look like this in design view:

ASP.NET data binding

The source file should look like this:

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

      <table style="width: 559px">
         <tr>
            <td style="width: 228px; height: 157px;">
               <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True" 
                  OnSelectedIndexChanged="ListBox1_SelectedIndexChanged">
               </asp:ListBox>
            </td>

            <td style="height: 157px">
               <asp:DropDownList ID="DropDownList1" runat="server" 
                  AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
               </asp:DropDownList>
            </td>             
         </tr>

         <tr>
            <td style="width: 228px; height: 40px;">
               <asp:Label ID="lbllistbox" runat="server"></asp:Label>
            </td>

            <td style="height: 40px">
               <asp:Label ID="lbldrpdown" runat="server">
               </asp:Label>
            </td>
         </tr>

         <tr>
            <td style="width: 228px; height: 21px">
            </td>

            <td style="height: 21px">
            </td>              
         </tr>

         <tr>
            <td style="width: 228px; height: 21px">
               <asp:RadioButtonList ID="RadioButtonList1" runat="server"
                  AutoPostBack="True"  OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
               </asp:RadioButtonList>
            </td>

            <td style="height: 21px">
               <asp:CheckBoxList ID="CheckBoxList1" runat="server" 
                  AutoPostBack="True" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
               </asp:CheckBoxList>
            </td>                
         </tr>

         <tr>
            <td style="width: 228px; height: 21px">
               <asp:Label ID="lblrdlist" runat="server">
               </asp:Label>
            </td>

            <td style="height: 21px">
               <asp:Label ID="lblchklist" runat="server">
               </asp:Label>
            </td>           
         </tr>
      </table>      

   </div>
</form>

Step (3): Finally, write the following code after the routine of the application:

public partial class _Default : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {
      IList bklist = createbooklist();

      if (!this.IsPostBack)
      {
         this.ListBox1.DataSource = bklist;
         this.ListBox1.DataTextField = "Book";
         this.ListBox1.DataValueField = "Author";

         this.DropDownList1.DataSource = bklist;
         this.DropDownList1.DataTextField = "Book";
         this.DropDownList1.DataValueField = "Author";

         this.RadioButtonList1.DataSource = bklist;
         this.RadioButtonList1.DataTextField = "Book";
         this.RadioButtonList1.DataValueField = "Author";

         this.CheckBoxList1.DataSource = bklist;
         this.CheckBoxList1.DataTextField = "Book";
         this.CheckBoxList1.DataValueField = "Author";

         this.DataBind();
      }
   }

   protected IList createbooklist()
   {
      ArrayList allbooks = new ArrayList();
      booklist bl;

      bl = new booklist("UNIX CONCEPTS", "SUMITABHA DAS");
      allbooks.Add(bl);

      bl = new booklist("PROGRAMMING IN C", "RICHI KERNIGHAN");
      allbooks.Add(bl);

      bl = new booklist("DATA STRUCTURE", "TANENBAUM");
      allbooks.Add(bl);

      bl = new booklist("NETWORKING CONCEPTS", "FOROUZAN");
      allbooks.Add(bl);

      bl = new booklist("PROGRAMMING IN C++", "B. STROUSTROUP");
      allbooks.Add(bl);

      bl = new booklist("ADVANCED JAVA", "SUMITABHA DAS");
      allbooks.Add(bl);

      return allbooks;
   }

   protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
   {
      this.lbllistbox.Text = this.ListBox1.SelectedValue;
   }

   protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
   {
      this.lbldrpdown.Text = this.DropDownList1.SelectedValue;
   }

   protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
   {
      this.lblrdlist.Text = this.RadioButtonList1.SelectedValue;
   }

   protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)
   {
      this.lblchklist.Text = this.CheckBoxList1.SelectedValue;
   }
}

Observe the following:

  • The booklist class has two properties: bookname and authorname.
  • The createbooklist method is a user-defined way to create an array of booklist classes called allboods.
  • Page_Load event handle ensures that the list of books is created. T he list is IList-type and implements the IEnumerable interface and is binding to the list control. T he Page load time handle binds the IList object 'bklist' with a control. T he bookname property is displayed and the authorname property is considered this value.
  • When the page runs, if the user selects a book, its name is selected and displayed through the list control, and the appropriate label shows the author's name, which is the appropriate value selected by the list control.

ASP.NET data binding