Les exemples suivants affichent différents scénarios pour utiliser le contrôle ScriptManager.
Activation de mises à jour de pages partielles
L'exemple suivant indique comment utiliser le contrôle ScriptManager pour activer des mises à jour de pages partielles. Dans cet exemple, un contrôle Calendar et un contrôle DropDownList sont à l'intérieur d'un contrôle UpdatePanel. Par défaut, la valeur de la propriété UpdateMode est Always et la valeur de la propriété ChildrenAsTriggers est true. Par conséquent, les contrôles enfants du panneau entraînent une publication (postback) asynchrone.
<%@ 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>
Gestion des erreurs de mise à jour de page partielle et inscription de script
L'exemple suivant montre comment fournir une gestion des erreurs personnalisée pendant les mises à jour de pages partielles. Par défaut, lorsqu'une erreur se produit pendant les mises à jour de pages partielles, un message JavaScript s'affiche. Cet exemple montre comment utiliser la gestion des erreurs personnalisée en fournissant un gestionnaire pour l'événement AsyncPostBackError et en définissant la propriété AsyncPostBackErrorMessage dans le gestionnaire d'événements. Vous pouvez également définir la propriété AllowCustomErrorsRedirect pour spécifier comment la section d'erreurs personnalisées du fichier Web.config est utilisée lorsqu'une erreur se produit pendant des mises à jour de pages partielles. Dans cet exemple, la valeur par défaut de la propriété AllowCustomErrorsRedirect est utilisée. Cela signifie que si le fichier Web.config contient un élément customErrors, cet élément détermine comment les erreurs s'affichent. Pour plus d'informations, consultez customErrors, élément (Schéma des paramètres ASP.NET).
<%@ 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>
Globalisation de la date et de l'heure affichées dans le navigateur
L'exemple suivant montre comment définir la propriété EnableScriptGlobalization pour que le script client puisse afficher des date et heure spécifiques à la culture dans le navigateur. Dans l'exemple, l'attribut Culture de la directive @ Page a la valeur auto. Par conséquent, la première langue spécifiée dans les paramètres du navigateur en cours détermine la culture et la culture d'interface utilisateur pour la page. Pour plus d'informations, consultez Comment : définir la culture et la culture de l'interface utilisateur pour la globalisation des pages Web ASP.NET.
<%@ 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>