Реалізація ASP.NET сторінок каталогу автотоварів

<asp:Panel ID="Panel1" runat="server" ScrollBars="Auto">

        <asp:GridView  ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"

            DataKeyNames="ID">

            <Columns>

                <asp:BoundField DataField="AltText" HeaderText="AltText" SortExpression="AltText" />

                <asp:BoundField DataField="parameters" HeaderText="parameters" SortExpression="parameters" />

                <asp:BoundField DataField="description" ItemStyle-Height="120px"

                    HeaderText="description" SortExpression="description" >

                    <ItemStyle Height="120px" />

                </asp:BoundField>

                <asp:BoundField DataField="firma" HeaderText="firma" SortExpression="firma" />

                <asp:BoundField DataField="radius" HeaderText="radius" SortExpression="radius" />

                <asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID" />

                <asp:BoundField DataField="IDprod" HeaderText="IDprod" InsertVisible="False" ReadOnly="True"

                    SortExpression="IDprod" />

                <asp:CommandField ShowEditButton="True" DeleteText="Видалити"

                    EditText="Редагувати" UpdateText="Оновити" />

                <asp:CommandField ShowDeleteButton="True" DeleteText="Видалити" />

            </Columns>

        </asp:GridView>

    </asp:Panel>

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

        SelectCommand="SELECT [AltText], [parameters], [description], [firma], [radius], [ImageByte], [ID], [IDprod] FROM [Table_Dusku2]"

        UpdateCommand="UPDATE [Table_Dusku2] SET [AltText] = @AltText, [parameters] = @parameters, [description] = @description, [firma] = @firma, [radius] = @radius WHERE [ID] = @ID"

        DeleteCommand="DELETE FROM [Table_Dusku2] WHERE [ID] = @ID">

        <DeleteParameters>

            <asp:Parameter Name="ID" Type="Object" />

        </DeleteParameters>

        <UpdateParameters>

            <asp:Parameter Name="AltText" Type="String" />

            <asp:Parameter Name="parameters" Type="String" />

            <asp:Parameter Name="description" Type="String" />

            <asp:Parameter Name="firma" Type="String" />

            <asp:Parameter Name="radius" Type="String" />

            <asp:Parameter Name="ImageByte" Type="Object" />

            <asp:Parameter Name="IDprod" Type="Int32" />

            <asp:Parameter Name="ID" Type="Object" />

        </UpdateParameters>

        <InsertParameters>

            <asp:Parameter Name="AltText" Type="String" />

            <asp:Parameter Name="parameters" Type="String" />

            <asp:Parameter Name="description" Type="String" />

            <asp:Parameter Name="firma" Type="String" />

            <asp:Parameter Name="radius" Type="String" />

            <asp:Parameter Name="ImageByte" Type="Object" />

            <asp:Parameter Name="ID" Type="Object" />

        </InsertParameters>

    </asp:SqlDataSource>

3.4. Клієнтська сторона

3.4.1. Сторінка клієнта Shop.aspx

