23‏/09‏/2018

Dros4U دروس4يو

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



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

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




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

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


الفرق بين ال 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 في Asp.net من حيث الكود وترقيم الصفحة والإنتقال إلى صفحة أخرى وأيهما أفضل للإستخدام - موقع دروس4يو Dros4U

DataList
في هذا الدرس نتحدث عن الفرق بين ال DataList و ListView في Asp.net من حيث الكود وترقيم الصفحة والإنتقال إلى صفحة أخرى وأيهما أفضل للإستخدام - موقع دروس4يو Dros4U

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

التعليقآت

سجل بريدك الإلكتروني هنا لتصلك أحدث المواضيع