آموزش: استفاده از کنترل <asp:ListView> در وب 2008

[مجتبی صحرائی]

به نام خدا و با سلام به دوستان برنامه نویس
این اولین پست بنده در سایت برنامه نویس هستش(با نام کاربری مجتبی صحرائی)، البته قبلا و در مقطعی کوتاه در این سایت فعالیت داشتم.
با اجازه همه اساتیدی که در این سایت هستند از جمله آقای بهروز راد، مجموعه آموزشی رو در مورد <asp:ListView> در سایت دات نت سورس شروع کردم و با توجه به اینکه کار با کنترل هایی مثل ListView,GridView,Repeater,DataList,... همواره دغدغه بیشتر برنامه نویسان بوده و سوالات زیادی در این مورد مطرح میشه تصمیم گرفتم تا این آموزش رو در اینجا هم قرار بدم تا تمام دوستان برنامه نویس ایرانی از این آموزش استفاده کنند.

منبع این آموزش تماما MSDN هستش و میتونید در آدرس زیر مطالب رو از MSDN بخونید.


ms-help://MS.MSDNQTR.v90.en/fxref_system.web.extensions/html/3e5444fc-b7b7-ec6b-e8dc-95ee99de8697.htm


کمی و کاستی های این آموزش رو به بزرگی خودتون ببخشید؛ به دلیل اینکه وقتم بسیار کم و از اونطرف حجم کار بسیار بالا هستش.


درخواست: تو مقاله ای که در مورد GridView در دات نت سورس ارائه کرده بودم شاهد بودم که در یکی از سایت ها مقاله مربوطه رو با نام خودشون ارائه کرده بودند.پیشاپیش از همه شما دوستان عزیز درخواست می کنم که نه تنها در این مورد بلکه در تمامی موارد به حقوق هموطنان احترام بگذاریم تا شاهد موارد این چنینی نباشیم.


با پایان یافتن بخش توضیحات چندین مثال رو باهم بررسی خواهیم نمود.
در پایان این آموزش تمامی گفته ها و کدها بصورت pdf در اختیار دوستان عزیز قرار خواهد گرفت.


توضیح: برای راحتی کار و درک بیشتر و بهتر مراحل کار؛ پروژه ای رو ایجاد کرده و برای هر بخش از مقاله یک صفحه جدید در اون ایجاد و سورس های مربوط به اون بخش از مقاله رو در صفحه مورد نظر قرار دادم که تصویر این پروژه رو در زیر مشاهده می کنید.


http://sahraei.persiangig.com/ASP_NET2008/ListView/01.JPG


بخش اول


این کنترل با استفاده از تمپلیتی که کاربر ایجاد می کند به منظور نمایش مقادیر منابع داده مورد استفاده قرار می گیرد.این کنترل کاربر را قادر به انجام اعمالی مانند انتخاب،مرتب سازی،حذف و اضافه کردن رکورد خواهد نمود.


این کنترل در فضای نام System.Web.UI.WebControls و در اسمبلی System.Web.Extensions.dll قرار دارد.


کنترل ListView دارای خصوصیات زیر می باشد:
1- می تواند با کنترل های منابع داده مثل SqlDataSource,LinqDataSource,ObjectDataSource استفاده نماید.
2- سفارشی شدن ظاهر با استفاده از تمپلیت های کاربر و استایل ها
3- قابلیت مرتب سازی
4- قابلیت بروزرسانی و حذف
5- پشتیبانی از صفحه بندی با استفاده از کنترل DataPager
6- قابلیت انتخاب Item
7- دسترسی به ListView از طریق کد نویسی و مقدار دهی به خصوصیات آن و استفاده از ایونت ها بطور پویا.
8- قرار دادن کلید (Primary key) چند تایی در کنترل


Template(قالب کنترل):


برای استفاده از ListView و نمایش داده ها درون آن می باید تمپلیتی برای این منظور در آن ایجاد نمود.LayoutTemplate,ItemTemplate دو عنصر اساسی و الزامی برای ساخت یک تمپلیت در ListView هستند.با این وجود شما می باید برای حالات مختلفی که می خواهید از ListView استفاده کنید عناصر مناسب را قرار دهید؛ به عنوان مثال ListView این قابلیت را دارا می باشد که بتوان رکوردی را ثبت نمود، در این حالت حتما می باید از InsertItemTemplate استفاده نمود.
در زیر لیستی از عناصر موجود در ListView به منظور ایجاد Template لیست شده است:


