آموزش کنترل panel: دربرگیرنده ی کلیه ی کنترل های روی صفحه – ASP.NET

سلام خدمت شما کاربرای عزیز ، امیدوارم که خوب و سلامت با آموزشهای ما همراه باشید. امروز میخوام در  مورد Contorl panel به صورت کلی  توضیح بدم.Panel control کنترلی است که به مثابه ی یک ظرف (دربرگیرنده) برای دیگر کنترل های موجود در صفحه عمل می کند. کنترل نام برده ظاهر و قابلیت رویت (visibility) کلیه ی کنترل های فرزند (کنترل های دربرگرفته شده) را مدیریت می کند.

Panel control همچنین قابلیت ایجاد کنترل ها را به صورت programmaticallyدر اختیار برنامه نویس قرار می دهد (به برنامه نویس اجازه می دهد panel control را با برنامه نویسی ایجاد کند).

نحوه ی نگارش (syntax) کلی کنترل ذکر شده به شرح زیر می باشد:

<asp:Panel ID= “Panel1” runat = “server”>

</asp:Panel>

کنترل Panel از کلاس WebControl مشتق شده است، بهمین دلیل کلیه ی خواص (properties)، متدها، رخدادهای (event) کلاس مزبور را به ارث می برد. کنترل panel هیچ متد یا رخدادی از خود ندارد. اما این امر در مورد خواص (properties) صادق نیست. همان طور که ذیل مشاهده می کنید، کلاس Panel دارای خاصیت های زیر می باشد:

نحوه ی کار با Panel Control

ابتدا به ایجاد یک panel با قابلیت scroll که دارای طول و عرض مشخص است و همچنین خاصیت border    style (خاصیت سبک دهی به خط حاشیه) به آن اعمال شده خواهیم پرداخت. در این مثال خاصیت ScrollBars به هر دو نوار پیمایش (scrollbar) اعمال شده (برای آن تنظیم شده)، از این رو هر دو نوار پیمایش render (بارگذاری شده و نمایش داده) می شوند.

فایل منبع دارای کد زیر برای تگ panel می باشد:

<asp:Panel ID=”Panel1″ runat=”server” BorderColor=”#990000″ BorderStyle=”Solid”

Height=”116px” ScrollBars=”Both” style=”border-width:1px; width:278px”>

This is a scrollable panel.

<br />

<br />

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

</asp:Panel>

Panel به صورت زیر render می شود:

مثال:

مثال زیر نحوه ی تولید محتوا به صورت پویا (dynamic content generation) را به نمایش می گذارد. کاربر تعداد کنترل های label و textbox که باید در panel ایجاد شوند را تعیین می کند. توجه داشته باشید که کنترل ها با برنامه نویسی (به صورت programmatically) تولید یا ساخته می شوند.

با استفاده از پنجره ی properties، خاصیت های panel را تغییر دهید. هنگامی که یک کنترل را در design view انتخاب می کنید، پنجره ی properties کلیه ی خاصیت های آن کنترل را نمایش داده و به شما امکان می دهد بدون نیاز به تایپ کردن تغییرات و اصلاحات لازم را انجام دهید.

فایل منبع (source file) مثال فوق به صورت زیر می باشد:

<form id=”form1″ runat=”server”>

<div>

<asp:Panel ID=”pnldynamic” runat=”server” BorderColor=”#990000″

BorderStyle=”Solid” Height=”150px” ScrollBars=”Auto” Style=”width:1px; 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” OnClick=”btnrefresh_Click” />

</td>

</tr>

</table>

</form>

Code behind (متن برنامه / source code) رخداد Page_Load مسئول ایجاد و تولید کنترل ها به صورت پویا (dynamic) می باشد:

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 />”));

}

} }

پس از اجرا، panel به صورت زیر بارگذاری و نمایش داده (render) می شود: