صفحه بندی در دیتالیست

کنترل های داده ای مانند Gridview , DataGrid , DataList Repeater ,… کنترل هایی با کارایی و استفاده خیلی زیاد می باشند.

همانطور که می دانید کنترل Gridview و DataGrid دارای خاصیت مهم صفحه بندی می باشند .

این کنترل ها جزء پر کاربرترین کنترل های وب می باشند ، متاسفانه این کنترل ها فقط قادرند داده ها را به صورت سطر سطر نمایش دهند و قادر نیستند داده ها را در ستون ها چینش دهند . برای همین منظور برای چینش صفحه به صورت ستونی از کنترل دیتالیست استفاده می کنیم .

ولی بر خلاف Gridview کنترل Datalist قادر به صفحه بندی نمی باشد .

در این مقاله قصد دارم روشی برای صفحه بندی دیتالیست ارائه دهم ، روش های زیادی برای این کار وجود دارد ولی بنده سعی می کنم که ساده ترین روش را ارائه دهم .

خوب در این مقاله یک گالری عکس طراحی می کنیم که تصاویر را به صورت سطری و ستونی در یک دیتالیست نمایش دهد و سپس این دیتالیس را صفحه بندی خواهیم کرد .

ابتدا یک بانک اطلاعاتی Access بسازید و داخل آن یک جدول به نام MyImages ساخته که شامل 2 ستون Name و Description می باشد . ستون Name برای ذخیره نام تصویر (مثلا ali.jpg) و ستون Description توضیح فارسی برای تصویر می باشد .

هر دوستون را از نوع Text انتخاب نمایید .

یک پروژه Asp.NET جدید ایجاد کنید فایل Access را با نام MyDb و در پوشه App_Data پروژه ذخیره کنید .

یک پوشه به نام Images برای ذخیره سازی عکس ها قرار دهید . چند عکس دلخواه در این پوشه قرار داده و نام آن ها را (مثلا ali.jpg ) در جدول MyImages در بانک ذخیره کنید .

یک صفحه Aspx به نام Default.aspx به پروژه اضافه نمایید . در این صفحه یک دیتالیست قرار دهید و خاصیت RepeatColumns آن را برابر مثلا 2 قرار دهید ( دلخواه ) .

سپس بر روی دیتالیست کلیک راست کرده و گزینه Edit Template و سپس Item Template را انتخاب نمایید .

در خانه Item Template یک کنترل Image ( از نوع سرور ساید ) قرار دهید ( می توانید از داخل ToolBox درگ کنید )

دکمه مثلثی شکل بر روی کنترل Image را فشرده و بر روی لینک Edit DataBindings کلیک نمایید . در پنجره محاوره ای باز شده از لیست سمت چپ ImageUrl را انتخاب نمایید ، از لیست سمت راست در قسمت Code Expression کد زیر را تایپ نمایید

Eval("Name","~/Images/{0})

و اما در کد فوق از یک Formatting نیز استفاده شده است در حقیقت ما به دیتالیست می گوییم که در هر سطر خاصیت ImageUrl را برابر مقدار ~/Images/{0} قرار داده و بجای {0} مقدار متناظر ستون Name را در دیتابیس قرار دهد .

خوب دکمه Ok بفشارید و سپس بر روی دیتالیست کیک راست کرده و End Template Editing را انتخاب نمایید تا ویرایش دیتابیست خاتمه یابد .

حال 2 باتن ( یا اگر مایلید ImageButton یا LinkButton ) بر روی صفحه قرار دهید یکی برای صفحه بعد و یکی برای صفحه قبلی ، آی دی این دو را به ترتیب cmdNext و cmdPrev قرار دهید .

کار ما با صفحه Aspx تقریبا تمام شده است حال وارد CodeBehind یا فایل Aspx.Cs شده و ساب روتین GetData را به صورت زیر می نویسیم :  

private void GetData()
 
{
 
 
 
//----------------------------------------- Part 1
 
 
 
DataTable dt = new DataTable();
 
 
 
using (OleDbConnection con = new OleDbConnection("provider=microsoft.jet.oledb.4.0;data source=|DataDirectory|\\MyDb.mdb"))
 
{
 
OleDbCommand cmd = new OleDbCommand("select * from MyImages", con);
 
 
 
OleDbDataAdapter da = new OleDbDataAdapter(cmd);
 
con.Open();
 
 
 
da.Fill(dt);
 
 
 
con.Close();
 
}
 
 
 
//----------------------------------------- Part 2
 
 
 
PagedDataSource Pd = new PagedDataSource();
 
Pd.DataSource = dt.DefaultView;
 
Pd.AllowPaging = true;
 
Pd.CurrentPageIndex = CurrentPage;
 
Pd.PageSize = 4;
 
 
 
DataList1.DataSource = Pd;
 
DataList1.DataBind();
 
 
 
//----------------------------------------- Part 3
 
 
 
cmdPrev.Enabled = !Pd.IsFirstPage;
 
cmdNext.Enabled = !Pd.IsLastPage;
 
 
 
}

کد فوق از سه بخش تشکیل شده است ، در Part 1 اتصال به دیتابیس و پر کردن DataTable به نام dt صورت گرفته است ( به مقاله بانک های اطلاعاتی مراجعه نمایید ) .

در Part 2 که مهمترین بخش می باشد یک شی از نوع PagedDataSource ایجاد کرده ایم ، این شی دارای خواصی برای صفحه بندی می باشد که برای ما بسیار مطلوب است ، ابتدا خاصیت DataSource آنرا برابر dt قرار داده و خاصیت AllowPaging را فعال کرده ونیز خاصیت PageSize را برابر مثلا 4 قرار می دهیم ( دلخواه ).

سپس خاصیت CurrentPageIndex را برابر پراپرتی CurrentPage قرار می دهیم ( این Property را در ادامه خواهیم ساخت ) این کار به Pd می گوید که در کدام صفحه واقع گردد .

و در نهایت Datalist1 را به وسیله همین PagedDataSource یعنی pd بایند می کنیم .

در Part 3 دکمه cmdPrev در صورتی که در صفحه نخست نباشیم فعال و cmdNext در صورتی که در صفحه آخر نباشیم فعال می گردد .

خوب حال به بررسی خاصیت CurrentPage می پردازیم :

public int CurrentPage
 
{
 
get
 
{
 
 
 
object o = this.ViewState["_CurrentPage"];
 
if (o == null)
 
return 0;
 
else
 
return (int)o;
 
}
 
 
 
set
 
{
 
this.ViewState["_CurrentPage"] = value;
 
}
 
}

این Property از دو بخش Get و Set تشکیل شده ، در بخش Get یک ViewState برای نگهداری شماره CurrentPageIndex یا ایندکس صفحه جاری می سازیم .

در صورتی که این ViewState وجود نداشته باشد مقدار 0 یعنی صفحه اول برگردانده می شود در غیر این صورت مقدار خود ViewState برگشت می خورد .

در بخش Set مقدار مورد نظر ما داخل ViewState ذخیره می گردد .

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

protected void cmdNext_Click(object sender, EventArgs e)
 
{
 
CurrentPage += 1;
 
GetData();
 
 
 
}
 
protected void cmdPrev_Click(object sender, EventArgs e)
 
{
 
CurrentPage -= 1;
 
GetData();
 
}

حال وارد ساب روتین مربوط به لود صفحه شده و کد زیر را برای بایند شدن ابتدایی دیتالیست قرار دهید :

protected void Page_Load(object sender, EventArgs e)
 
{
 
if (!IsPostBack)
 
{
 
GetData();
 
}
 
}