The following examples show different scenarios for using the ScriptManager control.
Enabling Partial-Page Updates
The following example shows how to use the ScriptManager control to enable partial-page updates. In this example, a Calendar and a DropDownList control are inside an UpdatePanel control. By default, the value of the UpdateMode property is Always, and the value of the ChildrenAsTriggers property is true. Therefore, child controls of the panel cause an asynchronous postback.
|
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Sub DropDownSelection_Change(ByVal Sender As Object, ByVal E As EventArgs)
Calendar1.DayStyle.BackColor = _
System.Drawing.Color.FromName(ColorList.SelectedItem.Value)
End Sub
Protected Sub Calendar1_SelectionChanged(ByVal Sender As Object, ByVal E As EventArgs)
SelectedDate.Text = Calendar1.SelectedDate.ToString()
End Sub
</script>
<html >
<head id="Head1" runat="server">
<title>UpdatePanel Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar1"
ShowTitle="True"
OnSelectionChanged="Calendar1_SelectionChanged"
runat="server" />
<div>
Background:
<br />
<asp:DropDownList ID="ColorList"
AutoPostBack="True"
OnSelectedIndexChanged="DropDownSelection_Change"
runat="server">
<asp:ListItem Selected="True" Value="White">
White </asp:ListItem>
<asp:ListItem Value="Silver">
Silver </asp:ListItem>
<asp:ListItem Value="DarkGray">
Dark Gray </asp:ListItem>
<asp:ListItem Value="Khaki">
Khaki </asp:ListItem>
<asp:ListItem Value="DarkKhaki"> D
ark Khaki </asp:ListItem>
</asp:DropDownList>
</div>
<br />
Selected date:
<asp:Label ID="SelectedDate"
runat="server">None.</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<br />
</div>
</form>
</body>
</html>
|
|
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
void DropDownSelection_Change(Object sender, EventArgs e)
{
Calendar1.DayStyle.BackColor =
System.Drawing.Color.FromName(ColorList.SelectedItem.Value);
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
SelectedDate.Text =
Calendar1.SelectedDate.ToString();
}
</script>
<html >
<head id="Head1" runat="server">
<title>UpdatePanel Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar1"
ShowTitle="True"
OnSelectionChanged="Calendar1_SelectionChanged"
runat="server" />
<div>
Background:
<br />
<asp:DropDownList ID="ColorList"
AutoPostBack="True"
OnSelectedIndexChanged="DropDownSelection_Change"
runat="server">
<asp:ListItem Selected="True" Value="White">
White </asp:ListItem>
<asp:ListItem Value="Silver">
Silver </asp:ListItem>
<asp:ListItem Value="DarkGray">
Dark Gray </asp:ListItem>
<asp:ListItem Value="Khaki">
Khaki </asp:ListItem>
<asp:ListItem Value="DarkKhaki"> D
ark Khaki </asp:ListItem>
</asp:DropDownList>
</div>
<br />
Selected date:
<asp:Label ID="SelectedDate"
runat="server">None.</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<br />
</div>
</form>
</body>
</html>
|
Handling Partial-Page Update Errors and Registering Script
The following example shows how to provide custom error handling during partial-page updates. By default, when an error occurs during partial-page updates, a JavaScript message box is displayed. This example demonstrates how to use custom error handling by providing a handler for the AsyncPostBackError event, and by setting the AsyncPostBackErrorMessage property in the event handler. You can also set the AllowCustomErrorsRedirect property to specify how the custom errors section of the Web.config file is used when an error occurs during partial-page updates. In this example, the default value of the AllowCustomErrorsRedirect property is used. This means that if the Web.config file contains a customErrors element, that element determines how errors are displayed. For more information, see customErrors Element (ASP.NET Settings Schema).
|
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Try
Dim a As Int32
a = Int32.Parse(TextBox1.Text)
Dim b As Int32
b = Int32.Parse(TextBox2.Text)
Dim res As Int32 = a / b
Label1.Text = res.ToString()
Catch ex As Exception
If (TextBox1.Text.Length > 0 AndAlso TextBox2.Text.Length > 0) Then
ex.Data("ExtraInfo") = " You can't divide " & _
TextBox1.Text & " by " & TextBox2.Text & "."
End If
Throw ex
End Try
End Sub
Protected Sub ScriptManager1_AsyncPostBackError(ByVal sender As Object, ByVal e As System.Web.UI.AsyncPostBackErrorEventArgs)
If (e.Exception.Data("ExtraInfo") <> Nothing) Then
ScriptManager1.AsyncPostBackErrorMessage = _
e.Exception.Message & _
e.Exception.Data("ExtraInfo").ToString()
Else
ScriptManager1.AsyncPostBackErrorMessage = _
"An unspecified error occurred."
End If
End Sub
</script>
<html >
<head id="Head1" runat="server">
<title>UpdatePanel Error Handling Example</title>
<style type="text/css">
#UpdatePanel1 {
width: 200px; height: 50px;
border: solid 1px gray;
}
#AlertDiv{
left: 40%; top: 40%;
position: absolute; width: 200px;
padding: 12px;
border: #000000 1px solid;
background-color: white;
text-align: left;
visibility: hidden;
z-index: 99;
}
#AlertButtons{
position: absolute; right: 5%; bottom: 5%;
}
</style>
</head>
<body id="bodytag">
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
OnAsyncPostBackError="ScriptManager1_AsyncPostBackError" runat="server" >
<Scripts>
<asp:ScriptReference Path="ErrorHandling.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" Width="39px"></asp:TextBox>
/
<asp:TextBox ID="TextBox2" runat="server" Width="39px"></asp:TextBox>
=
<asp:Label ID="Label1" runat="server"></asp:Label><br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="calculate" />
</ContentTemplate>
</asp:UpdatePanel>
<div id="AlertDiv">
<div id="AlertMessage">
</div>
<br />
<div id="AlertButtons">
<input id="OKButton" type="button" value="OK" runat="server" onclick="ClearErrorState()" />
</div>
</div>
</div>
</form>
</body>
</html>
|
|
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
try
{
int a = Int32.Parse(TextBox1.Text);
int b = Int32.Parse(TextBox2.Text);
int res = a / b;
Label1.Text = res.ToString();
}
catch (Exception ex)
{
if (TextBox1.Text.Length > 0 && TextBox2.Text.Length > 0)
{
ex.Data["ExtraInfo"] = " You can't divide " +
TextBox1.Text + " by " + TextBox2.Text + ".";
}
throw ex;
}
}
protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
{
if (e.Exception.Data["ExtraInfo"] != null)
{
ScriptManager1.AsyncPostBackErrorMessage =
e.Exception.Message +
e.Exception.Data["ExtraInfo"].ToString();
}
else
{
ScriptManager1.AsyncPostBackErrorMessage =
"An unspecified error occurred.";
}
}
</script>
<html >
<head id="Head1" runat="server">
<title>UpdatePanel Error Handling Example</title>
<style type="text/css">
#UpdatePanel1 {
width: 200px; height: 50px;
border: solid 1px gray;
}
#AlertDiv{
left: 40%; top: 40%;
position: absolute; width: 200px;
padding: 12px;
border: #000000 1px solid;
background-color: white;
text-align: left;
visibility: hidden;
z-index: 99;
}
#AlertButtons{
position: absolute; right: 5%; bottom: 5%;
}
</style>
</head>
<body id="bodytag">
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
OnAsyncPostBackError="ScriptManager1_AsyncPostBackError" runat="server" >
<Scripts>
<asp:ScriptReference Path="ErrorHandling.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" Width="39px"></asp:TextBox>
/
<asp:TextBox ID="TextBox2" runat="server" Width="39px"></asp:TextBox>
=
<asp:Label ID="Label1" runat="server"></asp:Label><br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="calculate" />
</ContentTemplate>
</asp:UpdatePanel>
<div id="AlertDiv">
<div id="AlertMessage">
</div>
<br />
<div id="AlertButtons">
<input id="OKButton" type="button" value="OK" runat="server" onclick="ClearErrorState()" />
</div>
</div>
</div>
</form>
</body>
</html>
|
Globalizing the Date and Time That Are Displayed in the Browser
The following example shows how to set the EnableScriptGlobalization property so that client script can display a culture-specific date and time in the browser. In the example, the Culture attribute of the @ Page directive is set to auto. As a result, the first language that is specified in the current browser settings determines the culture and UI culture for the page. For more information, see How to: Set the Culture and UI Culture for ASP.NET Web Page Globalization.
|
<%@ Page Language="VB" Culture="auto" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html >
<head id="Head1" runat="server">
<title>Globalization Example</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" EnableScriptGlobalization="true" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
function pageLoad() {
Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
}
function formatDate() {
var d = new Date();
try {
$get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
}
catch(e) {
alert("Error:" + e.message);
}
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
<asp:Button ID="Button1" runat="server" Text="Display Date" />
<br />
<asp:Label ID="Label1" runat="server"></asp:Label>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
|
|
<%@ Page Language="C#" Culture="auto" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html >
<head id="Head1" runat="server">
<title>Globalization Example</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" EnableScriptGlobalization="true" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
function pageLoad() {
Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
}
function formatDate() {
var d = new Date();
try {
$get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
}
catch(e) {
alert("Error:" + e.message);
}
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
<asp:Button ID="Button1" runat="server" Text="Display Date" />
<br />
<asp:Label ID="Label1" runat="server"></asp:Label>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
|