Учебники

ASP.NET — Панель управления

Сентябрь 22, 2018

Элемент управления Panel работает как контейнер для других элементов управления на странице. Он контролирует внешний вид и видимость содержащихся в нем элементов управления. Это также позволяет генерировать элементы управления программно.

Основной синтаксис панели управления выглядит следующим образом: 

<asp:Panel ID= "Panel1"  runat = "server">
</asp:Panel>

Элемент управления Panel является производным от класса WebControl. Следовательно, он наследует все свойства, методы и события одного и того же. У него нет собственного метода или события. Однако он обладает следующими собственными свойствами:

свойства Описание
BackImageUrl URL фонового изображения панели.
DefaultButton Получает или задает идентификатор для кнопки по умолчанию, содержащейся в элементе управления Panel.
направление Направление текста на панели.
GroupingText Позволяет группировать текст как поле.
HorizontalAlign Горизонтальное выравнивание контента на панели.
ScrollBars Определяет видимость и расположение полос прокрутки на панели.
Заворачивать Позволяет перенос текста.

Работа с панелью управления

Давайте начнем с простой прокручиваемой панели определенной высоты и ширины и стиля рамки. Свойство ScrollBars установлено для обеих полос прокрутки, поэтому обе полосы прокрутки отображаются.

Исходный файл имеет следующий код для тега панели: 

<asp:Panel ID="Panel1" runat="server" BorderColor="#990000" BorderStyle="Solid" 
   Borderstyle="width:1px" Height="116px" ScrollBars="Both" style="width:278px">
   
   This is a scrollable panel.
   <br />
   <br />

   <asp:Button ID="btnpanel" runat="server" Text="Button" style="width:82px" />
</asp:Panel>

Панель отображается следующим образом:

панель

пример

В следующем примере демонстрируется создание динамического контента. Пользователь предоставляет количество элементов управления надписями и текстовых полей, которые будут сгенерированы на панели. Элементы управления генерируются программно.

Измените свойства панели, используя окно свойств. При выборе элемента управления в представлении конструктора окно свойств отображает свойства этого конкретного элемента управления и позволяет вносить изменения без ввода.

panel2

Исходный файл для примера выглядит следующим образом: 

<form id="form1" runat="server">
   <div>
      <asp:Panel ID="pnldynamic" runat="server" BorderColor="#990000" 
         BorderStyle="Solid" Borderstyle="width:1px" Height="150px"  ScrollBars="Auto" style="width:60%" BackColor="#CCCCFF"  Font-Names="Courier" HorizontalAlign="Center">
     
         This panel shows dynamic control generation:
         <br />
         <br />
      </asp:Panel>
   </div>

   <table style="width: 51%;">
      <tr>
         <td class="style2">No of Labels:</td>
         <td class="style1">
            <asp:DropDownList ID="ddllabels" runat="server">
               <asp:ListItem>0</asp:ListItem>
               <asp:ListItem>1</asp:ListItem>
               <asp:ListItem>2</asp:ListItem>
               <asp:ListItem>3</asp:ListItem>
               <asp:ListItem>4</asp:ListItem>
            </asp:DropDownList>
         </td>
      </tr>

      <tr>
         <td class="style2"> </td>
         <td class="style1"> </td>
      </tr>

      <tr>
         <td class="style2">No of Text Boxes :</td>
         <td class="style1">
            <asp:DropDownList ID="ddltextbox" runat="server">
               <asp:ListItem>0</asp:ListItem>
               <asp:ListItem Value="1"></asp:ListItem>
               <asp:ListItem>2</asp:ListItem>
               <asp:ListItem>3</asp:ListItem>
               <asp:ListItem Value="4"></asp:ListItem>
            </asp:DropDownList>
         </td>
      </tr>

      <tr>
         <td class="style2"> </td>
         <td class="style1"> </td>
      </tr>

      <tr>
         <td class="style2">
            <asp:CheckBox ID="chkvisible" runat="server" 
               Text="Make the Panel Visible" />
         </td>

         <td class="style1">
            <asp:Button ID="btnrefresh" runat="server" Text="Refresh Panel" 
               style="width:129px" />
         </td>
      </tr>
   </table>
</form>

Код за событием Page_Load отвечает за динамическую генерацию элементов управления: 

public partial class _Default : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {
      //make the panel visible
      pnldynamic.Visible = chkvisible.Checked;

      //generating the lable controls:
      int n = Int32.Parse(ddllabels.SelectedItem.Value);
      for (int i = 1; i <= n; i++)
      {
         Label lbl = new Label();
         lbl.Text = "Label" + (i).ToString();
         pnldynamic.Controls.Add(lbl);
         pnldynamic.Controls.Add(new LiteralControl("<br />"));
      }
      
      //generating the text box controls:

      int m = Int32.Parse(ddltextbox.SelectedItem.Value);
      for (int i = 1; i <= m; i++)
      {
         TextBox txt = new TextBox();
         txt.Text = "Text Box" + (i).ToString();
         pnldynamic.Controls.Add(txt);
         pnldynamic.Controls.Add(new LiteralControl("<br />"));
      }
   }
}

При выполнении панель отображается как:

105
Share: