Статьи

Создайте повторно используемую сетку данных, чтобы сделать жизнь проще

Вы все еще работаете с классическим ASP для сайтов своих клиентов? Вы пишете раздел администрирования на 20 или 30 страниц для клиентов, которые просто хотят редактировать свои страницы новостей и часто задаваемых вопросов? Ну, положи свои палки, потому что я собираюсь вручить тебе золотой Zippo!

Если вы работаете фрилансером или управляете небольшой дизайнерской компанией, то вы не можете с финансовой точки зрения оправдать продолжение использования Classic ASP. Всего лишь около 8 месяцев назад я могу вспомнить, что на 8 или 10 страницах я просто выполнял ADD / EDIT / DELETE для таблицы базы данных. Теперь я могу сделать это на одной странице, которую можно использовать многократно. Я много и много слышал о .NET, но я так долго катался с ASP, и всякий раз, когда я смотрел на него, изменения казались слишком пугающими. Я не могу вспомнить, что заставило меня сломаться и попасть в .NET, но как только я увидел, что можно сделать, я понял, что принял правильное решение. Изучив несколько книг, я создал разделы администрирования для 6 клиентских сайтов, и каждый из них стал более функциональным и простым в использовании, чем предыдущий.

То, что я собираюсь научить вас, является сетью данных ASP.NET. Я предполагаю, что у вас есть базовое понимание ASP.NET и VB.NET.

DataGrid

С некоторой начальной работой вы можете собрать таблицу данных ADD / EDIT / DELETE, которая сделает вашу жизнь намного проще. Представьте себе, что каждый раз, когда ваш клиент хочет отредактировать простую таблицу базы данных, например календарь, раздел «Что нового» или «Часто задаваемые вопросы», все, что вам нужно сделать, — это сделать копию последней созданной вами таблицы данных и потратить 20 минут на внесение изменений. , Это моя любимая часть ASP.NET, просто потому, что это экономит время. Теперь вы можете видеть, что это будет делать для вас.

Я думаю, что лучший способ продемонстрировать это — показать эволюцию сетки данных, которую я сейчас использую. Все началось с РЕДАКТИРОВАНИЯ / УДАЛЕНИЯ, а теперь он выполняет все мои простые, но трудоемкие задачи.

Прямо из коробки сетка данных выполняет практически все, что вам нужно. Вот что вам нужно для начала.

Sub Page_Load(sender as object, e as eventargs)  If Not Page.IsPostBack Then  BindDataGrid()  End If  End Sub  Sub BindDataGrid()  Dim objConn as New OleDbConnection("Provider=Microsoft  .Jet.OLEDB.4.0; Data Source=c:inetpubsitessite.com  wwwdatabasesite.mdb")  objConn.Open()   Dim ds as Dataset = New DataSet()  Dim objAdapter as New OleDbDataAdapter("SELECT * FROM  News ORDER BY NewsDate DESC;", objConn)   objAdapter.Fill(ds,"News")   EditNews.DataSource = ds.Tables("News").DefaultView  EditNews.DataBind()   objConn.Close()  End Sub 

В этом примере я написал функцию BindDataGrid() которая будет извлекать данные из базы данных и записывать их в сетку данных. Вы также можете заметить, что я использую OleDb. Вы можете заменить любой тип соединения, который хотите, просто убедитесь, что импортировали правильные пространства имен. Я также написал функцию Page_Load которая просто запускает BindDataGrid() при первой загрузке страницы.

Определение сетки данных

