كنترل های پويا در ASP.NET

كنترل های سرويس دهنده معمولا" در زمان طراحی و با توجه به نياز يك برنامه در صفحات ASP.NET قرار می گيرند . در چنين مواردی ، پياده كنندگان در زمان طراحی نسبت به تعداد و نوع كنترل های سرويس دهنده مورد نياز آگاهی كامل دارند . به عبارت ديگر ، دانش لازم برای استفاده از كنترل ها در زمان طراحی وجود دارد . در برخی موارد ممكن است دانش لازم به منظور استفاده از كنترل ها ( نوع و يا تعداد كنترل مورد نياز ) در زمان طراحی وجود نداشته باشد . اين وضعيت در مواردی كه اطلاعات صفحه از طريق منابع داده خارجی تامين می گردد ، بسيار مشهود می باشد .
به عنوان نمونه ، فرض كنيد می خواهيم دكمه هائی را بر روی يك فرم وب توليد نمائيم كه با كليك بر روی هر از آنها ، كتاب های موجود در بانك اطلاعاتی مرتبط با آن گروه خاص ، نمايش داده شوند . تعداد button مورد نياز به تعداد گروه های تعريف شده در بانك اطلاعاتی ، بستگی خواهد داشت . با اين كه در زمان طراحی ممكن است شش گروه كتاب در بانك اطلاعاتی وجود داشته باشد ، ولی ممكن است متناسب با رشد اطلاعات در بانك ، گروه های جديدی تعريف و يا برخی گروه ها حذف گردند . در چنين مواردی ، تعداد button ايجاد شده بر روی فرم متاثر از تعداد گروه های تعريف شده در بانك اطلاعاتی است . بديهی است تا زمانی كه به بانك اطلاعاتی دستيابی نشده باشد نمی توان به اطلاعات مورد نياز جهت ايجاد buttons دستيابی داشت . به عبارت ديگر ، هدف ايجاد buttons در زمان اجراء است نه در زمان طراحی . در چنين مواردی ، كنترل ها به صورت پويا و در زمان استقرار صفحه در حافظه ايجاد خواهند شد .

ايجاد كنترل ها با استفاده از اسكريپت

برای ايجاد يك كنترل با استفاده از اسكريپت در ابتدا می بايست يك شی كنترل را به عنوان يك نوع كنترل تعريف نمود . نوع كنترل را می توان يكی از نوع های استاندارد كنترل های سرويس دهنده در نظر گرفت . مثلا" برای يك ايجاد يك كنترل <asp:label> ، می بايست آن را به عنوان يك نوع label ، برای ايجاد يك كنترل <asp:button> ، آن را به عنوان يك نوع button و برای ايجاد يك كنترل <asp:TextBox> آن را به عنوان يك نوع TextBox تعريف كرد .
كد زير نحوه تعريف يك كنترل را نشان می دهد :

Dim MyLabel    As  New Label Dim MyButton   As  New Button Dim MyTextBox As  New TextBox

كنترل <asp:PlaceHolder>

پس از ايجاد يك كنترل ، به منظور نمايش آن بر روی صفحه می بايست آن را به يكی از مجموعه های Controls اضافه نمود . صفحه، دارای يك مجموعه كنترل با نام page.collection است كه تمامی كنترل های موجود در يك صفحه و ساير كنترل های جديدی را كه در ادامه می توان به اضافه نمود را شامل می شود . معمولا" ترجيح داده می شود كه يك ناحيه خاص بر روی صفحه تعريف و در ادامه كنترل های جديدی را به آن اضافه نمود .
كنترل <asp:PlaceHolder> ، ناحيه ای را مشخص می نمايد كه می توان كنترل های ايجاد شده به صورت پويا را در آن قرار داد . با نسبت دادن يك كنترل به مجموعه كنترل PlaceHolder ، امكان مشاهده كنترل بر روی صفحه فراهم می گردد .
كد زير نحوه ايجاد يك كنترل PlaceHolder را نشان می دهد .

<asp:PlaceHolderid="id" Runat="Server"/>

