ASP.Net. Лекція 4. Серверні елементи управління. Продовження (исходники

Лекція 3


На початку маленька "хитрість". Хороший веб-розробник повинен знати, як виглядають його сторінки в різних браузерах. За замовчуванням звичайно вони відкриваються в Internet Explorer. Клацніть правою кнопкою миші на файлі в Visual Studio Solution Explorer і виберіть Browse with. Там можна змінити браузер за замовчуванням або вибрати інший браузер для даного перегляду.


Button


Button – це командна кнопка, натискання на яку часто призводить до відправки даних на сервер. Можна створювати кнопки двох типів: для передачі даних форми (submit button) чи командні кнопки для виконання різних функцій, пов'язаних з даною кнопкою. Якщо на формі є кілька кнопок, властивість CommandName дозволяє дізнатися, яка саме кнопка була натиснута.


ASP. NET підтримує 3 види подій.



Наприклад, щоб обробити клацання на кнопці, ми перевизначають подія Click.






 protected void Button1_Click (object sender, EventArgs e)
    {
    }

Події можна визначити через вкладку подій у вікні властивостей. Другий аргумент всіх обробників подій має тип EventArgs або який-небудь, успадкований від нього.


Наприклад, ми хочемо створити форму для заповнення резюме. Автор може мати заздалегідь невідоме нам кількість попередніх місць роботи. Додамо на форму кнопку, при натисканні на яку у форму додається один елемент вводу тексту.






  <%@ Page Language=”C#”%>
<script runat=”server”>
static int num=0;
static TextBox[] tb=new TextBox[10];
void AddExperience(Object sender, EventArgs e)
{
if (num <10) / / Щоб не виникало помилки звернення до неіснуючого елементу масиву
    {
        TextBox newBox = new TextBox();
        newBox.ID = “box” + num;
        tb[num] = newBox;
        num++;
     }
for (int i = 0; i <10; i + +) / / Додавання на форму контролів з масива.
    {
        if (tb[i] != null)
        {
        places.Controls.Add(tb[i]);
        Label lb=new Label();
        lb.Text=”<br><br>”;
        places.Controls.Add(lb);
        }
        else break;
    }
}
</script>
<html xmlns=«http://www.w3.org/1999/xhtml» >
<head>
</head>
<body>
<asp:Label ID="Label1" runat="server" text="Введіте Ваше останнє місце работи" />
    <form runat=”server” id=”Experience”>
    <asp:Panel id=”places” runat=”server”>
        <asp:TextBox id=”first” runat=”server” />
        <br />
        <br />
        </asp:Panel>
<asp:Button id="Add" Text="Еще" OnCommand="AddExperience" CommandName="Add" runat="server" />
    </form>
</body>
</html>

Тут ми маємо масив з 10 елементів типу TextBox. Новий елемент створюється в момент натискання на кнопку «Ще». Можна додати до 10 нових елементів. Як і раніше, вони розміщуються в контейнері, це потрібно, щоб вони виводилися до кнопки.


За допомогою властивості OnClientClick можна задати клієнтський сценарій на JavaScript. Його значенням може бути вбудована функція, або описана в тілі сторінки. Клієнтський код виконується до серверного коду, заданого у властивості OnClick.


Image


Елемент управління asp: image відповідає тегу img мови HTML. Його можна використовувати для динамічного додавання на сторінку нових зображень. Повернемося до нашого туристичному агентству. Ми вирішили, що коду клієнт вибирає міста, на сторінку автоматично повинна виводитися карта відповідного міста. Залишаємо це, як вправу. Карти міст можна знайти через Яндекс.


<asp:Image> має свойстваAlternateText, ImageUrl, ImageAlign













AlternateText Відповідає атрибуту ALT тега IMG. Відображається, якщо показ картинок відключений або картинки неможливо знайти
ImageUrl Відповідає атрибуту SRC тега IMG
ImageAlign Відповідає атрибуту ALIGN тега IMG

Як завжди, властивості можна змінювати з програми. Наприклад, змінюючи значення ImageUrl, можна організувати перегляд безлічі картинок у вигляді слайд-шоу. Створіть директорію images та помістити в неї кілька картинок image1, image2 і так далі.


Напишемо нову сторінку.






  <%@ Page Language=”C#” %>
<html xmlns=«http://www.w3.org/1999/xhtml» >
<head>
<script language=”C#” runat=”server”>
public static int count=1;
void NextImage(Object sender, EventArgs e)
{
count++;
if (count == 10) count = 1; / / циклічний перегляд
Image1.ImageUrl =” images/image”+count+”.jpg”;
}
</script>
</head>
<body>
   <form runat=”server”>
      <h3>Image Example</h3>
      <asp:Image id=”Image1″ runat=”server”
           ImageAlign=”top”
AlternateText = "Картинки немає"
           height=”300″
           ImageUrl=” images/image1.jpg”/ >
      <hr>
<br><br>
      <asp:Button id=”Next”
           Text=”Next”
           OnClick=”NextImage”
           runat=”server”/>
<br><br>
   </form>
</body>
</html>

ImageButton


Елемент управління ImageButton представляє собою комбінацію елементів Image і Button. Його можна використовувати для створення зображень, чутливих до кліку мишки. Клацання є подією, при настанні якого виконується певний кoд.






 <asp:ImageButton id="imgButton" OnCommand ="SubmitPartl" runat="server"/>

ImageButton дозволяє досягти ефекту, аналогічного карті зображення. Подія Click дозволяє дізнатися координати клацання миші і реагувати відповідно регіону, в якому була натиснута миша. Оброблювач події повинен приймати аргументу типу ImageClickEventArgs – наследнікаSystem.EventArgs. У нього є додаткові поля X і Y – координати кліка мишки.






  protected void ImageButton1_Click(object sender,
System.Web.UI.WebControls.ImageClickEventArgs e)
{
/ / Обробка події
}

Повернемося знову до турагентству. Директор викликав вас (програміста) і попросив зробити наступне: на сторінці із зображенням карти Каїра необхідно зробити так, щоб коли користувач натискував мишкою в будь- місце, відкривалася карта району, на який він натиснув. Усього є 9 районів. Всі картинки мають розмір 300 на 300 пікселів. Райони однакові, розташовані в таблиці 3 на 3.


Ви пишете:






  <%@ Page Language=”C#” %>
<script runat=”server”>
    void Magnify(Object sender, ImageClickEventArgs e)
    {
    int x=e.X;
    int y=e.Y;
int row = y/100; / / рядок, на яку скликали
int col = x/100; / / стовпчик, на який скликали
int count = row * 3 + col +1; / / номер картинки
    plan.ImageUrl =”Cairo/map-“+count+”.jpg”;
plan.Enabled = false; / / це потрібно, щоб не відкривався інший район.
instruction.Text = "Натисніть Back, щоб побачити все місто";
    }
</script>
<html xmlns=«http://www.w3.org/1999/xhtml» >
<head>
</head>
<body>
    <form runat=”server”>
<h3> Карта Каїра
        </h3>
        <br />
        <br />
<asp:Label id="instruction" runat="server"> Натисніть мишею на будь-який район, щоб збільшити картинку. </ asp: Label>
        <br />
        <br />
<asp:ImageButton id="plan" onclick="Magnify" runat="server" width="300" height="300" ImageUrl="Cairo/map.gif"> </ asp: ImageButton>
        <br />
        <br />
    </form>
</body>
</html>

А більш просте використання-створення красивих нестандартних кнопок. Властивість CommandName використовується так само, як і у випадку зі звичайною кнопкою.






      <form id=”form1″ runat=”server”>
    <div>
<Asp: ImageButton ID = "ImageButton1" runat = "server" CommandName = "create"
ImageUrl = "~ / Images/1button-create.gif" OnCommand = "ImageButton_Click" OnClientClick = "alert (" clicked ")" ToolTip = "Create very nice account" />
<asp:ImageButton ID="ImageButton2" runat="server" CommandName="add" ImageUrl="~/Images/1button-add.gif" OnCommand="ImageButton_Click" />
<asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/Images/1button-cancel.gif" CommandName="cancel" OnCommand="ImageButton_Click" /> <br />
<asp:Label ID="Message" runat="server"> </ asp: Label> </ div>
    </form>

Картинки цього прикладу є в поставці Visual Studio 2005 Microsoft Visual Studio 8Common7IDEProjectTemplatesWebCSharp1033. Скопіюйте їх в папку Images вашого проекту і додайте їх в проект.


Цю функцію вставте у файл відокремленого коду.






 protected void ImageButton_Click (Object sender, CommandEventArgs e)
    {
        switch (e.CommandName)
        {
            case “create”:
                // Insert code to create.
                Message.Text = “Creating “;
                break;
            case “add”:
                // Insert code to add.
                Message.Text = “Adding “;
                break;
            case “cancel”:
                // Insert code to cancel.
                Message.Text = “canceling”;
                break;
        }
    }

У першої кнопки встановлено властивість ToolTip. Подивіться сторінку в Internet Explorer. Вікно з підказкою з'явиться при наведенні на цю кнопку. А ось Opera виводить підказку для всіх кнопок. Тільки для тих, в яких встановлено ToolTip, він виводиться на першій сходинці. У другій – адресу.

У кнопки також показано використання властивості OnClientClick. Воно задає клієнтський сценарій, який буде виконуватися при натисканні на кнопку без звертання до сервера. Тут це функція alert мови Javascript – Виклик вікна з повідомленням.


HyperLink і LinkButton


HyperLink – гіперпосилання звичайна або з картинкою. Вони дозволяють пересуватися по сайту або давати посилання на інші сайти.






 <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Customer.aspx"> HyperLink </ asp: HyperLink>

Знак ~ позначає кореневий каталог поточного сайту.


LinkButton – це кнопка, яка виглядає як гіперпосилання. Натиснення на неї призводить до перезавантаження сторінки. У властивості PostBackUrl можна задати адресу сторінки, на яку буде перенаправлено запит.


BulletedList


Цей елемент управління дозволяє відтворити нумеровані і ненумеровані марковані списки і додає до цього багато нових можливостей. Це новий елемент ASP.NET 2.0 і теж може бути прив'язаний до даних.


Тип списку визначається властивістю BulletStyle. Список може бути пронумерований цифрами, буквами або латинськими числами, або ж позначено маркерами різних форм.






 <asp:BulletedList ID="BulletedList1" runat="server" BulletStyle="Numbered">
<asp:ListItem> Чебурашка </ asp: ListItem>
<asp:ListItem> Крокодил Гена </ asp: ListItem>
<asp:ListItem> Шапокляк </ asp: ListItem>
    </asp:BulletedList>

Виглядає на сторінці як



  1. 1. Чебурашка
  2. 2. Крокодил Гена
  3. 3. Шапокляк

А його HTML-код






 <ol id="BulletedList1" style="list-style-type:decimal;">
<li> Чебурашка </ li> <li> Крокодил Гена </ li> <li> Шапокляк </ li>

Якщо властивість BulletStyle поміняти на "Circle", то буде сгененірован ненумерований список






 <ul id="BulletedList1" style="list-style-type:circle;">
<li> Чебурашка </ li> <li> Крокодил Гена </ li> <li> Шапокляк </ li>

При значенні CustomImage необхідно задати картинку у властивості BulletImageUrl. Елементами списку можуть бути гіперпосилання та кнопки-гіперпосилання.






 <asp:BulletedList ID="BulletedListLinks" runat="server" BulletStyle ="Circle" DisplayMode="HyperLink">
<asp:ListItem Value="http://chebur.polyn.kiae.su"> Чебурашка </ asp: ListItem>
<asp:ListItem Value="http://gena.crocodile.net"> Крокодил Гена </ asp: ListItem>
<asp:ListItem Value="http://chapeauclack.com"> Шапокляк </ asp: ListItem>
        </asp:BulletedList>

Самі гіперпосилання слід записувати в атрибут ListItem Value.


Тип LinkButton перетворює пункти списку в гіперпосилання, які викликають перезавантаження сторінки. Оброблювач натискання на кнопки приймає аргумент, в якому міститься інформація про індекс натиснутою пункту.






 <asp:BulletedList ID="BulletedListLinks" runat="server" BulletStyle ="Circle" DisplayMode="LinkButton" OnClick="BulletedListLinks_Click">
<asp:ListItem Value="Red"> Червоний </ asp: ListItem>
<asp:ListItem Value="Blue"> Синій </ asp: ListItem>
<asp:ListItem Value="Green"> Зелений </ asp: ListItem>
        </asp:BulletedList>
protected void BulletedListLinks_Click (object sender, BulletedListEventArgs e)
    {
        switch (e.Index)
        {
case 0: BulletedListLinks.BackColor = System.Drawing.Color.LightCoral;
                break;
case 1: BulletedListLinks.BackColor = System.Drawing.Color.Aqua;
                break;
case 2: BulletedListLinks.BackColor = System.Drawing.Color.LightGreen;
                break;
        }
    }
}