Далее я покажу вам начало таблицы данных. Это часть, где вы определяете, какая информация будет в каком столбце, и решаете, как выглядит интерфейс.

 <form runat="server">        <asp:datagrid id="EditNews" runat="server" GridLines="Horizontal"  Cellspacing="0" CellPadding="5" EditItemStyle-BackColor="#333366"  EditItemStyle-ForeColor="white" DataKeyField="NewsID"  OnEditCommand="DoItemEdit" OnUpdateCommand="DoItemUpdate"  OnCancelCommand="DoItemCancel" OnDeleteCommand="DoItemDelete"  AutoGenerateColumns="false" AlternatingItemStyle-BackColor="#CCCCCC"  BorderColor="black">            <columns>                <asp:boundcolumn HeaderText="Date"                DataField="NewsDate" ReadOnly="true"                HeaderStyle-BackColor="#333366"                HeaderStyle-ForeColor="#FFFFFF" />                <asp:templatecolumn HeaderText="News Title"                ItemStyle-Width="200"    HeaderStyle-BackColor="#333366"                HeaderStyle-ForeColor="#FFFFFF">                    <ItemTemplate>                        <asp:label Text='<%# Container.DataItem                        ("NewsTitle")%>' runat="server"></asp:label>                    </ItemTemplate>                    <EditItemTemplate>                        <asp:textbox ID="NewsTitle"                        TextMode="MultiLine" Rows="3" size="60"                        runat="server" Text='<%#                        Container.DataItem("NewsTitle")%>' />                    </EditItemTemplate>                </asp:templatecolumn>                <asp:templatecolumn HeaderText="NewsBody"                ItemStyle-Width="400"                HeaderStyle-BackColor="#333366"                HeaderStyle-ForeColor="#FFFFFF">                    <ItemTemplate>                        <asp:label Text='<%# Container.DataItem                        ("NewsBody")%>'                         runat="server"></asp:label>                    </ItemTemplate>                    <EditItemTemplate>                        <asp:textbox ID="NewsBody"                        Columns="50" TextMode="MultiLine"                        Rows="8" runat="server" Text='<%#                        Container.DataItem("NewsBody")%>' />                    </EditItemTemplate>                </asp:templatecolumn>                <asp:templatecolumn HeaderText="News Author"                ItemStyle-Width="100" HeaderStyle-BackColor="#333366"                HeaderStyle-ForeColor="#FFFFFF">                    <ItemTemplate>                        <asp:label Text='<%# Container.DataItem                        ("NewsWrittenBy")%>' runat="server"></asp:label>                    </ItemTemplate>                    <EditItemTemplate>                        <asp:textbox ID="NewsAuthor" width="100"                        runat="server" Text='<%# Container.DataItem                        ("NewsWrittenBy")%>' />                    </EditItemTemplate>                </asp:templatecolumn>                <asp:templatecolumn HeaderStyle-BackColor="#333366"                 HeaderStyle-ForeColor="#FFFFFF"                 ItemStyle-Width="75">                    <ItemTemplate>                        <asp:button CommandName="Edit"                        Text="Edit" runat="server" />                    </ItemTemplate>                    <EditItemTemplate>                        <asp:button CommandName="Update"                        Text="Update" runat="server" Width="75" />                        <asp:button CommandName="Delete"                        Text="Delete" runat="server" Width="75" />                        <asp:button CommandName="Cancel"                        Text="Cancel" runat="server" Width="75" />                    </EditItemTemplate>                </asp:templatecolumn>            </columns>        </asp:datagrid>    </form> 

Атрибуты Кодекса

Теперь это выглядит как большой HTML, но следует помнить, что хороший кусок этого никогда не изменится. Часть, которая действительно изменяется, на самом деле очень легко манипулировать. Давайте начнем с <asp:datagrid> и рассмотрим некоторые его атрибуты. Прежде всего, вы должны заключить тег в тег <form> с помощью runat="server" , иначе ни одна из ваших функций обновления и удаления не будет работать. Далее у вас есть цвета, отступы и границы. Вы можете понять это. Главное, на что мы хотим обратить внимание — это атрибуты функциональности.

DataKeyField — это то, что должно быть изменено для каждой таблицы, которую вы используете. Он содержит уникальный идентификатор каждой из ваших записей и позволит вам обновлять и удалять эти записи. Следующие важные вещи — «О командах». Если вы посмотрите на пример, то увидите OnUpdateCommand , OnCancelCommand , OnEditCommand и OnDeleteCommand . Они сообщают сетке данных, какую функцию запускать, когда кто-то нажимает эту кнопку. Эти функции будут следующим примером. Однако до этого я хотел упомянуть форматирование столбцов и рассказать о том, как это работает.

