در این مقاله نحوه نوشتن یک listbox دلخواه با قابلیت تعیین موارد Style برای گزینه های آن بصورت جداگانه ارائه شده است.
——————————————————————————–
در این مقاله آموزشی سعی خواهد شد تا نحوه ساخت و برنامه نویسی کنترلهای دلخواه در ASP.NET نشان داده شود. این کار با در نظر گرفتن طراحی یک ListBox خاص که دارای این قابلیت هست که بتوان رنگ متن و پس زمینه برخی از گزینه های آن را به دلخواه تعیین کرد، انجام می گردد.
کاربرد چنین کنترلی بسته به نیاز و سلیقه شما می تواند متفاوت باشد. مثلا ممکن است در برنامه ای بخواهید گزینه های مرتبط با هم را دسته بندی کرده و هر دسته را با رنگ پس زمینه خاصی نشان دهید. این مساله می تواند در تشخیص یا یافتن سریعتر گزینه های خاصی به کاربر کمک کند.
شاید این سوال برای شما پیش آید که چه احتیاجی به نوشتن یک کنترل ListBox جدید است و مثلا می توان مانند زیر عمل کرد:
ListItem item;
for(int i = 1; i<=10; i++)
{
item = new ListItem ();
item.Value = i.ToString ();
item.Text = “Item” + i.ToString ();
item.Attributes.Add (“Style”, “background-color: #0000ff;color: #ffffff”);
myListBox.Items.Add (item);
}
اما نکته جالب اینجاست که کد برنامه فوق کار نمی کند! بعبارت دیگر صفت Style برای کلاس ListItem در زمان تولید کد HTML اصطلاحا render نمی شود و به آن ترتیب اثری داده نمی شود. شاید این مساله در نسخه های بعدی ASP.NET رفع شود یا اینکه اصولا این رفتار برای کنترل ListBox براساس طرح آن درست باشد.
بهرحال این مساله به هر شکلی که تعبیر شود برای ما بهانه خوبی است که اصولا نحوه نوشتن کنترلهای دلخواه و پیشرفته تر را بطور کلی یاد بگیریم و توان و مهارت خود را در این زمینه افزایش دهیم. دقت داشته باشید که یک برنامه نویس حرفه ای ASP.NET نمی تواند مصرف کننده صرف کنترلهای استاندارد یا از پیش تهیه شده توسط دیگران باشد، بلکه لازم است که او خود هم گاهی وقتها آستین را بالا زده و به این جمع بپیوندد و کنترلهای خاص مورد نیاز خود یا دیگران را تولید کند.
به جهت اینکه قطعه برنامه فوق کار کند و منظور ما را برآورده سازد لازم است که اندکی در کار ListBox استاندارد ASP.NET دخالت کرده و کد render آن را دستکاری کنیم. خیالتان راحت باشد ما هیچگونه دسترسی به سورس ListBox نداریم! تنها کافی است اندکی ابتکار شئ گرایی خود را به کار انداخته و این کار را با استفاده از مفهوم وراثت یا Inheritance انجام دهیم. (خدا را شکر که دات نت شئ گراست!)
بدین منظور یک کلاس جدید به نام StyledListBox تعریف می کنیم و این کلاس را از کلاس اصلی و استاندارد ListBox به ارث می گیریم. قطعه کد زیر چگونگی این کار را با استفاده از زبان #C به شما نشان می دهد:
[C#]
using System;
using System.Collections;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ColoredListBox
{
/// <summary>
/// Summary description for StyledListBox.
/// </summary>
public class StyledListBox : System.Web.UI.WebControls.ListBox
{
}
}
می بینید که این کار چقدر ساده است. ColoredListBox نام فضانام یا نامکده ما است و شما می توانید نام دلخواه خود را استفاده کنید. نام کلاس جدید ما StyledListBox است که بصورت public تعریف شده است تا همگان بتوانند از آن استفاده کنند. پدر کلاس ما اینجا همان ListBox استاندارد ASP.NET یعنی System.Web.UI.WebControls.ListBox می باشد و ما با این کار کلیه ویژگیها و متدهای ListBox را مال خود کرده ایم.
بدنه این کلاس خالی است و دارائی های ListBox برای هدف ما کافی نیستند و قابلیتهای دیگری را نیز می خواهیم. بعبارت دیگر در دارائی های ListBox منظور نشده است که گزینه ها را برای ما رنگی کند و خود ما باید این ویژگی را به قدرت و توان ListBox اضافه کنیم.
برای این کار تنها کافیست متد RenderContents مربوط به ListBox را بازنویسی کنیم. در زیر شکل کامل این کلاس را می بینیم:
[C#]
using System;
using System.Collections;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ColoredListBox
{
/// <summary>
/// Summary description for StyledListBox.
/// </summary>
public class StyledListBox: System.Web.UI.WebControls.ListBox
{
override protected void RenderContents(HtmlTextWriter writer)
{
for(int c=0;c<Items.Count;c++)
{
ListItem i = Items[c];
writer.WriteBeginTag(“option”);
if(i.Selected)
writer.WriteAttribute(“selected”,”selected”,false);
writer.WriteAttribute(“value”,i.Value,true);
IEnumerator d = Items[c].Attributes.Keys.GetEnumerator();
while(d.MoveNext())
writer.WriteAttribute(d.Current.ToString(),Items[c].Attributes[d.Current.ToString()]);
writer.Write(‘>’);
System.Web.HttpUtility.HtmlEncode(i.Text,writer);
writer.WriteEndTag(“option”);
writer.WriteLine();
}
}
}
}
از قیافه کد برنامه فوق نترسید! اگر اندکی با کلاس HtmlTextWriter بیشتر آشنا شوید خواهید دید که این متد چقدر ساده و در عین حال جالب است. عمده کاری که در این متد انجام شده است این است که علاوه بر صفتهای استاندارد گزینه های یک listbox مانند value و selected، سعی کرده ایم تا کلیه صفات یا Attributeهای آن را هم در کد HTML بنویسیم، کاری را که ظاهرا خودِ ListBox نکرده یا نخواسته یا حداقل ما آن را نمی دانیم! این کار با دو خط زیر انجام شده است:
[C#]
IEnumerator d = Items[c].Attributes.Keys.GetEnumerator();
while(d.MoveNext())
writer.WriteAttribute(d.Current.ToString(),Items[c].Attributes[d.Current.ToString()]);
حالا وقت آن است که نحوه کاربرد این کلاس را هم بیان کنیم. جهت این کار کافی است همانند ListBox معمولی عمل کرده منتها listbox خود را از نوع ColoredListBox.StyledListBox تعریف کرده و رنگ دلخواه خود را برای گزینه های مختلف تعریف کنیم. به فایل codebehind زیر توجه فرمائید.
[C#]
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace ColoredListBox
{
/// <summary>
/// Summary description for WebForm1.
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected StyledListBox ListBox1;
private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
ListItem item;
item = new ListItem (“IranASP.NET 1″, “1″);
item.Attributes.Add (“Style”, “background-color:#39B54A; color:#ffffff”);
this.ListBox1.Items.Add (item);
item = new ListItem (“IranASP.NET 2″, “2″);
item.Attributes.Add (“Style”, “color:#0000ff”);
this.ListBox1.Items.Add (item);
item = new ListItem (“IranASP.NET 3″, “3″);
item.Attributes.Add (“Style”, “background-color:#ff0000; color:#ffffff”);
this.ListBox1.Items.Add (item);
}
}
}
تنها یک کار دیگر باقی مانده است و آن تغییر کد فایل aspx در مورد نحوه تعریف کنترل listbox مورد نظر است. ابتدا باید خط زیر را در بالای فایل مذکور قرار دهید تا بدین ترتیب کلاس StyledListBox ما برای این فایل قابل دسترس باشد:
<%@ Register TagPrefix=”iranasp” Namespace=”ColoredListBox” Assembly=”ColoredListBox” %>
در اینجا همانند تعریف یک کنترل کاربری یا User Control عمل کرده ایم. حال listbox خود را بصورت زیر تعریف می کنیم:
<iranasp:StyledListBox id=”ListBox1″ runat=”server”></iranasp:StyledListBox>
و همین!
نکته: اگر دقت کرده باشید علاوه بر رنگ می توان هر نوع صفت موجود در خصیصه Style را برای گزینه های این listbox تعریف نمود.
دیدگاه خود را بیان کنید.
باید وارد سایت شده باشید برای دیدگاه دادن