Literal


Якщо не потрібно змінювати значення тексту програмно, можна використовувати елемент керування Literal. У такому випадку текст буде виводиться «як є», без тегів <span>. Цей клас успадковується не від WebControl, а від Control, тому його можна ставити поза форми. Відповідно у нього немає властивостей, що відповідають за зовнішній вигляд і стиль. Це не страшно, стиль може бути визначений в контейнері, в який він включений – div або Panel. Зате є цікава властивість Mode. Спробуємо на прикладі:






 <Asp: Literal ID = "Literal1" Runat = "server" Mode = "Encode"
Text = "<b> Here is some text </ b >"></ asp: Literal>

Mode = "Encode" кодує текст так, щоб в браузері було видно саме цей HTML-код, замінюючи спеціальні символи розмітки CER-послідовностями.






  <b>Label</b>

Це корисно, якщо буває потрібно вивести код, і не тільки HTML. На деяких сайтах, де є підручники з С + + в plain text, у прикладах коду зустрічається рядок


#include


без імені включається файлу. Воно було «з'їдене» браузером, який вважає всі в <> за тег, навіть якщо не розпізнає його, хоча текст був укладений у <PRE> </ PRE>. Ну ось, цієї проблеми можна уникнути.


Table


Таблиці в HTML дуже поширені, так як вони дозволяють позиціонувати елементи на сторінці. Серверний елемент керування задається тегами <asp:Table ID="Table1" runat="server"> </ asp: Table>. Міць ASP. NET проявляється при динамічному створенні таблиці. Цей елемент управління в ASP. NET використовується рідше, так як елемент DataGrid дозволяє отримати ті ж результати, маючи до того ж прив'язку до даних.


