آموزش ASP.Net به زبان ساده   >   آموزش مدل فرم های وب ASP.Net Web Forms
درس پانزدهم : آموزش نمایش اطلاعات لیست وار توسط کنترل DataList در ASP.Net

مقدمه و معرفی کنترل DataList :

کنترل DataList ، همانند کنترل Repeater ، برای نمایش قالب بندی شده آیتم های متوالی و لسیت وار که از طریق یک منبع داده ای ( برای مثال یک فایل XML ) تامین شده است ، استفاده می شود .
فرق اصلی بین کنترل های DataList و Repeater ، این است که کنترل DataList برخلاف کنترل Repeater ، یک جدول را به صورت پیش فرض به دور اطلاعات ایجاد کرده و آنها را اتوماتیک قالب بندی می کند.
کنترل DataList را می توانید به منابع مختلفی از داده ، مثل یک جدول بانک اطلاعاتی ، فایل های XML ، شی های داده ای و ... متصل نمایید . در این درس قصد داریم تا نحوه کار با این کنترل را آموزش دهیم . از فایل XML زیر ، همانند درس قبلی برای تامین داده های مثال ها استفاده خواهیم کرد :

کد <?xml version="1.0" encoding="ISO-8859-1"?>

<countries>
    <country>
       <title>Englang</title>
       <capital>London</capital>
       <Continent>Europe</Continent>
    </country>

    <country>
        <title>USA</title>
        <capital>Washington</capital>
        <Continent>North America</Continent>
     </country>

     <country>
        <title>France</title>
        <capital>Paris</capital>
        <continent>Europe</continent>
     </country>

     <country>
        <title>Iran</title>
        <capital>Tehran</capital>
        <Continent>Asia</Continent>
     </country>

</countries>
خروجی مشاهده خروجی فایل XML

نحوه اتصال کنترل DataList به فایل XML :

در مرحله اول ، namespace با مقدار " System.Data " را به ابتدای صفحه ASP.Net اضافه می کنیم . زیرا برای کار با اشیای DataSet ( شی DataSet یک شی داده ای در ASP.Net است که برای خواندن و جابه جایی اطلاعات به کار می رود ) ، به این namespace نیاز داریم . نحوه وارد کردن آن در ابتدای صفحه aspx به صورت زیر است :

کد <%@ Import Namespace="System.Data" %>

در مرحله بعدی ، یک شی DataSet را تعریف می کنیم تا اطلاعات درون فایل XML را توسط دستور ReadXml و آدرس فایل که به صورت پارامتر به آن ارسال شده را خوانده و برای انتقال به کنترل DataList آماده باشد .

کد <script runat="server">
     sub Page_Load
      
  if Not Page.IsPostBack then
        
   dim mycountries=New DataSet
            mycountries.ReadXml(MapPath("countries_2.xml"))

        end if

    end sub

</script>

در مرحله بعدی ، یک کنترل DataList را در صفحه ASP.Net خود تعریف می کنیم . این کنترل شامل 3 بخش یا Template اصلی می باشد که عبارتند از :

  1. بخش <HeaderTemplate> : این بخش برای تعیین سر عنوان یا هدر کنترل استفاده شده و فقط یکبار در ابتدای آن به صورت یک سطر نمایش داده می شود . محتویات این یخش معولا به صورت ثابت یا Static توسط طراح تعیین می شود .
  2. بخش <ItemTemplate> : این بخش برای نمایش اطلاعات اصلی منبع داده ای استفاده شده و به ازای هر آیتم ( رکورد ) موجود در منبع داده ای یکبار اجرا شده و اطلاعات آن آیتم را در قالب یک سطر نمایش می دهد .
  3. بخش <FooterTemplate> : این بخش برای تعیین پا سطر یا فوتر کنترل استفاده شده و فقط یکبار در انتهای کنترل به صورت یک سطر نمایش داده می شود . محتویات این یخش معولا به صورت ثابت یا Static توسط طراح تعیین می شود .

شکل کلی تعریف یک کنترل DataList به صورت زیر است :

کد <asp:DataList id="Countries" runat="server">
    <HeaderTemplate>
         ...
    </HeaderTemplate>

    <ItemTemplate>
         ...
     </ItemTemplate>

     <FooterTemplate>
         ...
      </FooterTemplate>

</asp:DataList>

کد نهایی صفحه برای خواندن و نمایش اطلاعات فایل XML :

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

کد <%@ Page Language="VB" %>
<%@ Import Namespace="System.Data" %>


<script runat="server">
      sub Page_Load
        
if Not Page.IsPostBack then
           
  dim mycountries =New DataSet
             mycountries.ReadXml(MapPath("Countries_2.xml"))
             Countries.DataSource = mycountries
             Countries.DataBind()

         end if

      end sub

</script>
<html>
 <body>
   <form id="Form1" runat="server">
        <asp:DataList id="Countries" runat="server"   gridlines="both">
           <HeaderTemplate>
                My Countries
          </HeaderTemplate>

          <ItemTemplate>
                 <%#Container.DataItem("title")%>  پایتخت =
                 <%#Container.DataItem("Capital")%> و قاره =
                <%#Container.DataItem("Continent")%>
           </ItemTemplate>


           <FooterTemplate>
               Developer Studio Network
           </FooterTemplate>

       </asp:DataList>
   </form>

 </body>
</html>
خروجی مشاهده خروجی مثال

توضیح کد مثال :

  • در بخش ابتدایی کد namespace مورد نیاز را تعریف نموده و سپس توسط کد اسکریپت یک شی DataSet ساخته ، مقایدیر فایل XML را خوانده و دورن آن ریخته ایم . سپس کنترل DataList با id برای با "Countries" را به شی DataSet متصل کرده و توسط متد ( )DataBind اطلاعات DataSet را به کنترل منتقل کرده ایم .
  • سپس یک کنترل DataList را در بخش اصلی صفحه ایجاد کرده ایم .  از دستور <%("Container.DataItem("title#%> برای خواندن محتویات هر آیتم شی DataSet استفاده کرده و در خانه مربوط به آن در کنترل DataList نمایش داده ایم .

اضافه کردن قالب ( Styles ) مورد نظر به کنترل DataList :

می توانید به راحتی ، همانند کد مثال زیر خواص و قالب مورد نظر خود را برای نمایش در کنترل DataList تعیین نمایید .
بخش تعریف کد کنترل DataList را برای اعمال خواص مورد نظر خود جهت قالب دهی آن ، به صورت زیر تغییر داده ایم . با مشاهده خروجی و مقایسه آن با مثال قبلی ، به اثر خواص ( Styles ) پی خواهید برد :

کد    <form id="Form1" runat="server">
        <asp:DataList id="Countries" runat="server"
           cellspacing="2"
           borderstyle="inset"
           backcolor="#e8e8e8"
           width="100%"
           headerstyle-font-name="Verdana"
           headerstyle-font-size="12pt"
           headerstyle-horizontalalign="center"
           headerstyle-font-bold="true"
           itemstyle-backcolor="#778899"
           itemstyle-forecolor="#ffffff"
           footerstyle-font-size="9pt"
           footerstyle-font-italic="true">
         
           <HeaderTemplate>
                My Countries
          </HeaderTemplate>

          <ItemTemplate>
                 <%#Container.DataItem("title")%>  پایتخت =
                 <%#Container.DataItem("Capital")%> و قاره =
                <%#Container.DataItem("Continent")%>
           </ItemTemplate>


           <FooterTemplate>
               Developer Studio Network
           </FooterTemplate>

       </asp:DataList>
   </form>
خروجی مشاهده خروجی مثال


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1 حمایت نمایید :

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

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1