This article combines examples to describe how to use client-side Javascript scripts in ASP.net applications to improve program execution efficiency and achieve more functions.
1. ASP.Net and Javascript
.Net is the core of Microsoft's next-generation strategy, and ASP.Net is the specific implementation of .Net strategy in Web development. It inherits the simplicity and ease of use of ASP, while overcoming the shortcomings of ASP programs that are poorly structured and difficult to read and understand. In particular, the introduction of server-side controls and event-driven models has made the development of Web applications closer to the development of desktop programs in the past.
In various articles and books introducing ASP.Net, the focus is on server controls and .Net Framework SDK because these are the latest and most revolutionary improvements in ASP.Net; in contrast, Client-side script Javascript (also including VBScript), which played an important role in web development in the past, is rarely mentioned. It seems that with server-side programs, client-side scripts are no longer needed. However, the server-side program requires an interaction between the browser and the Web server. For ASP.Net, it is a page submission, which requires a large amount of data to be sent back and forth. However, many tasks, such as input verification or deletion confirmation, are completely ok. Implemented using Javascript. Therefore, it is still necessary to explore how to use Javascript in ASP.Net.
2. Javascript application examples
1. Adding a Javascript event to a server control on the page.
The server control ultimately generates ordinary HTML, such as <asp:textbox> generating input text. Each HTML control in the form has its own Javascript event, such as Textbox has onchange event, Button has onclick event, Listbox has onchange event, etc. To add client-side events to a server control, you need to use the Attributes property. The Attributes attribute is an attribute that all server controls have. It is used to add some custom tags to the final generated HTML. Suppose there is a save button btnSave on the Web Form, and you want to prompt the user whether he really wants to save when he clicks this button (for example, once saved, it cannot be restored, etc.), the following code should be added to the Page_Load event:
if not page.isPostBack() then
btnSave.Attributes.Add("onclick","Javascript:return confirm('Are you sure to save?');")
end if
It should be noted that 'return' is not omitted, otherwise even if the user clicks Cancel, the data will still be saved.
2. Add a Javascript event for each row in the Datagrid
. Assume that each row of the Datagrid has a delete button. When the user clicks this button, it is hoped that the user will be prompted whether he really wants to delete this record, in case the user clicks on the wrong row, or just clicks accidentally. Delete button.
No matter what the name of this delete button is, it cannot be directly referenced like the previous example, because each row has such a button, and they are child controls in the Datagrid. In this case, you need to use the Datagrid's OnItemDataBound event. The OnItemDataBound event occurs after each row of data in the Datagrid is bound to the Datagrid (that is, it fires once per row). First, add the following code to the Datagrid declaration:
<asp:datagrid id="grd1" runat="server" OnItemDataBound = "ItemDataBound" >
...Columns definition here
</asp:datagrid> Here it is explained that the ItemDataBound method is called when the OnItemDataBound event occurs. , add the definition of this method in the code-behind file:
Sub ItemDataBound(ByVal sender As Object, ByVal e As DataGridItemEventArgs)
If e.Item.ItemType <> ListItemType.Header And e.Item.ItemType <> ListItemType.Footer Then
Dim oDeleteButton As LinkButton = e.Item.Cells(5). Controls(0)
oDeleteButton.Attributes("onclick") = "javascript:return Confirm ('Are you sure you want to delete" & DataBinder.Eval(e.Item.DataItem, "m_sName") & "?')"
End If
End Sub
Since the title row and footer row of Datagrid will also trigger this event, it is first judged that the row that triggers this event is not the title row or footer row. It is assumed here that the Delete button is located in column 6 of the Datagrid (the first column is 0), and the Datasource of the Datagrid contains a column named "m_sName"
3． Reference to the controls in the Datagrid in the editing state
The built-in editing function of the Datagrid is an editing method when the number of fields in the record is small. The user does not have to enter a separate page to edit the record, but can directly click the edit button to put the current row into edit mode. On the other hand, there are some Javascript programs that need to reference the name of the control. For example, many programs provide a date control when the user needs to enter a date to ensure the legality of the date format. When the user clicks the control icon, a new window pops up for the user to select a date. At this time, you need to provide the ID of the text box that displays the date to the new window so that the value can be backfilled into the text box when the user selects the date.
If it is an ordinary server text box control, its ID is the same as the ID of the generated HTML input box; but in the editing state of Datagrid, the two IDs are not the same (the reason is the same as the above example), which requires Use the ClientID property of the control.
Protected Sub ItemEdit(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)
Dim sDateCtrl as string
sDateCtrl = grd1. Items (e.Item.ItemIndex) . Cells(2). FindControl("txtDate") . ClientID
End Sub
It is assumed here that the ItemEdit method is the OnItemEdit event handler of the Dategrid, and that the third column of the Datagrid contains a server text box control named txtDate.
4.
refers to the Javascript program automatically generated by ASP.Net
is aimed at developers. There is no distinction between server and client in the generated HTML source program. They are all standard HTML, DHTML and Javascript. The reason why it can respond to user input is that the event handler of each control eventually generates a script. This script resubmits the page so that the Web Server has a chance to respond and process again. Normally we don't have to know what this script is or call this script directly, but in some cases, calling this script appropriately can simplify a lot of work. Take a look at the following two examples.
● Click anywhere on the Datagrid to select a row.
Datagrid provides a built-in selection button. When this button is clicked, the current row is selected (the SelectedItemStyle property can be set to give the current row a different appearance). However, users may be more accustomed to selecting a row by clicking anywhere. It would be quite cumbersome to implement this function entirely by themselves. A good idea is to add a select button, but make the column hidden, and call the Javascript generated by this button when any row is clicked.
Sub Item_Bound(ByVal sender As Object, ByVal e As DataGridItemEventArgs )
Dim itemType As ListItemType
itemType = CType(e.Item.ItemType, ListItemType)
If (itemType <> ListItemType.Header) And _
(itemType <> ListItemType.Footer) And _
(itemType <> ListItemType.Separator) Then
Dim oSelect As LinkButton = CType(e.Item.Cells(5).Controls(0), LinkButton)
e.Item.Attributes("onclick") = Page. GetPostBackClientHyperlink (oSelect, " ")
End Sub
This assumes that the select button is located in column 6. e.Item represents a row. Judging from the generated HTML, an onclick event is added to each <tr>. The Page.GetPostBackClientHyperLink method returns the client script generated by the LinkButton control in the page. The first parameter is the Linkbutton control, and the second parameter is the parameter passed to this control, which is usually empty. If it is not a LinkButton control, there is a similar function GetPostBackClientEvent. Readers can refer to MSDN.
● Scripts generated by the server conflict with manually added scripts.
Server events of server controls generally correspond to corresponding events of client controls. For example, the SelectedIndexChanged event of Dropdownlist corresponds to the onchange event of HTML <Select>. If you want to manually add an onchange event, two onchanges will be generated on the client side, and the browser will ignore one. For example, the user wants to save to the database every time he changes the options in the Dropdownlist (although it is not very common, but this need does exist), but at the same time, he also wants to remind the user whether he really wants to save. Obviously, the saved code should be placed in the SelectedIndexChanged event, and the reminder should be manually added with an onchange event. The result is that only one of the two onchanges can be executed. The correct method should be to add an invisible save button and call the program generated by this button in the manually added onchange event.
The Page_Load method is as follows:
Dim sCmd as string
sCmd=Page.GetPostBackClientHyperlink(btnUpdate, "")
If not page.isPostback then
Dropdownlist1.Attributes.add("onchange","ConfirmUpdate(""" & sCmd & """)")
End if
The ConfirmUpdate function is as follows
<Script language=”javascript”>
function ConfirmUpdate(cmd){
if confirm(“Are you sure to update?”)
eval(cmd);
}
</Script>
The Javascript eval function is used here to call a string commands contained in . It should be noted that the string containing the command cannot be enclosed in single quotes, because the automatically generated script includes single quotes, so here two double quotes are used to represent the double quotes of the string itself.
3. Conclusion The
above briefly discussed several situations of inserting Javascript in ASP.Net. Properly inserting client-side Javascript scripts into the server program can improve the running efficiency of the program and provide a more friendly user interface.