Властивість Rows nабліцs є контейнером рядків – елементів TableRow, а вони, у свою чергу мають свойтсво Cell – колекцію елементів TableCell. Сам TableCell – контейнер будь-яких елементів управління. Їх не можна вставляти в таблицю інакше, ніж на один із елементів TableCell. Текст в клітинку можна записати через властивість Cell.Text або вставкою елемента Literal.


Рядки таблиці можуть бути також типу TableHeaderRow і TableFooterRow. Такі рядки завжди відображаються на мобільних пристроях з невеликим екраном, навіть якщо таблиця велика і для її перегляду потрібна прокрутка. Стовпчики таблиці можуть бути типу TableHeaderCell – спадкоємця TableCell. Текст в них відображається виділеним напівжирним шрифтом і центрований.


У ASP. NET 2.0 в елемента з'явилася можливість задавати заголовки за допомогою властивості Caption. Розташування заголовка визначається властивістю CaptionAlign. При значенні Bottom він буде знаходиться під таблицею. При інших значеннях заголовок знаходиться де йому належить – нагорі, Left і Right просто вирівнюють біля лівого чи правого краю.


Цей приклад ілюструє створення таблиці в програмному режимі. Гра «Знайди число» тренує увагу і пам'ять. На початку гравець вводить розмір таблиці n. Програма генерує квадратну таблицю, де числа від 1 до n ^ 2 написані на кнопках і перемішані у випадковому порядку.