كنترل PlaceHolder خود فضائی را بر روی صفحه اشغال نخواهد كرد و صرفا" ناحيه ای را بر روی صفحه به منظور افزودن كنترل های پويا ، رزو می نمايد . به كنترل فوق می بايست يك id نسبت داده شود تا امكان دستيابی به آْن از طريق اسكريپت فراهم گردد .

اضافه كردن كنترل به يك PlaceHolder

پس از تعريف يك PlaceHolder ، با استفاده از متد Add می توان كنترل مورد نظر را به آن اضافه نمود . كد زير نحوه استفاده از متد Add كنترل PlaceHolder را نشان می دهد .

PlaceholderId.Controls.Add(Control)

PlaceHolderId ، شناسه ( id ) كنترل PlaceHolder است كه از طريق آن می توان به كنترل دستيابی داشت. Control ، نام كنترلی كه می بايست به صورت پويا به صفحه اضافه گردد .
در مثال زير‌ ، يك PlaceHolder تعريف و در ادامه يك كنترل label جديد ايجاد و به PlaceHolder اضافه شده است .

<SCRIPT Runat="Server"> Sub Page_Load  Dim MyLabel As New Label  MyPlaceHolder.Controls.Add(MyLabel) End Sub </SCRIPT> <form Runat="Server"> <asp:PlaceHolder id="MyPlaceHolder" Runat="Server"/> </form>

كنترل label بر روی صفحه و در مكان مشخص شده توسط PlaceHolder نمايش داده می شود . در ادامه می توان كنترل های ديگری را با استفاده از اسكريپت توليد و به PlaceHolder اضافه نمود ( در خطوط بعد از كنترل label نمايش داده می شوند ) . در صورت نياز می توان چندين كنترل PlaceHolder را تعريف و در مكان های مختلف صفحه مستقر نمود تا در ادامه بتوان كنترل های توليد شده توسط اسكريپت را در هر يك از آنها با توجه به ضرورت های موجود ، اضافه نمود .
با توجه به اين واقعيت كه كنترل های توليد شده توسط اسكريپت به عنوان بخشی از view state صفحه در نظر گرفته نخواهند شد ، می بايست برای ايجاد آنها از روتين Page_load استفاده گردد .

دستيابی به خصلت های يك كنترل توسط اسكريپت

در مثال قبل ، كنترل label به صورت پيكربندی پيش فرض و بدون هيچگونه تنظميات خاصی بر روی صفحه نمايش داده می شود . در صورت تمايل می توان خصلت های مرتبط با يك كنترل را به صورت پويا و به كمك اسكريپت مقداردهی نمود .
كد زير ، بازنويسی مثال قبلی است كه در ابتدا خصلت های متعدد كنترل label مقداردهی و در ادامه كنترل فوق به مجموعه كنترل های PlaceHolder اضافه شده است .

<%@ Import Namespace="System.Drawing" %> <SCRIPT Runat="Server"> Sub Page_Load   Dim MyLabel As New Label   MyLabel.id = "Label01"   MyLabel.Text = "اين كنترل توسط اسكريپت توليد شده است"   MyLabel.ForeColor = Color.FromName("blue")   MyLabel.Font.Bold = True   MyLabel.Font.Size = FontUnit.Parse("14pt")   MyPlaceHolder.Controls.Add(MyLabel) End Sub </SCRIPT> <form Runat="Server"> <asp:PlaceHolder id="MyPlaceHolder" Runat="Server"/> </form>

توليد رويدادهای كنترل توسط اسكريپت

در مواردی‌ كه كنترل هائی نظير Button كه به كمك آنها می توان اسكريپت های موجود در يك برنامه را فعال نمود به صورت پويا ايجاد می گردند ، می بايست event handler مورد نظر را به منظور فراخوانی برنامه فرعی نيز مشخص نمود . برای ايجاد يك event handler توسط اسكريپت از كد زير استفاده می گردد .

AddHandler Control.Event, AddressOf Subprogram