1- LayoutTemplate
2- ItemTemplate
3- ItemSeparatorTemplate
4- GroupTemplate
5- GroupSeparatorTemplate
6- EmptyItemTemplate
7- EmptyDataTemplate
8- SelecteditemTemplate
9- AlternatingItemTemplate
10- EditItemTemplate
11- InsertItemTemplate


از بخش های بعدی به توضیح کنترل DataPager و عناصر ذکر شده بالا که برای ساخت Template مورد استفاده قرار خواهند گرفت بهمراه مثال خواهم پرداخت.

[Behrouz_Rad]

مرسی مجتبی جان.
خوشحال میشیم که شاهد فعالیت مستمرت در این سایت باشیم.

موفق باشی.

[مجتبی صحرائی]

مرسی مجتبی جان.
خوشحال میشیم که شاهد فعالیت مستمرت در این سایت باشیم.


ممنونم بهروز عزیز و امیدوارم این مقاله به کار دوستان عزیز بیاد!


بخش دوم

DataPager:
کلاس DataPager به منظور صفحه بندی داده ها و اطلاعات data-bound controls ها مورد استفاده قرار می گیرد که این کنترل ها از اینترفیس IPageableItemContainer ارث بری کرده اند مانند ListView,GridView,…

برای مرتبط نمودن کنترل DataPager به کنترلی که قصد صفحه بندی آن را داریم می باید خصوصیت PagedControlID مربوط به کنترل DataPager خود رو برابر با نام کنترل مورد نظر جهت صفحه بندی قرار بدیم.

نکته: همونطور که تو درس های گرید ویو شاهد بودید می تونستیم توی تگ <ItemTemplate> گریدمون هر کنترلی رو قرار بدیم. در اینجا هم میتونیم در تگ
<ayoutTemplate> کنترل <ListView> خودمون کنترل DataPager رو قرار بدیم.

برای اینکه بتونیم معین کنیم که چندین item در هر صفحه نمایش داده بشن کافیه که خصوصیت PageSize رو برابر با تعداد مورد نظر قرار بدیم.

برای استفاده از کنترل DataPager می باید تگ <Field> را اضافه کرده و معین کنید که صفحه بندی به چه شکلی انجام خواهد شد که سه حالت رو در بر خواهد داشت :
• NextPreviousPagerField
• NumericPagerField
• TemplatepagerField


