آموزش ASP.Net

آموزش ASP.Net - قاب های کنترل

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

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

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

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

خواص

شرح

BackImageUrl

آدرس url تصویر پس زمینه ی مورد نظر کنترل panel را خوانده و مقداردهی می کند. به واسطه ی این property می توان یک تصویر پس زمینه برای کنترل panel انتخاب کرد. مقدار پیش فرض String.Empty می باشد.

DefaultButton

شناسه (identifier) دکمه ی پیش فرض را که در کنترل Panel گنجانده شده (در آن کنترل قرار دارد) خوانده و مقداردهی می کند.

Direction

جهت نمایش متن یا کنترل های دربرگیرنده ی متن را در panel خوانده و مقداردهی می کند. پیش فرض NotSet می باشد.

GroupingText

این خاصیت caption (عنوان) مجموعه (گروه) کنترل هایی که در control panel گنجانده می شوند را خوانده و مقداردهی می کند. به وسیله ی این property می توان یک frame (قاب) به همراه یک عنوان (caption) ویژه ی کنترل های موجود در کنترل panel ایجاد کرده و نمایش داد.

HorizontalAlign

این خاصیت محتویات (content) موجود در کنترل panel را به صورت افقی (با نمای افقی) نمایش می دهد.

ScrollBars


این خاصیت قابلیت رویت و مکان قرار گیری نوار پیشماش (scrollbar) را داخل panel تعیین می کند.

Wrap

با بهره گیری از این خاصیت می توان تعیین کرد چنانچه متن یا نوشته ای طولانی بود آن را به دو قسمت تبدیل کرده و قسمت دوم را داخل خط بعدی قرار داد تا از این طریق کل محتوا داخل panel جای گیرد. 


نحوۀ کار با  Panel Control

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

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

<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>

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

panel

 

مثال

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

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

panel 2

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

<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>

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) می شود:

panel 3

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش ASP.Net

Learn ASP.Net

سرفصل ها

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...