Asp. NET vs. JavaScript Operation CheckBox Control

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.