NextPreviousPagerField : کاربر رو قادر خواهد کرد که صفحات بعدی و یا قبلی رو مشاهده کنه و یا اینکه از صفحات اول و آخر بازدید کنه.
NumericPagerField : کاربر را قادر خواهد نمود تا صفحه مورد نظر رو با انتخاب شماره صفحه مشاهده کند.
TemplatePagerField : این امکان را فراهم ساخته که صفحه بندی مورد نظر خود را ایجاد نمائید(انجام عمل صفحه بندی به طور سفارشی

مثال:
Add New Item کرده و یک Sql Server DataBase به پروژه اضافه کنید.سپس یک Table به آن اضافه کنید.فیلد های ID,Item رو براش تعریف کنید و Is Identity فیلد ID رو Yes کنید. من 20 سطر در این جدول قرار دادم ( item01 تا item20).

با استفاده از SqlDataSource اطلاعات رو از این جدول بازیابی می کنیم ==>

<
asp:SqlDataSource ID="sqlDataPager" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"



SelectCommand="SELECT * FROM [01_DataPager] ORDER BY [ID]"></asp:SqlDataSource>



برای نشون دادن این داده ها یه <asp:ListView> رو توی صفحه قرار بدید و خصوصیت DataSourceID اونو برابر با نام کنترل SqlDataSource قرار بدید.==>



<asp:ListView ID="ListViewItems" runat="server" DataSourceID="sqlDataPager" DataKeyNames="ID">


مرحله بعدی این هستش که DataPager خودمون رو برای صفحه بندی اطلاعات آماده کنیم.
توی توضیحات مربوط به DataPager گفتیم که توسط خصوصیت PagedControlID باید تعیین کنیم که DataPager باید کدوم کنترل رو صفحه بندی کنه که در اینجا نام ListView خودمون رو به این خصوصیت می دیم و همچنین توسط خصوصیت PageSize تعیین می کنیم که در هر صفحه چه تعداد رکورد به نمایش در بیاد==>




<asp:DataPager
ID="DataPager"
runat="server"
PagedControlID="ListViewItems"
PageSize="4"
>


خب تا اینجای کار DataPager داره به ListView اشاره می کنه.الآن نیاز داریم تا مدل صفحه بندی رو تعیین کنیم که طبق توضیحات قبلی گفتیم برای این کار می باید تگ <Fields> رو اضافه و متناسبا تگ های داخلی اون رو نیز بنویسیم.
مدلی که من تو این مثال نوشتم به این صورت هستش که بتونیم به صفحات اولی و آخری دسترسی داشته باشیم و به بقیه صفحات با شماره صفحشون دسترسی داشته باشیم.


ابتدا دسترسی به صفحه اول رو با هم می نویسیم: برای این کار باید داخل تگ Fields تگ asp:NextPreviousPagerField رو اضافه کنیم و خصوصیاتش رو ست کنیم. از اونجایی که می خوایم فقط صفحه اول قابل دسترس باشه خصوصیات ShowNextPageButton, ShowPreviousPageButton رو برابر با false و خصوصیت ShowFirstPageButton رو برابر با true قرار میدیم. این کار باعث میشه که فقط به صفحه اول دسترسی داشته باشیم.از طرفی می خوایم که این عمل رو از طریق کلیک بر روی یه عکس مناسب (Arrow) انجام بدیم.کافیه خصوصیت ButtonType رو برابر با Image قرار بدیم و FirstPageImageUrl رو برابر با مسیر و نام عکس مورد نظر قرار بدیم==>




<asp:NextPreviousPagerField ButtonType="Image" ShowFirstPageButton="true" ShowNextPageButton="false"
ShowPreviousPageButton="false" FirstPageImageUrl="~/images/First.gif" />



در مرحله بعدی دسترسی به صفخات با استفاده از شماره صفحشون رو می نویسیم: برای این منظور کافیه که تگ NumericPagerField رو داخل تگ Fields بنویسیم و به استفاده از خصوصیت ButtonCount مشخص کنیم که به چه تعداد صفحه از طریق شماره صفحشون می خوایم دسترسی داشته باشیم==>




<asp:NumericPagerField ButtonCount="4" />



مرحله آخر ست کردن تنظیمات DataPager خودمون این هستش که دسترسی به صفحه آخر رو با هم بنویسیم: این کار دقیقا مثل دسترسی به صفحه اول هستش یعنی همون مراحل رو تکرار کنید و فقط خصوصیت ShowLastPageButton رو برابر true قرار بدید و طبیعیه که خصوصیت مربوط به نشون دادن صفحه اول یعنی ShowFirstPageButton رو نباید بنویسید و متناسبا نام و مسیر عکستون رو هم عوض کنید==>





<asp:NextPreviousPagerField ButtonType="Image" ShowLastPageButton="true" ShowNextPageButton="false"
ShowPreviousPageButton="false" LastPageImageUrl="~/images/Last.gif" />



خب در اینجا DataPager خودمون رو تنظیم کردیم.
خصوصیات و پیاده سازی کنترل DataPager مون باید به صورت زیر باشه==>




<asp:DataPager
ID="DataPager"
runat="server"
PagedControlID="ListViewItems"
PageSize="4">
<Fields>
<asp:NextPreviousPagerField ButtonType="Image" ShowFirstPageButton="true" ShowNextPageButton="false"
ShowPreviousPageButton="false" FirstPageImageUrl="~/images/First.gif" />
<asp:NumericPagerField ButtonCount="4" />
<asp:NextPreviousPagerField ButtonType="Image" ShowLastPageButton="true" ShowNextPageButton="false"
ShowPreviousPageButton="false" LastPageImageUrl="~/images/Last.gif" />
</Fields>
</asp:DataPager>



چون هنوز لیست ویو و تمپلیت سازیشو توضیح ندادم؛ بنابراین کدهای زیر رو برای تنظیم لیست ویو قرار بدید و نتایج رو مشاهده کنید تا به موقع این کدها توضیح داده بشه==>




<asp:ListView ID="ListViewItems" runat="server" DataSourceID="sqlDataPager" DataKeyNames="ID">
<ItemTemplate>
<li>ID:
<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
<br />
Item:
<asp:Label ID="ItemLabel" runat="server" Text='<%# Eval("Item") %>' />
<br />
</li>
</ItemTemplate>
<LayoutTemplate>
<ul ID="itemPlaceholderContainer" runat="server">
<li ID="itemPlaceholder" runat="server" />
</ul>
</LayoutTemplate>
</asp:ListView>


صفحه رو run کنید و نتیجه رو مشاهده کنید==>


http://sahraei.persiangig.com/ASP_NET2008/ListView/02.JPG
صفحه اول


http://sahraei.persiangig.com/ASP_NET2008/ListView/03.JPG
صفحه آخر


ادامه دارد==>

[مجتبی صحرائی]

بخش سوم

LayoutTemplate: این عنصر تمپلیت اصلی کنترل ListView هستش که در برگیرنده عناصری که در قسمت ItemTemplate,GroupTemplate قرار داده می شوند است مانند Table,Div و...
نکته مهم: در قسمت LayoutTemplate می باید تگی با خصوصیت runat="server"و همچنین id="itemPlaceholder"داشته باشید.با این تنظیم داده های قسمت LayoutTemplate و GroupTemplate در تگی که حاوی این مشخصات هستند قرار خواهند گرفت. چنانچه تگی با این مشخصات در قسمت LayoutTemplate نداشته باشید با خطای زیر رو به رو خواهید شد==>



http://sahraei.persiangig.ir/ASP_NET2008/ListView/04.JPG

همونطور که اشاره شد این عنصر قادر خواهد بود تا DataPager رو هم در خود جای دهد.


نمونه ای مثال: (این مثال در صفحه LayoutTemplate.aspx – 02 قرار دارد)
یک کنترل <asp:SqlDataSource> رو روی صفحه قرار بدید و اونو طوری تنظیم کنید تا 5 رکورد رو از جدول 01_DataPagerبازیابی کنه(در اینجا هدف آشنایی با LayoutTemplate هستش، چنانچه مایل باشید خودتون می تونید DataPager رو به اون اضافه کنید)==>



<asp:SqlDataSource
ID="sqlLayoutTemplate"
runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [01_DataPager] WHERE ([ID] &lt;= @ID)">
<SelectParameters>
<asp:ParameterDefaultValue="5"Name="ID"Type="Int32"/>
</SelectParameters>
</asp:SqlDataSource>


کنترل <asp:ListView> رو روی صفحه قرار بدید و DataSourceIDاونو برابر با نام کنترل sqlDataSource یعنی sqlLayoutTemplateقرار بدید.==>



<asp:ListView
ID="ListView"
runat="server"
DataSourceID="sqlLayoutTemplate"
>


در این قسمت LayoutTemplate رو طوری تنظیم خواهیم نمود تا دو ستون در اختیار داشته باشیم و دیتا ها را در این دو ستون بچینیم==>




<LayoutTemplate>

<table

style="text-align:center;background-color:White;width:400px;border:solid 1px black;"

cellpadding="0"

cellspacing="0"

id="tblItems"

>

<tr>

<th style="color:White;background-color:#006699;">ID</th>

<th style="color:White;background-color:#006699;">Item</th>

</tr>

<tr runat="server" id="itemPlaceholder"></tr>

</table>

</LayoutTemplate>



به <trrunat="server"id="itemPlaceholder"></tr> توجه کنید که دارای خصوصیات ذکر شده هستش (runat="server"id="itemPlaceholder")

ItemTemplate رو هم به صورت زیر بنویسید و صفحه رو Run کنید و نتیجه رو مشاهده کنید==>




<ItemTemplate>

<tr runat="server">

<td>

<%# Eval("ID") %>

</td>

<td>

<%# Eval("Item") %>

</td>

</tr>

</ItemTemplate>



http://sahraei.persiangig.ir/ASP_NET2008/ListView/05.JPG

ItemTemplate: داده هایی که در حال اضافه شدن به ListView هستند در این قسمت جای خواهند گرفت.
مثال این قسمت رو میتونید در همون صفحه LayoutTemplate.aspx-02 مشاهده کنید.




<ItemTemplate>
<tr runat="server">
<td>
<%# Eval("ID") %>
</td>
<td>
<%# Eval("Item") %>
</td>
</tr>
</ItemTemplate>




ItemSeparatorTemplate: به شما اجازه می دهد تا المنت های سفارشی مورد نظر خود را مابین Item ها قرار دهید. این المنت سفارشی میتونه یه عکس مناسب و یا یه خط باشه.

مثال: (این مثال در صفحه ItemSeparatorTemplate.aspx – 03 قرار دارد)

مثال DataPager.aspx-01 رو بنویسید و تگ زیر رو بعد از تگ ItemTemplate بنویسید==>




<ItemSeparatorTemplate>
<hr style="color:Red;width:10%;" />
</ItemSeparatorTemplate>


این کد باعث میشه که بین Item ها یه خط قرمز قرار بگیره.


http://sahraei.persiangig.ir/ASP_NET2008/ListView/06.JPG

ادامه دارد==>

[alishirazi]

من فقط می تونم بگم از وقتی که 2008 اومد من عاشق listview شدم، فوق العاده هست، من به همه می پیشنهادم که حتما لذت استفاده از کنترل به این کاملی رو بچشن

[مجتبی صحرائی]

بخش چهارم
GroupTemplate: بوسیله GroupTemplate می توان Layout رو به صورت Tiled ایجاد نمود بطوریکه Item ها بصورت افقی و هم تراز در هر سطر قرار گیرند.

برای تعیین اینکه چند گروه در هر سطر قرار گیرند می باید خصوصیت GroupItemCount رو برابر با تعداد مورد نظر خود قرار دهید.

به مانند LayoutTemplate می باید برای GroupTemplate هم تگی که در برگیرنده Item ها می باشد را با استفاده از خصوصیات ID="itemPlaceholder" , runat="server" قرار بدیم و سپس در LayoutTemplate تگی را که حاوی خصوصیات runat="server",id="groupPlaceholder" می باشد را اضافه نمائیم.

توضیح: در مثال های قبلی دیدیم که در LayoutTemplate تگی را اضافه می کردیم که حاوی ID برابر با itemPlaceHolder می بود.در آنجا هنگامی که Item ها یکی یکی اضافه می شدند به LayoutTemplate اضافه می شدند.اما در GroupTemplate سناریو کمی فرق می کند.LayoutTemplate به GroupTemplate اشاره می نماید و GroupTemplate با توجه به تعداد مد نظر که در GroupItemCount کنترل ListView قرار داده شده، Item ها را جمع نموده و با رسیدن به تعداد مورد نظر به یکباره آن ها را به LayoutTemplate اضافه می نماید.

GroupSeparatorTemplate: به شما اجازه می دهد تا المنت های سفارشی مورد نظر خود را مابین گروه ها قرار دهید.

مثال: (این مثال در صفحه GroupTemplate – 04 قرار دارد)
کنترل sqlDataSource را به صفحه اضافه نموده و آنرا طوری تنظیم نمائید تا 12 رکورد را از دیتابیس بازیابی نماید==>



<asp:SqlDataSource
ID="sqlDataPager"
runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [01_DataPager] WHERE ([ID] &lt;= @ID)"
>
<SelectParameters>
<asp:Parameter
DefaultValue="12"
Name="ID"
Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>


کنترل ListView را به صفحه اضافه نموده و خصویت DataSourceID کنترل ListView رو برابر با sqlDataPager قرار بدید. ضمنا به منظور Grouping خصوصیت GroupItemCount رو برابر با 3 قرار بدید تا در هر سطر 3 Item رو قرار بده.



<asp:ListView
ID="ListViewItems"
runat="server"
DataSourceID="sqlDataPager"
DataKeyNames="ID"
GroupItemCount="3"
>
<LayoutTemplate>
<table
style="text-align:center;width:400px;background-color:White;border:solid 1px black;"
>
<tr runat="server" id="groupPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<td style="text-align:center;">
ID: <span style="color: Red;">
<%# Eval("ID") %></span><br />
Item: <span style="color: Red;">
<%# Eval("Item") %></span>
</td>
</ItemTemplate>
<GroupTemplate>
<tr>
<td runat="server" id="itemPlaceholder" />
</tr>
</GroupTemplate>
<GroupSeparatorTemplate>
<tr>
<td colspan="3">
<hr />
</td>
</tr>
</GroupSeparatorTemplate>
</asp:ListView>

صفحه رو Run کنید و نتیجه رو مشاهده نمائید.





http://sahraei.persiangig.com/ASP_NET2008/ListView/07.JPG

ادامه دارد==>

[مجتبی صحرائی]

بخش پنجم


EmptyItemTemplate: هنگامی که داده ای در آخرین گروه و یا صفحه آخر وجود نداشته باشد Empty item در کنترل ListView نمایش داده خواهد شد.این مورد فقط و فقط هنگامی روی خواهد داد که GroupItemCount مقداری بیشتر از یک داشته باشد. به عنوان مثال؛ خصوصیت GroupItemCount در کنترل ListView برابر با 5 ست شده و جمع کل Item هایی که به نمایش در خواهند آمد برابر 8 می باشد.در این مرحله، آخرین سطر حاوی اطلاعات حاوی 3 Item خواهد بود که توسط EmptyItemTemplate تعیین گردیده اند.
شما میتونید ظاهر سفارشی مناسب خودتون رو برای نمایش خالی بودن عناصر ایجاد کرده و اونو داخل تگ EmptyItemTemplate قرار بدید.

مثال: (این مثال در صفحه EmptyItemTemplate – 05 قرار دارد)
کنترل sqlDataSource رو به صفحه اضافه کرده و اونو طوری کانفیگ کنید تا 13 رکورد رو از دیتابیس بازیابی کنه==>




<asp:SqlDataSource
ID="sqlEmptyItemTemplate"
runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [01_DataPager] WHERE ([ID] &lt;= @ID)"
>
<SelectParameters>
<asp:Parameter
DefaultValue="13"
Name="ID"
Type="Int32"
/>
</SelectParameters>
</asp:SqlDataSource>

کنترل ListView رو به صفحه اضافه نموده و خصوصیت DataSourceID اونو برابر با نام کنترل بازیابی کننده قرار بدید یعنی sqlEmptyItemTemplate و ضمنا خصوصیت GroupItemCount رو هم برابر با 4 قرار بدید یعنی میخوای در هر سطری 4 Item نمایش بدیم.

به منظور نمایش Item های خالی در تگ EmptyItemTemplate به عنوان مثال عبارت This is empty item رو تایپ کنید. شما میتونید از یه عکس مناسب و یا UI سفارشی خودتون در این قسمت استفاده نمائید.==>




<asp:ListView
ID="ListViewEmptyItemTemplate"
runat="server"
DataSourceID="sqlEmptyItemTemplate"
DataKeyNames="ID"
GroupItemCount="4"
>
<LayoutTemplate>
<table style="text-align:center;width:400px;background-color:White;
border:solid 1px black;"
>
<tr
runat="server"
id="groupPlaceholder"
/>
</table>
</LayoutTemplate>
<ItemTemplate>
<td
style="text-align:center;"
>
ID: <span style="color: Red;">
<%# Eval("ID") %></span><br />
Item: <span style="color: Red;">
<%# Eval("Item") %></span>
</td>
</ItemTemplate>
<GroupTemplate>
<tr>
<td runat="server" id="itemPlaceholder" />
</tr>
</GroupTemplate>
<GroupSeparatorTemplate>
<tr>
<td colspan="4">
<hr />
</td>
</tr>
</GroupSeparatorTemplate>
<EmptyItemTemplate>
<td>This is empty item</td>
</EmptyItemTemplate>
</asp:ListView>


صفحه رو Run کنید و شاهد نتیجه باشید.




http://sahraei.persiangig.ir/ASP_NET2008/ListView/08.JPG



ادامه دارد==>

[مجتبی صحرائی]

بخش ششم
EmptyDataTemplate: هنگامی که کنترل منبع داده ای که به لیست ویو اصطلاحا Bound شده هیچ رکوردی رو برنگردونه این تمپلیت در ListView و در قسمت LayoutTemplate خودش رو نمایان می کنه.
شما میتونید پیغام مناسبی رو از طریق ایجاد UI سفارشی در تگ EmptyDataTemplate قرار بدید و به کاربر نشون بدید.

مثال: (این مثال در صفحه EmptyDataTemplate – 06 قرار دارد)

کنترل sqlDataSource رو توی صفحه قرار بدید و SelectCommand اونو خالی بگذارید(یعنی اینکه رکوردی رو برنمی گردونه)==>



<asp:SqlDataSource
ID="sqlEmptyDataTemplate"
runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
>
</asp:SqlDataSource>



کنترل ListView رو در صفحه قرار بدید و خصوصیت DataSourceID اونو برابر با sqlEmptyDataTemplate قرار بدید.
LayoutTemplate,ItemTemplate رو متناسب با ذوق و سلیقه خودتون بنویسید.
به منظور اینکه پیغامی رو به کاربر مبنی بر پیدا نشدن رکوردی نشون بدیم در تگ EmptyDataTemplate عبارت No record found! رو نوشتم.
به مانند EmptyItemTemplate که توضیح دادم میتونید عکس و یا UI سفارشی خودتون رو قرار بدید==>



<asp:ListView
ID="ListViewEmptyDataItem"
runat="server"
DataSourceID="sqlEmptyDataTemplate"
>
<EmptyDataTemplate>
<h3><u>No record found!</u></h3>
</EmptyDataTemplate>
<ItemTemplate>
<li>ID:
<asp:Label
ID="IDLabel"
runat="server"
Text='<%# Eval("ID") %>'
/>
<br />
Item:
<asp:Label
ID="ItemLabel"
runat="server"
Text='<%# Eval("Item") %>'
/>
<br />
</li>
</ItemTemplate>
<LayoutTemplate>
<ul
ID="itemPlaceholderContainer"
runat="server"
>
<li
ID="itemPlaceholder"
runat="server"
/>
</ul>
</LayoutTemplate>
</asp:ListView>

صفحه رو Run و نتیجه رو مشاهده کنید==>





http://sahraei.persiangig.com/ASP_NET2008/ListView/09.JPG




ادامه دارد==>

[مجتبی صحرائی]

بخش هفتم


SelectedItemTemplate: هنگامی که یک سطر در ListView انتخاب میشه UI ای که در این تگ قرار گرفته نمایان خواهد شد.

مثال: (این مثال در صفحه SelectedItemTemplate – 07 قرار دارد)
کنترل sqlDataSource رو روی صفحه قرار داده و طوری کانفیگش کنید تا 5 رکورد رو برگردونه==>




<asp:SqlDataSource
ID="sqlSelectedItemTemplate"
runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [01_DataPager] WHERE ([ID] &lt;= @ID)"
>
<SelectParameters>
<asp:Parameter
DefaultValue="5"
Name="ID"
Type="Int32"
/>
</SelectParameters>
</asp:SqlDataSource>


کنترل ListView رو در صفحه قرار داده و خصوصیت DataSourceID اونو برابر با نام کنترل sqlDataSource یعنی sqlSelectedItemTemplate قرار بدید.

LayoutTemplate,ItemTemplate رو تنظیم و در ItemTemplate یک LinkButton قرار بدید و خصوصیت CommandName اونو برابر با Select قرار بدید.با این تنظیم هنگامی که روی LinkButton کلیک می کنید UI ای که در SelectedItemTemplate پیش بینی کردید در ItemTemplate و برای همون سطری که عمل Select رو انجام دادید به نمایش در خواهد اومد==>




<asp:ListView
ID="ListViewSelectedItemTemplate"
runat="server"
DataSourceID="sqlSelectedItemTemplate"
>
<LayoutTemplate>
<table
style="text-align:center;background-color:White;width:400px;border:solid 1px black;" cellpadding="0"
cellspacing="0"
id="tblItems"
>
<tr>
<th
style="color:White;background-color:#006699;"
>
ID
</th>
<th
style="color:White;background-color:#006699;"
>
Item
</th>
<th
style="color:White;background-color:#006699;"
>
Select
</th>
</tr>
<tr
runat="server"
id="itemPlaceholder"
>
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr
id="Tr1"
runat="server"
>
<td>
<%# Eval("ID") %>
</td>
<td>
<%# Eval("Item") %>
</td>
<td>
<asp:LinkButton
runat="server"
ID="lnkSelect"
Text="Select"
CommandName="Select"
> </asp:LinkButton>
</td>
</tr>
</ItemTemplate>
<SelectedItemTemplate>
<tr style="background-color:#cccccc;">
<td colspan="3">
<h3>Selected item:</h3>
ID:&nbsp;
<asp:Label
ID="lblID"
runat="server"
ForeColor="Red"
Text='<%# Eval("ID") >'
>
</asp:Label>
<br />
Item:&nbsp;
<asp:Label
ID="lblItem"
runat="server"
ForeColor="Red"
Text='<%# Eval("Item") >'
>
</asp:Label>
</td>
</tr>
</SelectedItemTemplate>
</asp:ListView>

صفحه رو Run کنید و نتیجه رو ببینید==>


http://sahraei.persiangig.ir/ASP_NET2008/ListView/10.JPG
پیش از انتخاب یک Item


http://sahraei.persiangig.ir/ASP_NET2008/ListView/11.JPG


پس از انتخاب Item03



ادامه دارد==>

[مجتبی صحرائی]

بخش هشتم


AlternatingItemTemplate: اگه دوست دارید که سطور (Itemها) در ListView یک در میان با هم فرقی داشته باشند میتونید از این Template استفاده کنید. به طور مثال میخواهیم مثالی رو باهم بنویسیم که در اون یک در میان رنگ سطرها باهم فرق کنه.

مثال: (این مثال در صفحه AlternatingItemTemplate – 08 قرار دارد)

کنترل sqlDataSource رو به صفحه اضافه کنید و طوری اونو کانفیگ کنید تا 10 رکورد رو بازیابی کنه==>



<asp:SqlDataSource
ID="sqlAlternatingItem"
runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [01_DataPager] WHERE ([ID] &lt;= @ID)"
>
<SelectParameters>
<asp:Parameter
DefaultValue="10"
Name="ID"
Type="Int32"
/>
</SelectParameters>
</asp:SqlDataSource>


کنترل ListView رو به صفحه اضافه کرده و خصوصیت DataSourceID اونو برابر با نام کنترل sqlDataSource یعنی sqlAlternatingItem قرار بدید.
من در استایل شیت خودم دو کلاس تعریف کردم که در این دو کلاس background-color باهم فرق می کنه.

در ItemTemplate یک tr دارم که td ها داخلش قرار می گیرند و Item ها رو داخلش نشون می ده.در AlternatingItemTemplate هم همین کدها رو می نویسم؛ با این تفاوت که خصوصیت class دو tr با هم فرق می کنه و با این روش رنگ پس زمینه یکی در میان در ListView باهم فرق خواهد نمود.

کلاس های استایل==>



.item
{
background-color: #FFCCFF;
}
.alternate
{
background-color: #FFCC66;
}


و کدهای ListView==>




<asp:ListView
ID="ListView"
runat="server"
DataSourceID="sqlAlternatingItem"
>
<LayoutTemplate>
<table
style="text-align: center; background-color: White; width: 400px; border: solid 1px black;"
cellpadding="0" cellspacing="0" id="tblItems">
<tr>
<th
style="color: White; background-color: #006699;"
> ID
</th>
<th
style="color: White; background-color: #006699;"
>
Item
</th>
</tr>
<tr
runat="server" id="itemPlaceholder"
>
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr class="item" id="Tr1" runat="server">
<td>
<%# Eval("ID") %>
</td>
<td>
<%# Eval("Item") %>
</td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr class="alternate" id="Tr1" runat="server">
<td>
<%# Eval("ID") %>
</td>
<td>
<%# Eval("Item") %>
</td>
</tr>
</AlternatingItemTemplate>
</asp:ListView>


صفحه رو Run کنید و نتیجه رو مشاهده نماید==>



http://sahraei.persiangig.ir/ASP_NET2008/ListView/12.JPG



ادامه دارد==>

[مجتبی صحرائی]

دوستان عزیز نمی دونم چرا وقتی میخوام ادامه مطالب رو قرار بدم خطای زیر رو ازم میگیره:



در هنگام ارسال نوشتهء شما ، این مشکل بوجود آمده است:
نوشته شما بسیار اندک است ، تعداد کاراکتر های هر نوشته دست کم 10 عدد میبایست باشد.


از طریق HelpCenter هم قضیه رو دنبال کردم ، اما به جایی نرسیدم!
pdf مطالب به طور کامل به همراه سورس در وبلاگم وجود داره.
چنانچه مایل باشید می تونید از اونجا دانلود و استفاده کنید.
http://MojtabaSahraei.blogfa.com

یا علی مدد!

[Saber_Fatholahi]

سلام دوستان
من با اجازه نویسنده مقاله این آموزش به صورت PDF آماده کردم و توی این آدرس (http://www.payawebshomal.com/ArticleDetails.aspx?ArticleID=22) قرار دادم امیدوارم به درد همه بخوره
موفق باشید

[saba1004]

با سلام وتشکر منروی لیست ویو مانند دیجی کالا که عکیهابا ماوس که روش میریم