صفحه بندی در دیتالیست ( Paging Datalist ) <br/> کنترل های داده ای مانند Gridview , DataGrid , DataList Repeater ,… کنترل هایی با کارایی و استفاده خیلی زیاد می باشند.

صفحه بندی در دیتالیست ( Paging Datalist )

پیشنیاز این مقاله :

1. تسلط کامل در استفاده از تابع ، Property و متد ها

2. تسلط کامل بر کنترل های داده ای ( به ویژه DataList )

3. تسلط کامل بر Ado.NET و بانک اطلاعاتی اکسس و انقیاد داده ها

فایل ساخته شده پروژه در انتهای صفحه برای دانلود موجود می باشد .

کنترل های داده ای مانند 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(); } }