Recherche…
Liaison de données
Il existe deux manières de lier un GridView. Vous pouvez soit le faire manuellement en définissant la propriété DataSource et en appelant DataBind() , ou vous pouvez utiliser un DataSourceControl tel que SqlDataSource .
Reliure manuelle
Créez votre GridView:
<asp:GridView ID="gvColors" runat="server"></asp:GridView>
Commencez par créer ou récupérer les données source pour GridView. Ensuite, affectez les données à la propriété DataSource du GridView. Enfin, appelez DataBind() .
List<string> colors = new List<string>();
colors.Add("Red");
colors.Add("Green");
colors.Add("Blue");
gvColors.DataSource = colors;
gvColors.DataBind();
DataSourceControl
Créez votre DataSourceControl:
<asp:SqlDataSource ID="sdsColors"
runat="server"
ConnectionString="<%$ MyConnectionString %>"
SelectCommand="SELECT Color_Name FROM Colors">
</asp:SqlDataSource>
Créez votre GridView et définissez la propriété DataSourceID :
<asp:GridView ID="gvColors"
runat="server"
DataSourceID="sdsColors">
</asp:GridView>
Colonnes
Il existe sept types de colonne différents pouvant être utilisés dans 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 fortement typé
En commençant par Asp.net 4.5, les contrôles Web peuvent tirer parti de la liaison fortement typée pour obtenir une prise en charge d'IntelliSense et des erreurs de compilation.
Créez une classe qui contient votre modèle:
public class Album
{
public int Id { get; set; }
public string Name { get; set; }
public string Artist { get; set; }
}
Définissez le contrôle GridView sur votre page:
<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>
Chargez les données et liez-les:
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();
Événement de commande de manipulation
GridViews permet d'envoyer des commandes à partir d'une ligne GridView. Ceci est utile pour transmettre des informations spécifiques à une ligne dans un gestionnaire d'événement en tant qu'arguments de commande.
Pour vous abonner à un événement de commande:
<asp:GridView ID="GridView1" ... OnRowCommand="GridView1_RowCommand">
Les boutons sont le moyen le plus courant de déclencher des commandes. Ils prennent également en charge un moyen de spécifier des arguments de commande. Dans cet exemple, l'argument est l' ID de l'élément représenté par la ligne.
<TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server"
CommandName="SampleCmd"
CommandArgument='<%# Eval("ID") %>'>
</asp:LinkButton>
</ItemTemplate>
</TemplateField>
Vous pouvez également utiliser un CommandField colonne CommandField qui fournit les contrôles de commande les plus courants.
Gestion de l'événement en code derrière:
protected void GridView1_RowCommand(object source, GridViewCommandEventArgs e)
{
if (e.CommandName == "SampleCmd")
{
var id = e.CommandArgument;
}
}
Notez que le CommandName utilisé dans cet exemple est arbitraire et est un choix du développeur. Il existe toutefois un ensemble de noms prédéfinis que GridView reconnaît lui-même. Les événements correspondants sont déclenchés lorsque ces commandes sont déclenchées.
| Nom de la commande | Événements soulevés |
|---|---|
| Annuler | RowCancelingEdit |
| Effacer | RowDeleting, RowDeleted |
| modifier | RowEditing |
| Page | PageIndexChanging, PageIndexChanged |
| Sélectionner | SelectedIndexChanging, SelectedIndexChanged |
| Trier | Tri, tri |
| Mettre à jour | RowUpdating, RowUpdated |
Pagination
ObjectDataSource
Si vous utilisez un objet ObjectDataSource, presque tout est déjà géré pour vous, il vous suffit de dire à GridView d’ AllowPaging et de lui donner une 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>
Reliure manuelle
Si la liaison est manuelle, vous devez gérer l'événement PageIndexChanging . PageIndex simplement le DataSource et le PageIndex et PageIndex le 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()
}
Cliquez sur Mettre à jour la grille en ligne
Les Gridviews sont plus utiles si nous pouvons mettre à jour la vue selon nos besoins. Considérez une vue avec une fonctionnalité de verrouillage / déverrouillage dans chaque ligne. Cela peut être fait comme:
Ajouter un panneau de mise à jour:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> </asp:UpdatePanel>
Ajoutez un ContentTemplate et un Trigger dans votre UpdatePanel:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
Ajoutez votre GridView à l'intérieur de 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>
Ici, nous donnons à notre GridView1 une colonne constante, pour le bouton de verrouillage. Attention, la base de données n'a pas encore eu lieu.
Time for DataBind: (sur PageLoad)
using (SqlConnection con= new SqlConnection(connectionString))
{
SqlCommand sqlCommand = new SqlCommand(" ... ", con);
SqlDataReader reader = sqlCommand.ExecuteReader();
GridView1.DataSource = reader;
GridView1.DataBind();
}
Verrouiller / Déverrouiller l'image sera différent selon la valeur d'une certaine colonne de votre GridView. Considérons un cas où votre table contient un attribut / colonne intitulé "Statut de verrouillage". Maintenant, vous souhaitez (1) masquer cette colonne juste après DataBind et juste avant le rendu de la page et (2) Attribuer des images différentes à chaque ligne en fonction de cette valeur de colonne masquée, c.-à-d. jpg ", si le statut est 1, associez-le" unlock.jpg ". Pour ce faire, nous utiliserons l'option OnRowDataBound de GridView, il se mêle à votre GridView, juste avant le rendu de chaque ligne dans la page HTML.
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound"> ...
Dans un fichier 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";
}
}
}
Maintenant, le GridView sera rendu comme nous le souhaitons, maintenant, laissez-nous implémenter les événements de clic de bouton sur le bouton Verrouiller / Déverrouiller l'image. Comprenez que pour effectuer une opération spécifique sur une ligne spécifique, une commande doit être donnée à cette ligne et GridView nous fournit les mêmes fonctionnalités que OnRowCommand .
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound" OnRowCommand="GridView1_RowCommand">
...
</ContentTemplate>
Cela va créer une fonction dans le fichier cs qui prend un object sender et GridViewCommandEventArgs e Avec e.CommandArgument nous pouvons obtenir l'indice de la ligne qui a donné la commande point à noter ici est que, une ligne peut avoir plusieurs boutons et le cs Le code doit savoir quel bouton de cette ligne a donné la commande. Nous allons donc utiliser CommandName
<asp:ImageButton ID="imgDownload" runat="server" OnClientClick="return confirm('Are you sure want to Lock/Unlock ?');"
CommandName="togglelock"
CommandArgument='<%#Container.DataItemIndex%>'/>
Maintenant, dans le backend on peut distinguer les commandes des différentes lignes et des différents boutons.
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();
}
}
}
Ajoutez <asp:PostBackTrigger ControlID="GridView1"/> au Trigger et il mettra à jour GridView une fois le DataBind terminé.
Utilisez HorizontalAlign="Center" pour placer le GridView au centre de la page.
