Binding a Button Server Control to a DataSource
Almost all user interface applications use a button, and its function is the same across every application. A button lets a user choose an option, tell the application that it is done with a task, or exit an application. The Button
controls do not have a DataSource
property, but we can certainly bind the attributes of the Button
to fields from our data source. For example, as seen in following source code, we can bind the name of a product from our data source to the Text
attribute of the Button
. Here is a straightforward example of the binding a button server control to a DataSource
:
<script runat="server" language="C#">
void Page_Load(Object sender, EventArgs e){
DataBind();
}
public string ButtonText() {
return "Click Here";
}
</script>
<html>
<body>
<form runat="server">
<asp:label id="message"
runat="server"
Font-Size="10"
/>
<p>
<asp:button id="Button1"
runat="server"
BackColor="maroon"
ForeColor="white"
BorderWidth="2"
BorderStyle="Solid"
BorderColor="Black"
Font-Bold="true"
Text='<%# ButtonText() %>'
Width="200"
/>
</p>
</form>
</body>
</html>
Binding a TextBox Server Control to a DataSource
The TextBox
server control is an input control which allows the user to enter text. By default, the TextMode
property is set to SingleLine
, which creates a text box with only one line. We also can set the property to MultiLine
or Password
. MultiLine
produces a text box with more than one line. Password creates a single-line text box that masks the value entered by the user. The Columns
property determines the display width of the text box. The display height is determined by the Rows
property if the text box is a MultiLine text box.
We will find a sample declaration for a TextBox
control in an .aspx
file in the following example. The control is multiline and displays a maximum of 10 lines. If the browser supports fonts for controls, the text is formatted in Arial font. The method txtLogin_Changed
is bound to the control's TextChanged
method. <asp:TextBox runat=server
id="txtLogin"
Text=""
Font_Face="Arial" Font_Size="3"
BackColor="lightblue"
TextMode="MultiLine"
Height="10"
OnTextChanged="txtLogin_Changed"/>
The TextBox
control also lacks a DataSource
property, but we can certainly bind the attributes of the TextBox
to fields from our data source. For instance, we can use a TextBox
to load the initial value and then save the edited value back to our database if our site has a membership and we allow the user to edit this information. To accomplish this we can use Control.DataBind
method (This binds a data source to the invoked server control and to all of its child controls): public virtual void DataBind();
This method can be used to bind data from a source to a server control, it is commonly used after retrieving data set through a database query. When called on a server control, this method resolves all data-binding expressions in the server control and in any of its child controls. When creating custom templated databound controls this method is commonly overridden.
Let's try to use a TextBox
in an aspx file. Here is a small code piece for this example: <!-- Data Fields -->
<asp:textbox id=FirstName style="Z-INDEX: 108; LEFT: 190px; POSITION: absolute; TOP: 100px" runat="Server" width="100" height="25"></asp:textbox>
<asp:textbox id=LastName style="Z-INDEX: 109; LEFT: 190px; POSITION: absolute; TOP: 130px" runat="Server" width="100" height="25"></asp:textbox>
Just as the Windows Forms designer produces some of the most terrible code known to programmer, so does the WebForms designer. In fact, we went through and trimmed and cleaned the code for this example. After we are done with this subject, we will see more source code for this pattern. The HTML (XHTML) code for this example will be in an aspx file.
During this process the CustomerDataForm
class is used and contains the page logic for such action as databinding by the application. Here is TextBox in C# code: public class EmployeeForm : System.Web.UI.Page
{
…
…
protected System.Web.UI.WebControls.TextBox LastName;
protected System.Web.UI.WebControls.TextBox FirstName;
…
…
}
…
…
addr.FirstName = FirstName.Text;
addr.LastName = LastName.Text;
…
…
((ArrayList)this.Session["Customers"]).Add( addr );
CustomerRepeater.DataSource = (ArrayList)this.Session["Customers"];
CustomerRepeater.DataBind( );
…
…
Binding a DropDownList Web Server Control
To create a single selection drop-down list control, use the DropDownList
control. By setting the BorderColor
, BorderStyle
, and BorderWidth
properties we can control the appearance of the DropDownList
control. Place a ListItem
element for each entry between the opening and closing tags of the DropDownList
control to specify the items that we want to appear in the DropDownList
control.
The DropDownList
control also supports data binding. First create a data source, such as a System.Collections.ArrayList
object, that contains the items to display in the control to bind the control to a data source. Next, use the Control.DataBind
method to bind the data source to the DropDownList
control. Now, the DropDownList
control will display the information from the data source. To programmatically determine the index of the item selected by the user from the DropDownList
control, use the SelectedIndex
property.
DropDownList
control enables users to select from a single-selection drop-down list. The drop-down portion can contain any number of list items. <asp:DropDownList id="DropDownList1" runat="server"
DataSource="<% databindingexpression %>"
DataTextField="DataSourceField"
DataValueField="DataSourceField"
AutoPostBack="True|False"
OnSelectedIndexChanged="OnSelectedIndexChangedMethod">
<asp:ListItem value="value" selected="True|False">
Text
</asp:ListItem>
</asp:DropDownList>
The following example demonstrates how to use the DropDownList
control. <html>
<head>
<script language="C#" runat="server">
void Button_Click(Object sender, EventArgs e)
{
Label1.Text = "You selected: " +
dropdownlist1.SelectedItem.Text + ".";
}
</script>
</head>
<body>
<form runat="server">
<h3><font face="Verdana">DropDownList Example</font></h3>
Select an item from the list and click the submit button.
<p>
<asp:DropDownList id="dropdownlist1" runat="server">
<asp:ListItem>Item 1</asp:ListItem>
<asp:ListItem>Item 2</asp:ListItem>
<asp:ListItem>Item 3</asp:ListItem>
<asp:ListItem>Item 4</asp:ListItem>
</asp:DropDownList>
<br><br>
<asp:Button id="Button1"
Text="Submit"
OnClick="Button_Click"
runat="server"/>
<br><br>
<asp:Label id="Label1" runat="server"/>
</form>
</body>
</html>
Comments