Subscribe

RSS Feed (xml)

Respond to Client-Side Events with JavaScript

ASP.NET includes a rich programming model. Unfortunately, once a page is rendered to HTML, you can't execute any more .NET code without first triggering a postback to the server. This limitation greatly reduces the effectiveness of validation code and other niceties that can support polished interactive Web pages.


Of course, there's no reason that you can't mingle client-side JavaScript functionality with your .NET code. Although .NET doesn't include any object interface for creating JavaScript, you can manually inject it into the page. One way to do this is simply to set a control attribute. For example, you can create a text box that displays a message box when it loses focus by including the following JavaScript code:




TextBox1.Attributes.Add("onBlur", "alert('The text box has lost focus!');");

The TextBox tag will be rendered to HTML like this:



<input name="TextBox1" type="text" id="TextBox1"
onBlur="alert('The text box has lost focus!');" ... />

In this case, you're using the built-in JavaScript alert function and the JavaScript onBlur event, which fires when a control loses focus. Most HTML elements support a small number of events, and some of the most useful include the following:




  • onFocusOccurs when a control receives focus




  • onBlurOccurs when focus leaves a control




  • onClickOccurs when the user clicks a control




  • onChangeOccurs when the user changes the value of certain controls




  • onMouseOverOccurs when the user moves the mouse pointer over a control




Another approach to adding JavaScript code is to define a JavaScript function in a .NET string variable and then to instruct ASP.NET to insert it into the rendered Web form where it can be used. If you follow this approach, any control can call the function in response to a JavaScript event.


The following example demonstrates this technique with a simple Web page that includes a table and an image. As the user moves the mouse over the cells in the table, two custom JavaScript functions are used, one that highlights the current cell and one that removes the highlight from the previous cell. In addition, the highlighting function changes the image URL depending on which table column is currently selected. If the user hovers the mouse over the first column, an animated GIF of a happy face is shown. If the user hovers the mouse over the second or third column, an animated GIF of a book with a flashing question mark is shown instead.




using System;
using System.Web;
using System.Web.UI.WebControls;

public class JavaScriptTest : System.Web.UI.Page {

protected System.Web.UI.WebControls.Table Table1;
protected System.Web.UI.WebControls.Image Image1;

// (Designer code omitted.)

private void Page_Load(object sender, System.EventArgs e) {

// Define the JavaScript functions.
string highlightScript =
"<script language=JavaScript> " +
"function HighlightCell(cell) {" +
"cell.bgColor = '#C0C0C0';" +
"if (cell.cellIndex == 0)"+
"{document.Form1.Image1.src='happy_animation.gif';}"+
"else {document.Form1.Image1.src='question_animation.gif';}" +
";}" +
"</script>";

string unhighlightScript =
"<script language=JavaScript> " +
"function UnHighlightCell(cell) {" +
"cell.bgColor = '#FFFFFF';" +
"}" +
"</script>";

// Insert the function into the page (it will appear just after
// the <form runat=server> tag.
// Note that each script block is associated with a string name.
// This allows multiple controls to register the same script block,
// while ensuring it will only be rendered in the final page once.
if (!this.IsClientScriptBlockRegistered("Highlight")) {
Page.RegisterClientScriptBlock("Highlight", highlightScript);
}

if (!this.IsClientScriptBlockRegistered("UnHighlight")) {
Page.RegisterClientScriptBlock("UnHighlight", unhighlightScript);
}

// Set the attributes of every cell in the table.
foreach (TableRow row in Table1.Rows) {

foreach (TableCell cell in row.Cells) {

cell.Attributes.Add("onMouseOver", "HighlightCell(this);");
cell.Attributes.Add("onMouseOut", "UnHighlightCell(this);");
}
}
}


image.JPG



Technorati :

Variety in the Web World