9/18/2009ToolBox HTML Control HTMLCheckbox

HTML Checkbox Web Server Control

In ASP.NET environment,This article describes you how to work with HTML Checkbox Control.In HTML environment, Checkbox is an object that represents a Checkbox in an HTML form. The Checkbox control in a HTML form contains all instance of an <input type="checkbox"> tag.

The primary mechanism of the checkbox control is to perform toggle operaiton. In other words, Use the HtmlInputCheckBox control to allow the user to select a true or false state. To determine whether the control is selected, use the Checked property

There are several functions available to access the HTML checkbox.some of its funtions are as follows,

  • document.getElementById()
  • document.getElementByName()
checkbox Objects Properties
  • id -Sets or returns the id of a checkbox
  • form -Returns a reference to the form that contains the checkbox
  • accessKey -Sets or returns the keyboard key to access a checkbox
  • alt -Sets or returns an alternate text to display if a browser does not support checkboxs
  • disabled -Sets or returns whether or not a checkbox should be disabled
  • tabIndex -Sets or returns the tab order for a checkbox
  • name -Sets or returns the name of a checkbox
  • type -Returns the type of form element a checkbox is
  • checked -Sets or returns whether or not a checkbox should be checked
  • defaultchecked - Returns the default value of the checked attribute
  • value -Sets or returns the text that is displayed on the checkbox
  • title -Sets or returns an element's advisory title
  • lang -Sets or returns the language code for an element
  • dir -Sets or returns the direction of text
  • className -Sets or returns the class attribute of an element
checkbox Objects Methods
  • blur() -Performs focus when leave from the control
  • click() -Simulates a mouse-click on a checkbox
  • focus() -Performs focus when enter into the control

The following code snippets explains you the HTML checkbox in the web form.

in .aspx.cs page,

protected void SubmitBtn_Click(object sender, EventArgs e)
    {
      if (chkapple.Checked)
      {
        // set code
      }
      
      if (chkorange.Checked)
      {
        // set code
      }
      
      if (chkbanana.Checked)
      {
        // set code
      }
    
    }

in .aspx page, 

<body>
       <form id="Form2" method=post runat=server>
         Enter Interests:  
         <input id="chkapple" checked type=checkbox runat=server> apple
         <input id="chkorange" type=checkbox runat=server> orange
         <input id="chkbanana" type=checkbox runat="server"> banana
                 
         <input id="Button1" type=button value="Enter" 
         OnServerClick="SubmitBtn_Click" runat=server>
        </form>
    </body>
 
Related Links

Posted by: Admin
Posted on: 9/18/2009 at 4:48 PM
Tags: , ,
Categories: Asp.net
Actions: E-mail | Kick it! | DZone it! | del.icio.us
Post Information: Permalink | Comments (21) | Post RSSRSS comment feed

9/11/2009ToolBox Standard Control Checkbox

Checkbox and CheckboxList Web Server Control

Commonly,The CheckBox control can be used to performing check or uncheck that means yes/no operations. here, ASP.NET provides CheckBoxList Web server controls differ from the HTML Elements. there Checkbox and CheckBoxList controls are two different controls, and contains different function.

CheckBox Control - CheckBoxList Control Difference

CheckBox controls to a page is single check box control. Alternatively, the CheckBoxList control is a single control that acts as a parent control for a collection of check-box list items. It derives from a base ListControl class, and therefore works much like the ListBox, DropDownList, RadioButtonList, and BulletedList Web server controls. For that reason, many of the procedures for working with the CheckBoxList control are the same as the procedures for the other list Web server controls.

CheckboxList can mostly be used when needs to create more than one checkboxes and bind data from database.

CheckBox Control HTML Attribute

When the CheckBox control renders to the browser, it contains two parts: an input element representing the check box, and a separate label element representing the caption for the check box. The combination of the two elements is in turn wrapped in a span element.

Add Items in List

When you add a list item, you must specify the three properties of the item as,

  • Text - The text displayed in the list.
  • Value -The value associated with an item. Setting this property allows you to associate a value with a specific item without displaying it.
  • Selected -A Boolean value indicating whether the item is selected.

To add items at design time

When you add a list item, you must specify the three properties of the item as,

  • Type an <asp:ListItem> element in the list control.
  • Set the Text and Value properties of the new list item.
  • Optionally, set the Selected property for one items.

the following code snippets demonstrates a listbox control

<asp:ListBox ID="ListBox1" runat="server">
    <asp:ListItem Text="Apple" Value="App" Selected="True" />
    <asp:ListItem Text="Orange" Value="Ora" />
    <asp:ListItem Text="Banana" Value="Ban" />
</asp:ListBox>
 
To add items programmatically
  • Create a new object of type ListItem and set its Text and Value properties.
  • Call the Add method of the control's Items collection and pass it the new object.

the following code snippets demonstrates this

Protected void Button1_Click (object sender, System.EventArgs e)
{
    ListBox1.Items.Add(new ListItem("Apple", "App"));
    ListBox1.Items.Add(new ListItem("Orange", "Ora"));
    ListBox1.Items.Add(new ListItem("Banana", "Ban"));
}
 
To add items programmatically via Data Source
  • set the control's AppendDataBoundItems property to true.
  • Add a data source control to the page, such as a SqlDataSource or ObjectDataSource control. For details, see Data Source Controls Overview.
  • Configure the data source control with connection string and query information.
  • Set the list control's DataSourceID property to the ID of the data source control.
  • Set the Properties such as DataTextField and DataTextFormatString

the following code snippets demonstrates this

<asp:ListBox ID="ListBox1" runat="server" 
  DataSourceID="SqlDataSource1" 
  DataTextField="CategoryName" 
  DataValueField="CategoryID">
</asp:ListBox>

<asp:SqlDataSource 
   ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    ID="SqlDataSource1" 
   runat="server" 
   SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]">
</asp:SqlDataSource>
 
Related Links

Posted by: Admin
Posted on: 9/11/2009 at 7:23 AM
Tags: , ,
Categories: Asp.net
Actions: E-mail | Kick it! | DZone it! | del.icio.us
Post Information: Permalink | Comments (25) | Post RSSRSS comment feed