Поиск…
Связывание данных
Существует два способа привязки GridView. Вы можете вручную сделать это, установив свойство DataSource и вызвав DataBind() , или вы можете использовать DataSourceControl, например SqlDataSource .
Ручное связывание
Создайте свой GridView:
<asp:GridView ID="gvColors" runat="server"></asp:GridView>
Сначала создайте или извлеките исходные данные для GridView. Затем назначьте данные в свойство DataSource GridView. Наконец, вызовите DataBind() .
List<string> colors = new List<string>();
colors.Add("Red");
colors.Add("Green");
colors.Add("Blue");
gvColors.DataSource = colors;
gvColors.DataBind();
DataSourceControl
Создайте свой DataSourceControl:
<asp:SqlDataSource ID="sdsColors"
runat="server"
ConnectionString="<%$ MyConnectionString %>"
SelectCommand="SELECT Color_Name FROM Colors">
</asp:SqlDataSource>
Создайте свой GridView и установите свойство DataSourceID :
<asp:GridView ID="gvColors"
runat="server"
DataSourceID="sdsColors">
</asp:GridView>
Колонны
Существует семь разных типов столбцов, которые можно использовать в GridView.
<asp:GridView ID="GridView1" runat="server">
<Columns>
...
</Columns>
</asp:GridView>
BoundField:
<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />
ButtonField:
<asp:ButtonField ButtonType="Button" HeaderText="Select Employee" Text="Select"/>
CheckBoxField:
<asp:CheckBoxField DataField="IsActive" HeaderText="Is Active" />
CommandField:
<asp:CommandField ShowDeleteButton="true"
ShowEditButton="true"
ShowInsertButton="true"
ShowSelectButton="true" />
HyperLinkField:
<asp:HyperLinkField HeaderText="Employee Profile"
DataNavigateUrlFields="EmployeeID"
DataNavigateUrlFormatString="EmployeeProfile.aspx?EmployeeID={0}" />
ImageField:
<asp:ImageField HeaderText="Photo"
DataImageUrlField="EmployeeID"
DataImageUrlFormatString="/images/{0}" />
TemplateField:
<asp:TemplateField>
<HeaderTemplate>
Name
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblEmployeeName"
runat="server"
Text='<&# Eval("EmployeeName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
Сильно типизированный GridView
Начиная с веб-элементов управления Asp.net 4.5, вы можете воспользоваться преимуществами строго типизированного привязки, чтобы получить поддержку IntelliSense и ошибки компиляции.
Создайте класс, который содержит вашу модель:
public class Album
{
public int Id { get; set; }
public string Name { get; set; }
public string Artist { get; set; }
}
Определите элемент управления GridView на своей странице:
<asp:GridView ID="Grid" runat="server" AutoGenerateColumns="false" ItemType="YourNamespace.Album">
<Columns>
<asp:TemplateField HeaderText="Id">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text="<%# Item.Id %>"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text="<%# Item.Name %>"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Artist">
<ItemTemplate>
<asp:Label ID="lblCity" runat="server" Text="<%# Item.Artist %>"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Загрузите данные и привяжите их:
var albumList = new List<Album>
{
new Album {Id = 1, Artist = "Icing (a Cake cover band)", Name = "Toppings Vol. 1"},
new Album {Id = 2, Artist = "Fleetwood PC", Name = "Best of Windows"},
new Album {Id = 3, Artist = "this.Bandnames", Name = "TH_ (Pronounced \"Thunderscore\")"},
};
Grid.DataSource = albumList;
Grid.DataBind();
Обработка командного события
GridViews позволяет отправлять команды из строки GridView. Это полезно для передачи информации, относящейся к строке, в обработчик событий в качестве аргументов команды.
Чтобы подписаться на командное событие:
<asp:GridView ID="GridView1" ... OnRowCommand="GridView1_RowCommand">
Кнопки являются наиболее распространенным способом поднять команды. Они также поддерживают способ указания аргументов команды. В этом примере аргумент представляет собой ID элемента, который представляет строка.
<TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server"
CommandName="SampleCmd"
CommandArgument='<%# Eval("ID") %>'>
</asp:LinkButton>
</ItemTemplate>
</TemplateField>
В качестве альтернативы можно использовать CommandField столбца CommandField который предоставляет наиболее распространенные элементы управления.
Обработка события в коде позади:
protected void GridView1_RowCommand(object source, GridViewCommandEventArgs e)
{
if (e.CommandName == "SampleCmd")
{
var id = e.CommandArgument;
}
}
Обратите внимание, что CommandName используемый в этом примере, является произвольным и является выбором разработчика. Существует, однако, набор предопределенных имен, которые сам GridView распознает. Соответствующие события возникают при запуске этих команд.
| Название команды | События, поднятые |
|---|---|
| отменить | RowCancelingEdit |
| удалять | RowDeleting, RowDeleted |
| редактировать | RowEditing |
| страница | PageIndexChanging, PageIndexChanged |
| Выбрать | SelectedIndexChanging, SelectedIndexChanged |
| Сортировать | Сортировка, сортировка |
| Обновить | RowUpdating, RowUpdated |
Paging
ObjectDataSource
Если вы используете ObjectDataSource, для вас уже почти все обрабатывается, просто скажите GridView на AllowPaging и дайте ему PageSize .
<asp:GridView ID="gvColors"
runat="server"
DataSourceID="sdsColors"
AllowPaging="True"
PageSize="5">
</asp:GridView>
<asp:SqlDataSource ID="sdsColors"
runat="server"
ConnectionString="<%$ MyConnectionString %>"
SelectCommand="SELECT Color_ID, Color_Name FROM Colors">
</asp:SqlDataSource>
Ручное связывание
Если привязка вручную, вы должны обработать событие PageIndexChanging . Просто установите DataSource и PageIndex и повторно привяжите GridView.
<asp:GridView ID="gvColors"
runat="server"
AllowPaging="True"
PageSize="5"
OnPageIndexChanging="gvColors_PageIndexChanging">
</asp:GridView>
C #
protected void gvColors_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
gvColors.DataSource = // Method to retrieve DataSource
gvColors.PageIndex = e.NewPageIndex;
gvColors.DataBind();
}
VB.NET
Protected Sub gvColors_PageIndexChanging(sender As Object, e As GridViewPageEventArgs)
{
gvColors.DataSource = // Method to retrieve DataSource
gvColors.PageIndex = e.NewPageIndex
gvColors.DataBind()
}
Обновить Gridview при нажатии клавиши
Gridviews более полезны, если мы можем обновить представление в соответствии с нашей потребностью. Рассмотрим представление с функцией блокировки / разблокировки в каждой строке. Это можно сделать так:
Добавьте панель обновления:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> </asp:UpdatePanel>
Добавьте ContentTemplate и Trigger внутри вашей UpdatePanel:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
Добавьте GridView в ContentTemplate:
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="imgDownload" runat="server" OnClientClick="return confirm('Are you sure want to Lock/Unlock ?');"
CommandName="togglelock"
CommandArgument='<%#Container.DataItemIndex%>'/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</ContentTemplate>
Здесь мы даем нашему GridView1 один постоянный столбец, для кнопки блокировки. Разумеется, привязка данных до сих пор не состоялась.
Время для DataBind: (на странице Load)
using (SqlConnection con= new SqlConnection(connectionString))
{
SqlCommand sqlCommand = new SqlCommand(" ... ", con);
SqlDataReader reader = sqlCommand.ExecuteReader();
GridView1.DataSource = reader;
GridView1.DataBind();
}
Заблокировать / разблокировать изображение будет отличаться в зависимости от значения определенного столбца в вашем GridView. Рассмотрим случай, когда ваша таблица содержит атрибут / столбец под названием «Статус блокировки». Теперь вы хотите (1) скрыть этот столбец сразу после DataBind и непосредственно перед рендерингом страницы и (2) назначить разные изображения для каждой строки на основе этого скрытого значения столбца, то есть, если статус блокировки для строки равен 0, назначьте ее «блокировка». jpg ", если статус 1, назначьте его" unlock.jpg ". Для этого мы будем использовать параметр OnRowDataBound для GridView, он смешивается с вашим GridView, перед тем, как отобразить каждую строку на HTML-страницу.
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound"> ...
В файле cs
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Cells[8].Visible = false; //hiding the desired column which is column number 8 in this case
GridView1.HeaderRow.Cells[8].Visible = false; //hiding its header
ImageButton imgDownload = (ImageButton)e.Row.FindControl("imgDownload");
string lstate = ((CheckBox)e.Row.Cells[8].Controls[0]).Checked.ToString();
if (lstate == "True")
{ imgDownload.ImageUrl = "images/lock.png"; }
else
{
imgDownload.ImageUrl = "images/unlock.png";
}
}
}
Теперь GridView будет отображаться так, как мы хотим, теперь давайте реализуем события нажатия кнопок на этой кнопке Lock / Unlock. Поймите, что для выполнения определенной операции в определенной строке команде должна быть предоставлена команда, и GridView предоставляет нам ту же функциональность, что и OnRowCommand .
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound" OnRowCommand="GridView1_RowCommand">
...
</ContentTemplate>
Он создаст функцию в файле cs, которая принимает object sender и GridViewCommandEventArgs e С e.CommandArgument мы можем получить индекс строки, которая дала команду Point, которая будет отмечена здесь, состоит в том, что строка может иметь несколько кнопок и cs код должен знать, какая кнопка из этой строки дала команду. Поэтому мы будем использовать CommandName
<asp:ImageButton ID="imgDownload" runat="server" OnClientClick="return confirm('Are you sure want to Lock/Unlock ?');"
CommandName="togglelock"
CommandArgument='<%#Container.DataItemIndex%>'/>
Теперь в бэкэнд можно выделить команды из разных строк и разных кнопок.
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "togglelock")
{
using (SqlConnection con= new SqlConnection(connectionString))
{
int index = Convert.ToInt32(e.CommandArgument);
SqlCommand sqlCommand = new SqlCommand(" ... ", con);
SqlDataReader reader = sqlCommand.ExecuteReader();
GridView1.DataSource = reader;
GridView1.DataBind();
}
}
}
Добавьте <asp:PostBackTrigger ControlID="GridView1"/> в Trigger и он обновит GridView после завершения DataBind.
Используйте HorizontalAlign="Center" чтобы поместить GridView в центр страницы.