SYSTEM WEB UI CONTROL 8 Server Controls ASP
КЛАСС SYSTEM. WEB. UI. CONTROL 8
Server Controls в ASP. NET: 2. СЕРВЕРНЫЕ КОНТРОЛЫ HTML 9
HTML SERVER CONTROLS 10
HTML CONTROL CLASS � System. Web. UI. Html. Controls. Html. Control 11
КЛАСС HTML INPUT CONTROL � System. Web. UI. Html. Controls. Html. Input. Control � Соответствует стандартным HTML элементам ввода данных: � � � <input type=“text”> - Text Box <input type=“submit”> - Submit Button <input type=“file”> - File Uploader 13
КЛАССЫ СЕРВЕРНЫХ КОНТРОЛОВ HTML � � � � � Html. Anchor: Html. Button: Html. Form: Html. Image: Html. Input. Button: Html. Input. Reset: Html. Input. Submit: Html. Input. Check. Box: Html. Input. File: Html. Input. Hidden: Html. Input. Image: Html. Input. Radio. Button: Html. Input. Text: Html. Input. Password: Html. Select: Html. Table. Cell: Html. Table. Row: Html. Text. Area: Html. Generic. Control: runat=“server” <a runat=“server”> <button runat=“server”> <form runat=“server”> <img runat=“server”> <input type=“button” runat=“server”> <input type=“reset” runat=“server”> <input type=“submit” runat=“server”> <input type=“checkbox” runat=“server”> <input type=“file” runat=“server”> <input type=“hidden” runat=“server”> <input type=“image” runat=“server”> <input type=“radio” runat=“server”> <input type=“text” runat=“server”> <input type=“password” runat=“server”> <select runat=“server”> <table runat=“server”> или <td runat=“server”> <th runat=“server”> <tr runat=“server”> <textarea runat=“server”> любой другой HTML тэг с атрибутом 14
ПРОГРАММНАЯ УСТАНОВКА СТИЛЕЙ И СВОЙСТВ protected object sender, System. Event. Args e) e) protected void Page_Load(object { // Only perform the initialization the first time the page is requested. // After that, this information is tracked in view state. if (!Page. Is. Post. Back) { // Set the style attributes to configure appearance. Text. Box 1. Style["font-size" ] = "20 px"; ; Text. Box 1. Style["font-size"] = Text. Box 1. Style["color"] = "red"; ; Text. Box 1. Style[ // Use a slightly different but equivalent syntax // for setting a style attribute. Text. Box 1. Style. Add("background-color" , "lightyellow"); ); Text. Box 1. Style. Add("background-color", // Set the default text. Text. Box 1. Value = "<Enter e-mail address here>" ; // Set other nonstandard attributes. Text. Box 1. Attributes["onfocus" ] = "alert(Text. Box 1. value)"; ; Text. Box 1. Attributes["onfocus"] = } } В Результате будет сгенерирован HTML-код : HTML-код: <input name="Text. Box 1" type="text" id="Text. Box 1“ style="font-size: 20 px; color: red; background-color: lightyellow; " value="< Enter e-mail address here>“ onfocus="alert(Text. Box 1. value)" /> 15
ПРОГРАММНОЕ СОЗДАНИЕ КОНТРОЛОВ protected void Page_Load(object sender, System. Event. Args e) { // Create a new Html. Table object. Html. Table table 1 = new Html. Table(); // Set the table's formatting-related properties. table 1. Border = 1; table 1. Cell. Padding = 3; table 1. Cell. Spacing = 3; table 1. Border. Color = "red"; // Start adding content to the table. Html. Table. Row row; Html. Table. Cell cell; for (int i = 1; i <= 5; i++) { // Create a new row and set its background color. row = new Html. Table. Row(); row. Bg. Color = (i % 2 == 0 ? "lightyellow" : "lightcyan"); for (int j = 1; j <= 4; j++) { // Create a cell and set its text. cell = new Html. Table. Cell(); cell. Inner. Html = "Row: " + i. To. String() + " Cell: " + j. To. String(); // Add the cell to the current row. Cells. Add(cell); } // Add the row to the table 1. Rows. Add(row); } // Add the table to the page. this. Controls. Add(table 1); } 16
Server Controls в ASP. NET: 3. ВЕБ КОНТРОЛЫ 18
WEB CONTROLS 19
БАЗОВЫЙ КЛАСС WEB CONTROL � System. Web. UI. Web. Controls. Web. Control 20
ПЕРЕЧИСЛЕНИЯ (ENUMERATIONS) � В коде: � � ctrl. Border. Style = Border. Style. Dashed; В ASPX-разметке: � <asp: Text. Box Border. Style=“Dashed” Text=“Border Test” id=“txt” runat=“server”> 25
ЗАДАНИЕ ЦВЕТОВ (COLORS) � С использованием ARGB значений: � � С использованием предопределённых цветов: � � � int alpha=255, red=0, green=255, blue=0; ctrl. Fore. Color = Color. From. Argb(alpha, red, green, blue); ctrl. Fore. Color = Color. Crimson; С использованием HTML-именования цветов: � ctrl. Fore. Color = Color. Translator. From. Html(“Blue”); � <asp: Text. Box Fore. Color=“Blue” Text=“Test” id=“txt” runat=“server”> С использованием HTML-кодировки цвета: � <asp: Text. Box Fore. Color=“#ff 50 f” Text=“Test” id=“txt” runat=“server”> 26
ШРИФТЫ (FONTS) � Свойство Web. Control. Font – Read. Only! Класс System. Web. UI. Web. Controls. Font. Info: � Установка свойств шрифта в Коде: � � � ctrl. Font. Name = “Verdana”; ctrl. Font. Bold = true; ctrl. Font. Size = Font. Unit. Small; ctrl. Font. Size = Font. Unit. Point(14); Настройка шрифта в ASPX-разметке (“-” object-walker): � � <asp: Text. Box Font-Name=“Tahoma” Font-Size=“ 40” Text=“Test” id=“txt” runat=“server”> <asp: Text. Box Font-Name=“Calibri, Times New Roman, Times” Font-Size=“Large” Text=“Test” id=“txt” runat=“server”> 27
ФОКУС ВВОДА � Через Java. Script вызовом метода фокусировки ASP. NET: <script type=“text/javascript”> <!– Web. Form_Auto. Focus(‘Text. Box 2’); --> </script> � Через атрибуты веб-формы: <form id=“Form 1” Default. Focus=“Text. Box 2” runat=“server 2”> � Через кнопки изменения фокуса (Access Keys: Alt+<key>): <asp: Label Access. Key=“ 2” Associated. Control. ID=“Text. Box 2” runat=“server”> Text. Box 2: </asp: Label><asp: Text. Box runat=“server” ID=“Text. Box 2”> � Установка кнопки по умолчанию: <form id=“Form 1” Default. Button=“cmd. Submit” runat=“server”> 28
SCROLLABLE PANEL <asp: Panel ID="Panel 1" runat="server" Height="116 px" Width="278 px" Border. Style="Solid" Border. Width="1 px" Scroll. Bars="Auto"> This scrolls. <asp: Button ID="Button 1" runat="server" Text="Button" /> <asp: Button ID="Button 2" runat="server" Text="Button" /> <asp: Radio. Button ID="Radio. Button 1" runat="server" /> <asp: Text. Box ID="Text. Box 1" runat="server" Width="119 px"></asp: Text. Box> 7 8 9 10 </asp: Panel> 29
Server Controls в ASP. NET: 4. СПИСКОВЫЕ КОНТРОЛЫ 31
БАЗОВЫЙ КЛАСС СПИСКОВ: LIST CONTROL � System. UI. Web. Controls. List. Control: � Selected. Index. Changed – событие об изменении выбора 33
ПРИМЕР ИСПОЛЬЗОВАНИЯ КОНТРОЛОВ ВАЛИДАЦИИ � � 2 -ASP-NET_Server. Controls_Demo. SiteValidators. aspx. cs 42
ГРУППЫ ПРОВЕРОК ДАННЫХ <asp: Panel Height="112 px" ID="Panel 1" runat="server" Width="255 px" Border. Width="2 px"> <asp: Text. Box ID="Text. Box 1" runat="server" Validation. Group="Group 1"/> <asp: Required. Field. Validator Error. Message="*Required" ID="Required. Field. Validator 1" runat="server" Validation. Group="Group 1" Control. To. Validate="Text. Box 1"/> <asp: Button ID="Button 1" runat="server" Text="Validate Group 1" Validation. Group="Group 1" /> </asp: Panel> <asp: Panel Height="94 px" ID="Panel 2" runat="server" Width="255 px" Border. Width="2 px"> <asp: Text. Box ID="Text. Box 2" runat="server" Validation. Group="Group 2"/> <asp: Required. Field. Validator Error. Message="*Required" ID="Required. Field. Validator 2" runat="server" Validation. Group="Group 2" Control. To. Validate="Text. Box 2"/> <asp: Button ID="Button 2" runat="server" Text="Validate Group 2" Validation. Group="Group 2" /> </asp: Panel> <asp: Button ID="cmd. Validate. All" On. Click="cmd. Validate. All_Click" runat="server" Text="Validate Programmatically" Width="192 px" /> <asp: Label Enable. View. State="False" ID="Label 1" runat="server"></asp: Label> 43
ПОКАЗ БАННЕРОВ В AD ROTATOR <asp: Ad. Rotator id="Ad. Rotator 1" runat="server" Target="_blank" Advertisement. File="ads. xml" On. Ad. Created="Ad. Rotator 1_Ad. Created"/> ads. xml: <Advertisements> <Ad> <Image. Url>hdr_logo. gif</Image. Url> <Navigate. Url>http: //www. apress. com</Navigate. Url> <Alternate. Text>Apress - The Authors Press</Alternate. Text> <Impressions>20</Impressions> <Keyword>books</Keyword> </Ad> <Image. Url>sub_hero. jpg</Image. Url> <Navigate. Url>http: //www. microsoft. com/events/teched 2007/default. mspx</Navigate. Url > <Alternate. Text>Tech. Ed From Microsoft</Alternate. Text> <Impressions>20</Impressions> <Keyword>Java</Keyword> </Ad> <!-- More ads can go here. --> </Advertisements> 46
ВЫБОР ДНЕЙ В КАЛЕНДАРЕ <asp: Calendar runat="server" ID="Calendar 1" Fore. Color="#663399" Back. Color="#FFFFCC" On. Selection. Changed="Calendar 1_Selection. Changed" Border. Color="#FFCC 66" Border. Width="1 px" Day. Name. Format="Shortest" Font-Names="Verdana" Font-Size="8 pt" Height="200 px" Selection. Mode="Day. Week. Month" Show. Grid. Lines="True" Width="220 px"> <Selected. Day. Style Back. Color="#CCCCFF" Font-Bold="True" /> <Selector. Style Back. Color="#FFCC 66" /> <Today. Day. Style Back. Color="#FFCC 66" Fore. Color="White" /> <Other. Month. Day. Style Fore. Color="#CC 9966" /> <Next. Prev. Style Font-Size="9 pt" Fore. Color="#FFFFCC" /> <Day. Header. Style Back. Color="#FFCC 66" Font-Bold="True" Height="1 px" /> <Title. Style Back. Color="#990000" Font-Bold="True" Font-Size="9 pt" Fore. Color="#FFFFCC" /> </asp: Calendar> 47
- Slides: 49