Asp. NET vs. JavaScript Operation CheckBox Control

Source: Internet
Author: User
Tags tostring
Asp.net|javascript| Control

In network development, you often encounter situations where you need to use ASP.net and JavaScript to control together. In this article, the DataGrid is used for data binding, and the row color changes when using JavaScript to control the checkbox in which it is selected.

First, create a DataGrid control in the page and set its template.

<asp:datagrid id= "DATAGRID1" runat= "Server" autogeneratecolumns= "False" >
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:checkbox id= "CheckBox1" Runat = "Server" ></asp:CheckBox>
<asp:label runat= "Server" text= ' <%# DataBinder.Eval (Container, "DataItem")%> ' ></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>

Second, JavaScript script functions are written in

<script>
function Checkme (OBJ,TR) {
if (obj.checked)
Tr.style.backgroundcolor= ' Blue ';
Else
Tr.style.backgroundcolor= ';
}
</script>

Third, bind data to the DataGrid in the Page_Load event and associate the JavaScript script for the checkbox.

private void Page_Load (object sender, System.EventArgs e)
{
Put user code to initialize the page here
if (! IsPostBack)
{
DataBind ();
}
}
private void DataBind ()
{
ArrayList arr=new ArrayList ();
Arr. ADD ("News synthesis");
Arr. ADD ("Comprehensive Arts");
Arr. ADD ("movie");
Arr. ADD ("Education");
Arr. ADD ("drama");
Arr. ADD ("military");
Arr. ADD ("Sport");
Datagrid1.datasource=arr;
Datagrid1.databind ();
int i;
for (i=0;i<datagrid1.items.count;i++) {
CheckBox CB;
cb= (CheckBox) datagrid1.items[i]. FindControl ("CheckBox1");
Datagrid1.items[i]. Attributes.Add ("id", "tr" + i.tostring ());
Cb. Attributes.Add ("onclick", "Checkme" (this,tr "+ i.tostring () +"); ");
}
}

Finally, run the program after completion. After the program is run, a CheckBox control appears before each row of the DataGrid control, select the control, the row background color is blue, deselect, and the row color is restored to its original state.



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.