На стороні адміністратора дані додавались в базу даних а тут будемо їх зчитувати. Для реалізації цього завдання використаємо елемент керування Gridview. Шаблон повністю буде сформований у лінійній формі і нагадуватиме елемент керування Repeater. Нижче показано код який містить сторінка “Shop.aspx”:

       

    <asp:GridView ID="GridView1"  runat="server" DataSourceID="Ods_Products" CssClass="GridProd"

        AutoGenerateColumns="False" BackColor="White" BorderStyle="None" BorderWidth="1px"

        CellPadding="4" GridLines="None" OnRowDataBound="MyGridView_RowDataBound" AllowPaging="True">

        <PagerSettings PageButtonCount="5" Mode="Numeric" />

        <Columns>

            <asp:TemplateField>

                <ItemTemplate>

                    <table>

                        <tr>

                            <td>

                            </td>

                        </tr>

                    </table>

                    <table style="width: 100%;" class="ccccc">

                        <tr style="background-image: url(images/gridViewHeader.png);">

                            <td class="ccccc"  >

                                <table border="0" style="border: solid 1px gray; width:100%;" class="ccccc">

                                    <tr>

                                        <td style="bottom: 0px;" valign="top">

                                            <img src="ImageFromDB.ashx?IDprod=<%# Eval("ProdID")%>" style="width: 100px; height: 100px;

                                                top: 0px;" />

                                        </td>

                                        <td align="justify" valign="top" style="width:100%;">

                                            <div style="padding: 5px 5px 5px 5px;">

                                                <%# Eval("Description")%>

                                            </div>

                                        </td>

                                    </tr>

                                    <tr>

                                        <td colspan="2" align="right" style="width:100%;">

                                            <small><i style="font-size: 20px; color: #800000">між болтами:

                                                <%# Eval("parameters")%>&nbsp&nbsp&nbsp Виробнаки:

                                                <%# Eval("firma")%>

                                                &nbsp&nbsp&nbsp Дата поступлення:

                                                <%# Eval("_AltText")%>

                                            </i></small>

                                        </td>

                                    </tr>

                                </table>

                            </td>

                        </tr>

                    </table>

                </ItemTemplate>

            </asp:TemplateField>

        </Columns>

        <FooterStyle BackColor="Red" ForeColor="Red" />

        <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Center" CssClass="PagerGridView" />

        <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />

        <HeaderStyle BackColor="White" Font-Bold="True" ForeColor="White" />

    </asp:GridView>

Для доступу до даних використаємо ObjectDataSource:

<asp:ObjectDataSource ID="Ods_Products" runat="server" SelectMethod="GetAllProduct"

TypeName="BLL"></asp:ObjectDataSource>

 З його допомогою ми можемо використати необхідні класи які були описані раніше. На сторінці зчитуються дані за допомогою властивостей класу “Product.cs”:

<%# Eval("Firma")%>

Після цього сторінка “Shop.aspx” набуде вигляду:

 

 

Висновки

У роботі використані такі програмні засоби: X(HTML), CSS стилі, C# (є повністю об’єктно-орієнтовною мовою програмування.), XML а також використано одну з найпопулярніших Web-технологій – ASP.NET версії 2.0, технологію доступу до даних ADO.NET на машині SQL Server 2005. Даний сайт розроблявся у середовищі Visual Studio 2008. Використано вбудовані функції ASP.NET 2.0 які суттєво скорочують написання коду. Сторінки формуються на скомпільованій програмі які написані мовою C#. Розроблено дизайн сайту з використанням нової функціональної можливості в ASP.NET 2.0 – “master-page” а також з використанням каскадних таблиць стилів CSS та технології CSS-sprites, що в разі потреби легко модифікувати. Решта сторінок наслідують дизайн з майстер-сторінки що досить суттєво скорочує написання великого коду, оскільки на сторінках які унаслідують майстер сторінку вже не потрібно писати такі теги як “<head>”, “<body>”,“<form>”.

Для керуванням сайтом та роботи над даними створено адміністративну сторону яка дає адміністратору такі можливості:

• Додавати, видаляти та редагувати дані.
• Завантажувати зображення на сервер.
• Додавати корисні посилання у вигляді реклами.

Отже, сайт розроблявся таким чином, щоб кожна складова частина могла працювати без іншої. Як для сторони клієнта так і для сторони адміністратора створено зрозумілий користувацький інтерфейс.

 

Список використаних літературних джерел

1. Марко Беллиньясо. Разработка Web – приложений в среде ASP.NET 2.0 “задача – проект - решение” – “Диалектика” Москва – Санкт – Петербург – Киев 2007. ст. - 639.
2. Мэтью Мак – Дональд, Марио Шпушта. Microsoft ASP.NET 2.0 с примерами на С# для професионалов – “Вильямс” – Москва – Санкт – Петербург – Киев 2006. ст. - 1407.
3. Дино Экспозито. ASP.NET 2.0 Базовый курс. Руская редакцыя Microsoft. Питер, Киев, Харьков, Минск 2005. ст. - 687.
4. Дино Экспозито. ASP.NET 2.0 Углубленное изучение. Руская редакцыя Microsoft. Питер, Киев, Харьков, Минск 2008. ст. - 590.