для создания новостной странички с использованием технологий
ASP.NET и jQuery нам необходимо:
1. Создать страндартную aspx-страницу.
Назовем ее news.aspx. Бросим на форму два компонента: GridView
(назовем его GVNews) и SqlDataSource (назовем его SQLDSNews). Для
GVNews источником данных указываем SQLDSNews.
Далее необходимо настроить источник данных: выбираем из списка
соединение с сервером (или создаем новое).. далее указываем SELECT
запрос, например такой:
SELECT TOP (10) idNews, Preview, Header, Anonce, CreateDate FROM
News ORDER BY CreateDate DESC
В данном запросе мы получаем привьюшки, заголовки, анонсы и даты
публикации последних 10 новостей (... TOP (10) .... ORDER BY
CreateDate DESC)
Отображение GVNews настраиваем по своему усмотрению, я же создал
один TemplateField, переключился в режим редактирования кода и
отредактировал его следующим образом:
<asp:TemplateField HeaderText="Заголовок">
<ItemTemplate>
<TABLE cellPadding=5 border="0" width="100%">
<TR>
<TD width="50px" ><asp:Image id="ImgNws" runat="server"
width="50px" ImageUrl='<%# Eval("Preview") %>'
></asp:Image>
</TD>
<TD><div style="FONT-WEIGHT: bold"><asp:Label
id="LBHdrAnn" runat="server" Text='<%# Eval("Header") %>'
></asp:Label>
</div>
<span id='anonce<%# Eval("idNews") %>'><%#
Eval("Anonce") %></span>
<span id='text<%# Eval("idNews") %>'></span>
</TD>
</TR>
<TR>
<TD>
</TD>
<TD align=right>
<a id="btn<%# Eval("idNews") %>" onclick="getnews('<%#
Eval("idNews") %>');return false;">Подробнее</a>
<br />Опубликовано: <asp:Label id="LblCrtDate"
runat="server" Text='<%# Eval("CreateDate") %>'
></asp:Label>
</TD>
</TR>
</TABLE>
</ItemTemplate>
Анонсы новостей мы помещаем в спан с id=anonce+idNews (например
idNews <span id='anonce24'>), содержимое которого наполняем
данными из БД
<span id='anonce<%# Eval("idNews") %>'><%#
Eval("Anonce") %></span>
Аналогичным образом создали текст новости, однако содержимое пока
оставляем пустым
<span id='text<%# Eval("idNews") %>'></span>
наполнять его будем при необходимости по нажатию на кнопку
подробнее
<a id="btn<%# Eval("idNews") %>" onclick="getnews('<%#
Eval("idNews") %>');return false;">Подробнее</a>
Типерь рассмотрим клиентскую часть (скрипт):
Подключаем jQuery: <script src="/js/jquery/jquery-1.4.1.min.js"
type="text/javascript"></script>
Добавляем функцию получения новости getnews(id) и две функции
rollup(id) и spread(id) для переименования кнопки ("Подробнее ...."
и "Свернуть ....") при просмотре полной...