Apply JavaScript in ASP.NET

Dai Zefeng

summary

First, ASP.NET and JavaScript

.NET is Microsoft's next-generation strategic core, 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 disadvantage of the structure of ASP program, difficult to read and understand. In particular, the import of server-side controls and event drive patterns makes the development of web applications closer to the development of past desktop programs.

In various articles and books of ASP.NET, focus on server controls and .NET Framework SDK, because this is the latest and most revolutionary improvements in ASP.NET; Client scripkes that occupy an important position in the past Web development, JavaScript (including VBScript), which seems to have server-side programs, no need to client script. However, the server-side program requires a browser and web server interaction. For ASP.NET, it is the submission of a page. You need to come back to send a lot of data, and a lot of work, such as entering verification or deleting confirmation, etc. Implement with JavaScript. Therefore, it is also necessary to explore how to use JavaScript in ASP.NET.

Second, the application example of JavaScript

1. Add a JavaScript event to a server control on the page

The eventually generated server control is still ordinary html, such as Generate input text. Each HTML control in the form has its own JavaScript event, such as TEXTBOX has an onchange event, button has onclick event, Listbox has an onchange event. To add client events to server controls, you need to use Attributes properties. Attributes property is an attribute that all server controls have, which is used to add some custom tags for the final generated HTML. Suppose there is a save button BTnsave on the web form, I hope that the user is not saved when the user clicks this button (such as the saving cannot be recovered), should be added to the Page_Load event:

IF not page.ispostback () THEN

Btnsave.attributes.add ("onclick", "JavaScript: Return Confirm ('Are you suing to save?');")

END IF

It should be noted that 'return', which is inevitably, otherwise the data will still be saved even if the user is canceled.

2. Add JavaScript events for each line of DataGrid

Assuming that each of the DataGrid has a delete button, I hope that the user is prompted to delete this record in the user point this button to prevent the user's point to miss the line, or only unintentionally delete the button.

Whether this delete button is what the name is, it cannot be directly referenced as the last example, because each line has such a button, which is a child control in the DataGrid. In this case, you need to use the onItemDatabase event of DataGrid. OnItemDatabase happens after the DataGrid's data is bound to the DataGrid (ie, one line is excited). First add the following code in the DataGrid statement:

... Columns Definition Here

This will call the ItemDatabase on the onItemDatabase event, add this method to the code post file: Sub ItemDatabase (Byval e AS Object, Byval E AS DataGriditeMevent)

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 ('is you so you want to delete" & databinder.eval (E.Item.DataItem, "M_SNAME") & "?')

END IF

End Sub

Since DataGrid's header and footnotes also inspire this event, first determined that the row that excited this event is not the title line and footnotes. Here, it is assumed that the Delete button is located in the sixth column of DataGrid (first column 0), and the DataGrid's DataSource contains a column named "m_sname".

3. Reference control in DataGrid in editing state

The built-in editing function of the DataGrid enables a editing method when the recorded field is less. The user does not have to enter a separate page editing record, but the direct point editing button can enable the current line to enter the edit mode. On the other hand, there are some JavaScript programs that require the name of the control. For example, many programs provide a date control when requiring the user to enter the date to ensure a new window for the user to select the date when the user point control icon is available. At this point, you need to provide the ID of the text box of the display date to a new window so that the user selects the date of the date to return to the text box.

If it is a normal server text box control, its ID is the same as the ID of the generated HTML input box; however, two IDs are not the same in the editing state of the DataGrid (the truth is the same as the above example), which requires The clientId property of the control is used.

Protected Sub ItemEdit (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

Here, it is assumed that the itemEMedit method is a Dategrid's oniteMedit event handler, which contains a server text box control called TXTDATE in the third column of DataGrid.

4. Quote ASP.NET automatically generated JavaScript program

The so-called "server-side control" is for developers, and there is no server and client in the generated HTML source program, all of which are standard HTML, DHTML, and JavaScript. It can respond to the user's input because the event handler of each control ultimately generates a script, and this script re-submits the page to make Web Server respond again and processed. Usually we don't have to know what this script doesn't have to call this script directly, but in some cases, you can simplify a lot of work properly. Please see the following two examples.

● Any location of the DataGrid is selected to select a line DataGrid, which is a built-in selection button, and the current row is selected when this button (you can set the SelectedItemStyle property to make the current row have different appearances). However, users may be more accustomed to anyone any location, and if you complete this feature is quite cumbersome. A good idea is to add a selection button, but make this column hide, call the JavaScript script generated by this button when you click anyone.

Sub Item_Bound (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.separetor) THEN

DIM OSLECT AS LINKBUTTON = CType (E.Item.cells (5) .controls (0), LinkButton)

E.Item.attributes ("onclick) = page. getpostbackclienthyperlink (Oselect,")

End Sub

It is assumed here that the selection button is located in column 6. E.Item represents a row, from the generated HTML to add an OnClick event in each . Page.GetPostbackClienthyperLink method Returns the client script generated by the LinkButton control in the page, where the first parameter is the LinkButton control, the second parameter is the parameter passed to this control, usually empty. If it is not a LinkButton control, there is a similar function getPostBackClienTevent, and the reader can refer to MSDN.

● The script generated by the server is conflicted with manually added script

Server events of server controls generally correspond to the corresponding events of the client control, such as the DropDownList's SELECTEDEXCHANGED event corresponding to HTML on the onchange event. If you want to manually add an onchange event, you will generate two onchange on the client, and the browser will ignore one. For example, users want to save whenever they have changed the options in DropDownList (although not very common, they do have this requirement), but also want to remind users whether they have to save. Obviously, the saved code should be placed in the SelectedIndexchanged event, while the reminder should handle a one-inchange event. The result is that two onchange can only perform one. The correct way should add an invisible save button that calls this button generated in hand-added onchange events.

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