الفرق بين ال DataList و ListView في Asp.net من حيث الكود

درس سريع في كورس Asp.net

الفرق بين ال DataList و ListView في Asp.net من حيث الكود

إن عرض البيانات بطريقة جميلة للزائر هو أساس عمل مطورو المواقع، وقد وفرت مايكروسوفت مجموعة أدوات تحت بند Data في صندوق الأدوات لهذا العرض، فإن أردت عرض البيانات على شكل جدول فإنك ستستخدم على سبيل المثال أداة GridView، وإن أردت عرض البيانات في عمودين أو أكثر فإنك ستستخدم DataList وغيرها.

في هذا الموضوع سنتظرق للحديث عن أداة DataList و ListView في Asp.net مع إستخدام كود ال VB.net في الخلفية.
البرنامج المستخدم هو فيجوال ستديو 2010

الفرق بين ال DataList و ListView في Asp.Net من حيث الكود

يتم إضافة أداة ال ListView وتخصيص مصدر البيانات لها من خلال الخاصية DataSourceID

وأهم قالبين من قوالب ال ListView هما

LayoutTemplate 

ItemTemplate ويجب تخصيص العنصر placeHolder في ال ListView إما في ال LayoutTemplate أو ال GroupTemplate ويتم ذلك بإعطاء القيمة itemPlaceholder لخاصية ID التابعة للأداة ويجب أيضا إعطاء القيمة server للخاصية runat التابعة لل placeholder ـ حيث سيتم استبدال محتوى أداة placeHolder في الهيكل العام ( الخلفية ) بمحتوى العنصر ItemTemplate 

 <div dir="rtl">    

                <asp:ListView ID="ListView1" runat="server" GroupItemCount="4" 

                     DataSourceID="SqlDataSource1">

                    <LayoutTemplate>

                        <table cellpadding="2" runat="server" id="tblProducts" style="height: 320px;">

                            <tr align="left" runat="server" id="groupPlaceholder">

                            </tr>

                        </table>

                        <asp:DataPager runat="server" ID="dpMyDatePager" PageSize="9">

                            <Fields>

                                <asp:NumericPagerField ButtonCount="2" PreviousPageText="<--" NextPageText="-->" />

                                <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowFirstPageButton="True" />

                            </Fields>

                        </asp:DataPager>

                    </LayoutTemplate>

                    <GroupTemplate>

                        <tr runat="server" id="productRow" style="height: 80px">

                            <td runat="server" id="itemPlaceholder">

                            </td>

                        </tr>

                    </GroupTemplate>

                    <ItemTemplate>

                        <td id="Td1" valign="top" width="279px" align="left" runat="server">

                            <div style="height: 350px; width: 100%; overflow-y: auto; overflow-x: hidden; margin-left:39px;">

                                <table class="mtbl">

                                    <tr>

                                        <td class="rTd">

                                                <%--<img src="<%#Eval("Pic")%>" style="width:196px;height:196px;" />--%>

                                          <asp:Image ID="Image1" runat="server" Height="250px" 

                            ImageUrl='<%# Eval("Pic") %>' Width="215px" style="background-size: cover;" />

                                        </td>

                                    </tr>

                                    <tr>

                                        <td align="center">

                                            <h4><asp:Label ID="Label1" runat="server" Text='<%#Eval("NameRewaya")%>' Font-Bold="True"></asp:Label></h4>

                                        </td>

                                    </tr>

                                </table>

                             <%--   <div id="details" class="details">

                                    <asp:Label ID="Label2" runat="server" Text='<%#Eval("Description")%>'></asp:Label>

                                </div>--%>

         

                            </div>

                        </td>

                    </ItemTemplate>

                </asp:ListView>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 

        ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 

        SelectCommand="SELECT * FROM [Rewayat]"></asp:SqlDataSource> 

وفي حالة أردت الإنتقال إلى صفحة أخرى مع تمرير رقم ID سنقوم بالتالي:

<tr>

<td align="center">

<asp:Button ID="Button1" runat="server" Text="إقـرأ الـمـزيـد" CommandName="Save" CommandArgument='<%# Eval("IDRewaya") %>' Font-Bold="True" />

</td>

</tr>

نضع Button ونعطيه CommandName + CommandArgument

بحيث تكون قيمة ال CommandArgument هي القيمة المراد تمريرها

وفي الكود الخلفي VB.net نكتب التالي:

Protected Sub ListView1_ItemCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ListViewCommandEventArgs) Handles ListView1.ItemCommand

        If (e.CommandName = "Save") Then

            Response.Redirect("ViewDetails.aspx?id=" + e.CommandArgument.ToString)

        End If

    End Sub

بحيث تم التوجيه إلى الصفحة الأخرى وهي ViewDetails.aspx.

أما في حالة ال DataList فيكون الكود كالتالي

   <asp:DataList ID="DataList1" runat="server" DataKeyField="IDRewaya" 

        DataSourceID="SqlDataSource1" RepeatColumns="4" 

        RepeatDirection="Horizontal" onitemcommand="DataList1_ItemCommand" CellPadding="5" 

                HorizontalAlign="Center">

        <ItemTemplate>

            <table border="1" class="style1" dir="rtl">

                <tr>

                    <td bgcolor="#66FF66" class="style2" style="text-align: center">

                        <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="Large" 

                            Text='<%# Eval("NameRewaya") %>'></asp:Label>

                    </td>

                </tr>

                <tr>

                    <td bgcolor="#FFFF99" class="style3" style="text-align: center">

                        <asp:Label ID="Label2" runat="server" Text='<%# Eval("Type") %>'></asp:Label>

                    </td>

                </tr>

                <tr>

                    <td class="style4" style="text-align: center">

                        <asp:Image ID="Image1" runat="server" Height="250px" 

                            ImageUrl='<%# Eval("Pic") %>' Width="215px" style="background-size: cover;" />

                    </td>

                </tr>

                <tr>

                    <td class="style5" style="text-align: center">

                        <asp:Button ID="Button1" runat="server" BackColor="#6699FF" 

                            CommandName="Viewdetails" CommandArgument='<%# Eval("IDRewaya") %>' 

                            Font-Bold="True" ForeColor="White" 

                            Text="إقـرأ الـمـزيـد" Target="_blank" />

                    </td>

                </tr>

            </table>

            <br />

        </ItemTemplate>

    </asp:DataList>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 

        ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 

        SelectCommand="SELECT * FROM [Rewayat]"></asp:SqlDataSource>

ونفس الأمر في حالة أردتم توجيه القيم إلى صفحة أخرى

نضع Button داخل ال DataList وإعطاؤه Name + Argumant 

وإرفاق كود ال VB.net في الخلفية.

بخصوص الترقيم Pageing لل DataList فهي لا تدعمه وإنما تستطيع وضعه من ضمن الكود، وهذا يستغرق وقت طويل، بينما في ال ListView تستطيع وضعه بسهولة كما أرفقناه في المثال أعلاه.

الصورة النهائية لكل من ال DataList + ListView 

ListView

DataList

بما أن النتيجة هي نفسها لذا أنصح بإستخدام ال ListView وعدم إضاعة الوقت مع ال DataList حتى لا تخسر وقتك كما فعلت أنا :D .
بالتوفيق