Опубликован: 14.11.2006 | Доступ: свободный | Студентов: 5898 / 532 | Оценка: 4.18 / 3.74 | Длительность: 16:37:00
ISBN: 978-5-9556-0085-7
Лекция 18:

Элементы управления и использование JavaScript

< Лекция 17 || Лекция 18: 12345

Использование 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 + "'); ");
}
< Лекция 17 || Лекция 18: 12345
Алексей Савельев
Алексей Савельев

https://technet.microsoft.com/en-us/library/ms143221(v=sql.105).aspx

Денис Прокофьев
Денис Прокофьев

Везде написано, что это самый независимый и простой в использовании навигационный элемент управления, что он работает сразу с web.sitemap и не требует определения SiteMapDataSource.

Моя карта сайта состоит из двух страниц, вложенных друг в друга. asp:Menu, asp:TreeView отбображаются как ожидалось, а вот asp:SiteMapPath - нет. Он не виден нигде. Однако на его месте формируется разметка: <span id="SiteMapPath1"><a href="#SiteMapPath1_SkipLink" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">Проход по ссылкам навигации</a><a id="SiteMapPath1_SkipLink"></a></span> - т.е. элемент отрабатывает.

В словах xHTML это выглядит так: <asp:SiteMapPath ID="SiteMapPath1" runat="server" />. Причем не важно - внутри тега form или снаружи - всегда одинаково.

Т.к. другие нав. ЭУ работают через простой источник данных без ошибок, делаю вывод - карта составлена правильно. ИД: <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

Карта: <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/L11_1_simplePage.aspx" title="Страница 1"  description="Простая страница 1." >
    <siteMapNode url="~/L11_1SimplePage2.aspx" title="Страница 2"  description="Простая страница 2" />
  </siteMapNode>
</siteMap>

Почему так происходит? Вроде делаю все по примерам. VS Community 2015. NetFramework в проекте: v4.0.30319