|
https://technet.microsoft.com/en-us/library/ms143221(v=sql.105).aspx |
Элементы управления и использование JavaScript
Использование 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 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 + "'); ");
}