Надсилання даних іншій сторінці


У ASP.NET 1.1 не дозволялася відправка даних між сторінками. У ASP.NET 2.0 елементи управління мають властивість PostBackUrl, де можна вказати, якій сторінці система повинна передати Web-форму, якщо відправлення даних на сервер ініційовано цим елементом управління.


Через властивість PreviousPage сторінки можна з'ясувати, яка сторінка була джерелом постбека нашої сторінки.


На першій сторінці малюється календар.






  <%@ 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”>
</script>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title> Перша сторінка </ title>
</head>
<body>
<form id = “form1” runat= “server”>
Ваше ім'я: <br />
<asp:Textbox ID=”TextBox1″ Runat=”server”>
</asp:Textbox>
<p>
Бажана дата вильоту? <br />
<asp:Calendar ID="Calendar1" Runat="server"> </ asp: Calendar> </ p>
<br />
<Asp: Button ID = "Button2" Runat = "server" Text = "Submit page to Page2.aspx"
PostBackUrl=”Page2.aspx” />
<p>
<asp:Label ID="Label1" Runat="server"> </ asp: Label> </ p>
</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 Page_Load(object sender, System.EventArgs e)
{
    if (PreviousPage != null)
    {
        TextBox pp_Textbox1;
        Calendar pp_Calendar1;
pp_Textbox1 = (TextBox) PreviousPage.FindControl ("Textbox1");
pp_Calendar1 = (Calendar) PreviousPage.FindControl ("Calendar1");
Label1.Text = "Здрастуйте," + pp_Textbox1.Text + "! <br />" +
"Ви вибрали:" + pp_Calendar1.SelectedDate.ToShortDateString ();
    }
} }
</script>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title> Друга сторінка </ title>
</head>
<body>
    <form id=”form1″ runat=”server”>
    <div>
<asp:Label ID="Label1" Runat="server"> </ asp: Label>
    </div>
    </form>
</body>
</html>

Висновок


Ми розглянули тільки деякі елементи управління і переконалися, що вони надають багаті можливості. У наступній лекції ми розглянемо інший важливий клас елементів управління – валідатори.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*