Для каждого столбца есть шаблон, даже тот, который содержит кнопки. Каждый шаблон содержит <ItemTemplate> и <EditItemTemplate> . <ItemTemplate> будет содержать динамическое содержимое из базы данных в форме только для чтения. В <EditItemTemplate> вы должны написать все для отображения в <asp:textbox> s. Это будет то, что люди видят, когда они нажимают кнопку редактирования в определенной строке. Вы будете использовать Container.DataItem("FieldName") для отображения динамического содержимого с обеих сторон: только для чтения и редактирования. Теперь посмотрим, как выглядят эти функции.

 Sub DoItemEdit(objSource as Object, objArgs As DataGridCommandEventArgs)    EditNews.EditItemIndex = objArgs.Item.ItemIndex    BindDataGrid()  End Sub  Sub DoItemCancel(objSource as Object, objArgs As DataGridCommandEventArgs)    EditNews.EditItemIndex = -1    BindDataGrid()  End Sub  Sub DoItemUpdate(objSource as Object, objArgs As DataGridCommandEventArgs)    Dim strTitle, strBody,strWrittenBy as String    Dim intID as String    strTitle = Ctype(objArgs.Item.Cells(1).Controls(1), Textbox).text    strBody = Ctype(objArgs.Item.Cells(2).Controls(1), Textbox).text    strWrittenBy = Ctype(objArgs.Item.Cells(3).Controls(1), TextBox).text    'strDate =    intID = EditNews.DataKeys(objArgs.Item.ItemIndex)     Dim strSQL as String    strSQL = "UPDATE News SET NewsTitle='" & strTitle & _             "', NewsBody='" & strBody & _             "', NewsWrittenBy='" & strWrittenBy & _             "' WHERE NewsID=" & intID & ";"     ExecuteSQLStatement(strSQL)     EditNews.EditItemIndex = -1    BindDataGrid()  End Sub  Sub DoItemDelete(objSource as Object, objArgs as DataGridCommandEventArgs)    Dim intID as String    Dim strSQL as String    intID = EditNews.DataKeys(objArgs.Item.ItemIndex)     strSQL = "DELETE FROM News WHERE NewsID=" & intID & ";"     ExecuteSQLStatement(strSQL)     EditNews.EditItemIndex = -1    BindDataGrid()  End Sub  Sub ExecuteSQLStatement(strSQL as String)    Dim objConn as New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;    Data Source=c:inetpubsitessite.comwwwdatabasesite.mdb")    objConn.Open()     Dim objCommand as New OleDbCommand(strSQL, objConn)     objCommand.ExecuteNonQuery()     objConn.Close()  End Sub 
  DoItemEdit и DoItemCancel , как я уверен, вы можете сказать, посмотрев на них, самые простые функции.  В конце концов они меняются, где EditItemIndex .  EditItemIndex - это EditItemIndex значение, которое указывает, какой элемент находится в режиме редактирования.  Если для EditItemIndex установить EditItemIndex -1, то ни один из элементов не будет в режиме редактирования.  Как вы можете видеть в примере, DoItemEdit берет ItemIndex и устанавливает равным ему EditItemIndex , и все, что когда-либо делает DoItemCancel , устанавливает EditItemIndex равным -1. 

Теперь самое сложное во всем этом процессе (что не так уж сложно). Функция DoItemUpdate меня головную боль при первом запуске. Я понял, что очень трудно сослаться на объект, который находится внутри сетки данных. Это достигается путем обращения к его ячейке и контрольному номеру. Вот как это работает. objArgs ссылается на выбранную строку, затем Cells ссылается на номер ячейки, отсчитываемый слева направо, начиная с 0, а Controls ссылается на номер элемента управления, будь то Textbox, Calendar или любой другой элемент управления, внутри эта клетка. Затем с Ctype функции Ctype их значения преобразуются в строки и записываются в оператор SQL UPDATE. Затем я написал функцию ExecuteSQLStatement чтобы взять строку и запустить ее в базе данных.

Далее DoItemDelete функция DoItemDelete , которая является последней из наших базовых функций. Все, что здесь требуется, - это использовать один и тот же вызов Datakey из функции обновления, написать оператор SQL DELETE и отправить его в функцию ExecuteSQLStatement .

Единственное, что я оставил для вас, чтобы выяснить, это как выполнить Add, в конце концов, если бы я рассказал вам все, вы бы ничему не научились! Я покажу вам в правильном направлении, хотя. Вы должны написать функцию, которая добавляет пустую строку в базу данных, а затем делает EditItemIndex этой строкой.

Теперь я знаю, что то, что мы только что сделали, может показаться большой работой. Это потому, что это много, но самое большое в этом то, что это прекрасная основа для всего, что вам когда-либо нужно будет делать, вплоть до редактирования таблицы или представления. Мой опыт показывает, что время, которое требуется для написания этой статьи, более чем компенсируется теми часами, которые вы экономите каждый раз, когда вам приходится писать раздел администрирования для веб-сайта. Если подумать, все, что нужно изменить, это строки подключения, операторы SQL и столбцы шаблонов. Я могу вытащить сетку данных за 20 минут, которая отредактирует простую таблицу, и закончить часы в указанное время. Я думаю, что это один инструмент, без которого успешный веб-программист не может обойтись!