Add common JavaScript operations for ASP. NET controls

1. Add confirmation for the button control

To add client events to server controls, you must use the attributes attribute. The attributes attribute is an attribute of all server controls. It is used to add custom tags to the final HTML. Assume that there is a Save button btnsave on the web form, and you want to prompt the user whether to save the button (for example, once saved, it cannot be restored) When you click this button ), add the following code to the page_load event: 1btnsave. attributes. add ("onclick", "javascript: Return confirm ('Are you sure tosave? ');")

Note that 'return' is not economical. Otherwise, even if the user clicks cancel, the data will still be saved.

2. Add JavaScript events for each row in the DataGrid

The child control in the DataGrid cannot be directly accessed. To achieve the above effect, we need to use the onitemdatabound event of the DataGrid. The onitemdatabound event occurs when each row of data in the DataGrid is bound to the DataGrid (that is, one row is triggered ). First, add the onitemdatabound attribute in the DataGrid declaration, as shown below:

The itemdatabound method is called when the onitemdatabound event occurs. Add the definition of this method to the Code POST file:

Private void onitemdatabound (Object sender, system. Web. UI. webcontrols. datagriditemeventargs E)
{
If (E. Item. itemtype! = Listitemtype. Header & E. Item. itemtype! =
Listitemtype. footer)
{
Linkbutton btnsave = (linkbutton) E. Item. cells [2]. controls [0];
String strclientid = btnsave. clientid;
// Obtain the Client ID of the control, which can be called by JavaScript.
Btnsave. Attributes. Add ("onclick", "javascript: Return confirm ('Are you sure to save? ');");
}
}

Because the row of the title and footer of the DataGrid will also trigger this event, you must first determine that the row that inspires this event is not the row of the title and footer. Assume that the btnsave button is in column 3rd of the DataGrid (the first column is 0 ).

3. Trigger server-side control events in Javascript

Let's take another look at the first instance. We have added the confirmation function for the Save button. The save operation will only be executed after the user confirms it. If the user does not confirm it, it will not be executed, what if we want another operation to be performed when the user presses "cancel? This requires the use of JS back-and-forth (PostBack) server-side controls to complete the operation.

The current page has a dropdownlist control ddltest, button btnsave. when ddltest is selected, the onchange event is triggered to save the current selected value. Before saving the event, the operator is asked to confirm the event and the user confirms the event. Otherwise, the event is switched to default. ASPX page.

Add the following code to the page_load event:

1 string strcmd = page. getpostbackclienthyperlink (btnsave ,"");
2 string script = @ "javascript: confirmupdate (" "eval_message "");";
3 script = script. Replace ("eval_message", strcmd );
4ddltest. Attributes. Add ("onchange", script );

The Select Control generated after this code execution is as follows:

1 select name = "ddltest" id = "ddltest" onchange = "javascript: confirmupdate (" javascript :__ dopostback ('btnsave', '')"); "> ','')");"〉

The confirmupdate function is as follows: 1 <script language = JavaScript> 〉
2 function confirmupdate (CMD ){
3 if (confirm ("are you sure to update? "))
4 {
5 eval (CMD );
6}
7 else
8 {
9 window. Location. href = "default. aspx"
10}
11}
12 </SCRIPT> 〉

The Javascript eval function is used to call the commands contained in a string. Note that strings containing commands cannot be enclosed by single quotation marks. Because the automatically generated script contains single quotation marks, two double quotation marks are used to represent the double quotation marks of the string.