Использование JavaScript
В лекции 1 мы создали страницу, которая показывала время на сервере. Если пользователь находится в другом часовом поясе, время на его часах будет другое. Можно ли ее переделать, чтобы время совпадало с часами клиента? Ответ на этот вопрос — положительный. В страницу можно встроить код на JavaScript, который будет работать при загрузке страницы. Текст у метки менять нельзя, поэтому используем TextBox. Так как он — только для чтения и ширина границы равна 0, отличить его от метки сложно:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="time.aspx.cs" Inherits="time" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Время у клиента</title> </head> <body onload="javascript:document.forms[0]['ClientTime'].value=Date();"> <form id="form1" runat="server"> <div> <asp:TextBox ID="ClientTime" runat="server" BorderWidth="0px" ReadOnly="True" Width="500px"></asp:TextBox><br /> <input type="button" id="Button1" runat="server" value="Узнать время" onclick="Show()" /> </div> </form> </body> </html>
Свойство класса Page ClientScript позволяет определять для страницы клиентские сценарии.
Метод RegisterClientScriptBlock задает скрипт, который будет встроен в текст страницы:
protected void Page_Load(object sender, EventArgs e) { string myScript = @"function Show() { document.forms[0]['ClientTime'].value=Date(); }"; if (!Page.ClientScript.IsClientScriptBlockRegistered("MyScript")) Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", myScript, true); }
<input type="button" ID="Button1" runat ="server" value="Узнать время" OnClick="Show()"/>
Первый аргумент — тип данной страницы, второй — идентификатор скрипта, который позволит отличить его от других скриптов, третий — текст сценария. Четвертый параметр — булевский, если он равен True, то теги <script type="text/javascript"> и </script> будут автоматически окружать текст функции. Страница, которая получится, обновляет время при каждом нажатии на кнопку.
Ее HTML-код выглядит так:
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1"><title>
</title></head> <body onload="javascript:document.forms[0]['ClientTime'].value=Date();"> <form name="form1" method="post" action="Default2.aspx" id="form1"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMjcxMzU0ODE3ZGQKqi3Rssxd/mXLs5G1HpFSaJ/j1A==" /> </div>
<script type="text/javascript"> <!-- function Show() { document.forms[0]['ClientTime'].value=Date(); }// --> </script>
<div> <input name="ClientTime" type="text" readonly="read- only" id="ClientTime" style="border-width:0px;width:500px;" /><br /> <input name="Button1" type="button" id="Button1" value=" " onclick="Show()" /> </div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALI- DATION" value="/wEWAwLS+f/WBwK8i8+nDwKM54rGBkVGyzaTKHVi8uFS3xL8ule0VqeH" /> </div></form> </body> </html>
Скрипт заключен в комментарии, чтобы все работало на старых браузерах. Он включен в текст до элементов управления.
Метод RegisterStartupScript похож на предыдущий, и отличие заключается в том, что скрипт выполняется при загрузке страницы, но после отображения всех элементов. Сам скрипт находится в конце описания формы. Парсер JavaScript не может обратиться к элементам, если они не описаны до функции. Если мы напишем скрипт, которые читает данные из формы, то попытка отображения страницы вызовет ошибку времени выполнения:
string myScript1 = @"alert(document.forms[0]['ClientTime'].value);"; Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "AlertScript", myScript1, true);
Значение поля в момент отображения скрипта еще не определено.
Поэтому нужно вызывать RegisterStartupScript:
string myScript1 = @"function Message() {alert(document.forms[0]['ClientTime'].value);}"; Page.ClientScript.RegisterStartupScript(this.GetType(), "AlertScript", myScript1, true);
Метод RegisterClientScriptInclude позволяет подключить внешний файл JavaScript. Например,
Page.ClientScript.RegisterClientScriptInclude("myKey", "ExternJavaScriptCode.js");
создает на выданной странице код
<script src="ExternJavaScriptCode.js" type="text/javascript"></script>
В этих примерах мы использовали не серверные командные кнопки, а элементы управления HTML. Причина заключается в том, что нажатие на командную кнопку отправляет форму на сервер. Событие OnClick выполняется на сервере. А в JavaScript существует свой OnClick. Как же его вызвать? Свойство Attributes позволяет обратиться к атрибутам элемента, даже тем, которые не соответствуют встроенным свойствам:
<asp:Button ID="Button2" runat="server" Text="Button" /> protected void Page_Load(object sender, EventArgs e) { Button2.Attributes.Add("onclick", "Show();return false"); }
return false нужно писать обязательно, иначе форма будет отправлена на сервер.
Эти функции можно применить к любым серверным элементам:
public static void AddConfirmMessage(WebControl ctl, string message) { ctl.Attributes.Add("onclick", "if ( ! confirm( '" + message + "' )) return false; "); }
public static void AddPopupMessage(WebControl ctl, string mes- sage) { ctl.Attributes.Add("onclick", "alert( '" + message + "'); "); }