control ، نام كنترلی است كه event handler به آن نسبت داده خواهد شد . Event ، نوع Event handler را مشخص می نمايد ( مثلا" Click ) و Subprogram ، نام روتينی است كه پس از بروز رويداد می بايست فعال گردد .
در مثال زير ، پس از تعريف يك Buuton و تنظيم خصلت های آن در زمان اجراء ، يك event handler نيز تعريف شده است تا پس از كليك بر روی دكمه فوق ، روتين مورد نظر فعال (My_Subprogram ) و پاسخگوی رويداد ايجاد شده باشد .

Dim MyButton As New Button MyButton.id = "Button1" MyButton.Text = "Click Me" AddHandler MyButton.Click, AddressOf My_Subprogram MyPlaceHolder.Controls.Add(MyButton)

در مثال فوق ، يك handler برای رويداد Click به كنترل Button اضافه شده است . My_Subprogram ، روتينی است كه پس از بروز رويداد ( كليك بر روی button ) ، فعال و پاسخگوی رويداد ايجاد شده است .
پس از اين كه يك Button به صفحه اضافه گرديد ( در مكان MyPlaceHolder ) ، عملكرد آن مشابه زمانی است كه از يك Button در زمان طراحی استفاده شده باشد:

<asp:Button id="Button1" Text="Click Me" OnClick="My_Subprogram" Runat="Server"/>

نوع رويداد توليد شده توسط اسكريپت كه می توان آن را به كنترل ها اضافه نمود ، همانند event handler استفاده شده به همراه كنترل ها در زمان طراحی است . مثلا" كنترل button قادر به تشخيص دو event handler با نام OnClick و OnCommand است . بنابراين ، می توان با استفاده از اسكريپت دو رويداد فوق را برای يك button توليد نمود . زمانی كه يك رويداد Command توسط اسكريپت توليد می گردد ، می توان خصلت های CommandName و CommandArgument را نيز برای button تنظيم نمود .

كنترل سرويس دهنده <asp:Literal >

در زمان كدينگ برنامه های وب به مواردی برخورد خواهيم كرد كه لازم است متن و يا تگ های XHTML را به يك PlaceHolder به منظور كمك در مديريت و فرمت كنترل هائی كه به صورت پويا ايجاد شده اند ، اضافه نمائيم . به عنوان نمونه ، ممكن است لازم باشد كه يك پاراگراف ، خطوط خالی و يا كاراكترهای خاصی را به همراه كنترل ها استفاده نمائيم تا آنها با يك فرمت مناسب بر روی صفحه نمايش داده شوند . با توجه به اين كه متن ، رشته و يا تگ های XHTML را نمی توان در PlaceHolder قرار داد ، می بايست آنها را توسط اسكريپت در زمان ايجاد كنترل ها به PlaceHolder اضافه نمود . در چنين مواردی می توان از كنترل <asp:Literal > استفاده نمود .
ايجاد كنترل Literal توسط اسكريپت همانند ساير كنترل های سرويس دهنده در ASP.NET است . بدين منظور كافی است كه كنترل به عنوان يك كنترل Literal تعريف و به خصلت Text آن يك متن و يا رشته مبتنی بر XHTML نسبت داده شود و در ادامه آن را به PlaceHolder اضافه كرد .از كنترل های Literal به تعداد مورد نياز می توان در يك PlaceHolder استفاده نمود .
در كد زير ، يك كنترل Literal تعريف تا در ادامه يك خط خالی در بين ساير كنترل های پويای ايجاد شده ، اضافه نمايد .

Dim MyBreak As Literal MyBreak.Text = "<br/>" MyPlaceHolder.Controls.Add(MyBreak)

مثال : ايجاد كنترل های سرويس دهنده با استفاده از اسكريپت

در اين مثال قصد داريم متناسب با هر يك از گروه مقالات تعريف شده در بانك اطلاعاتی مقالات ، دكمه هائی را بر روی يك فرم وب قرار دهيم تا كاربران پس از كليك بر روی هر يك از آنها ، مقالات مربوط به گروه انتخابی را مشاهده نمايند .دكمه ها به صورت پويا و در زمان اجراء ايجاد خواهند شد و متناسب با تغيير داده موجود در بانك ، وضعيت آنها نيز تغيير خواهد كرد .
بدين منظور از يك بانك اطلاعاتی اكسس با نام Maghalat_Srco.mdb كه شامل دو جدول Article_Type و Article_Spec است ، استفاده خواهيم كرد . در اولين جدول با نام Article_Type ، گروه های مختلف مقالات ذخيره می گردد .

جدول Article_Type
نام فيلد	نوع
Group_ID	AutoNumber، PrimeryKey
Name	Text
Description	Text

در جدول دوم با نام Article_Spec ، مشخصات هر يك از مقالات ذخيره می گردد .

جدول Article_Spec
نام فيلد	نوع
Article_ID	AutoNumber، PrimeryKey
Group_ID	Number , Integer
Title	Text

در ادامه يك فرم وب با نام Show_Article_By_Group.aspx را ايجاد می نمائيم كه در هر يك از بخش های Script و Html آن از امكانات متعددی استفاده شده است .
در بخش Html از سه كنترل سرويس دهنده با اهداف زير استفاده شده است :
• <asp:PlaceHolder> : تعريف يك ناحيه برای نمايش كنترل هائی كه آنها را به صورت پويا و در زمان اجراء متناسب با داده موجود در بانك اطلاعاتی ايجاد خواهيم كرد . در اين مثال ، برای هر گروه مقاله تعريف شده در بانك اطلاعاتی يك button به صورت پويا ايجاد خواهد شد .
• <asp:AccessDataSource> : با استفاده از كنترل منبع داده فوق ، به بانك اطلاعاتی Maghalat_Srco.mdb دستيابی و در اولين مرتبه ( زمان استقرار صفحه در حافظه و از طريق روتين page_Load ) ، متناسب با داده موجود در جدول Article_Type ، دكمه های مورد نظر را ايجاد خواهيم كرد . از كنترل فوق در مرتبه دوم و از طريق روتين Get_Articles نيز استفاده خواهد شد تا متناسب با دكمه ای كه كاربر بر روی آن كليك نموده است ، مقالات مربوط به آن گروه از جدول Article_Spec بازيابی و در Gridview نمايش داده شوند .
• <asp:GridView> : از كنترل فوق به منظور نمايش مقالات مربوط به يك گروه خاص استفاده می گردد ( ساده ترين نوع استفاده از يك GridView ) .

در بخش script از دو روتين Page_Load و Get_Article با اهداف زير استفاده شده است .
• Page_Load : در اين روتين ، پس از دستيابی به بانك اطلاعاتی اشاره شده ، اطلاعات موجود در جدول Article_Type بازيابی و متناسب با داده موجود ، دكمه هائی برای هر يك از گروه مقالات ايجاد خواهد شد . علاوه بر ايجاد پويای هر button ، سبك نمايش Button و توليد Event handler مورد نياز ( Get_Articles ) نيز از طريق اين روتين انجام خواهد شد .
• Get_Articles : در اين روتين ، متناسب با اين كه كاربر بر روی كدام button كليك نموده است ، يك query به صورت پويا و پارامتريك ايجاد و اجراء می گردد . در نهايت زمينه نمايش ركوردهای بازيابی شده در Gridview نيز فراهم می گردد .

<%@ Import Namespace="System.Data.OleDb" %> <%@ Import Namespace="System.Drawing" %> <SCRIPT Runat="Server"> Sub Page_Load Dim DBConnection As OleDbConnection Dim DBCommand As OleDbCommand Dim DBReader As OleDbDataReader Dim SQLString As String Dim Counter As Integer = 0 DBConnection = New OleDbConnection( _ "Provider=Microsoft.Jet.OLEDB.4.0;" & _ "Data Source=" & Server.MapPath("~/OurDataBase/Maghalat_Srco.mdb")) DBConnection.Open() SQLString = "SELECT DISTINCT Group_ID , Name FROM Article_Type order by Name" DBCommand = New OleDbCommand(SQLString, DBConnection) DBReader = DBCommand.ExecuteReader() While DBReader.Read()   Dim MyButton as New Button   MyButton.Text = DBReader("Name")   MyButton.CommandName = DBReader("Group_ID")   MyButton.Width = Unit.Parse("100px")   MyButton.Font.Size = FontUnit.Parse("8pt")   MyButton.Font.Name = "Tahoma"   AddHandler MyButton.Command, AddressOf Get_Articles   ButtonArea.Controls.Add(MyButton)   Dim MyBlank As New Literal   MyBlank.Text = "&nbsp;&nbsp;"   ButtonArea.Controls.Add(MyBlank)   Counter += 1   If Counter Mod 3 = 0 Then       Dim MyBreak As New Literal       MyBreak.Text = "<br/>"       ButtonArea.Controls.Add(MyBreak)   End If End While DBReader.Close() DBConnection.Close() End Sub Sub Get_Articles (Src as Object, Args As CommandEventArgs) Dim SQLString As String SQLString = "SELECT Title ,Description FROM Article_Spec " & _ "WHERE Group_ID = " & Args.CommandName & " ArticlesSource.SelectCommand = SQLString End Sub </SCRIPT> <form Runat="Server"> ايجاد كنترل های سرويس دهنده به صورت پويا <asp:PlaceHolder id="ButtonArea" Runat="Server"/> <asp:AccessDataSource id="ArticlesSource" Runat="Server"     DataFile="~/OurDataBase/Maghalat_Srco.mdb"     SelectCommand="SELECT Title , Description FROM Article_Spec "/> <asp:GridView id="BookGrid" DataSourceID="ArticlesSource" Runat="Server" /> </form>

توضيحات

• پس از استقرار صفحه در حافظه ، بانك اطلاعاتی فعال و متناسب با داده موجود در جدول Article_Type ، برای هر گروه مقاله يك button ايجاد خواهد شد .
• برای هر ركورد يك شی جديد Button ايجاد و به خصلت Text آن ، مقدار Name ( مربوط به ركورد بازيابی شده كه نشاندهنده نام گروه مقاله است ) نسبت داده می شود . برای نمايش مطلوب Button ، برخی خصلت های آن مقداردهی می گردند ( نظير نوع فونت و يا اندازه آن ) .
• با توجه به اين كه دكمه ها به عنوان يك Command button پيكربندی شده اند ، خصلت CommandName معادل Group_ID در نظر گرفته شده و در ادامه مقدار Group_ID به روتين Get_Articles ارسال تا مقالات مربوط به گروه انتخابی را در يك GridView نمايش دهد .
• يك Command Event توسط اسكريپت برای button مشخص می گردد كه به برنامه فرعی Get_Articles اشاره می نمايد . در نهايت ، button به PlaceHolder اضافه می شود .
• از طريق حلقه تكرار ، هر يك از دكمه ها ايجاد و به PlaceHolder اضافه می شوند . در اين مثال ، شش button ايجاد خواهد شد چراكه جدول Article_Type حاوی شش ركورد است ( شش نوع گروه برای مقالات تعريف شده است ) و متناسب با كاهش و يا افزايش گروه مقالات تعداد Button بر روی فرم وب تغيير خواهد كرد.
• بلافاصله پس از هر Button يك زوج فضای خالی به منظور تفكيك افقی دكمه ها از يكديگر قرار می گيرد . بدين منظور از كنترل Literal كه مقدار خصلت Text آن معادل "nbsp;&nbsp&" در نظر گرفته شده است ، استفاده می گردد . اين كنترل پس از اين كه يك Button در PlaceHolder مستقر گرديد ، در مكان مربوطه درج خواهد شد .
• همچنين از يك خط خالی پس از نمايش سه button در هر سطر ، استفاده شده است . اين كاراكتر با استفاده از يك كنترل Literal به PlaceHolder اضافه شده است كه مقدار خصلت آن " </br >" در نظر گرفته شده است .
• از يك شمارنده برای تشخيص اضافه شدن يك Literal به PlaceHolder استفاده شده است تا به كمك آن بتوانيم تشخيص دهيم كه آيا در يك سطر سه Button نمايش داده شده است و يا خير.
در صورتی كه عبارت Counter Mod 3 = 0 درست باشد يك خط خالی به كمك كنترل Literal به PlaceHolder اضافه خواهد شد .