ASP.NET
Rasteransicht

Datenbindung

Es gibt zwei Möglichkeiten, eine GridView zu binden. Sie können dies entweder manuell tun, indem Sie die DataSource Eigenschaft DataSource und DataBind() aufrufen, oder Sie können ein DataSourceControl wie eine SqlDataSource .

Manuelle Bindung

Erstellen Sie Ihre GridView:

<asp:GridView ID="gvColors" runat="server"></asp:GridView> 

Erstellen Sie zunächst die Quelldaten für die GridView oder rufen Sie sie ab. Weisen Sie anschließend die Daten der DataSource Eigenschaft der GridView zu. Rufen Sie schließlich DataBind() .

List<string> colors = new List<string>();
colors.Add("Red");
colors.Add("Green");
colors.Add("Blue");

gvColors.DataSource = colors;
gvColors.DataBind();

DataSourceControl

Erstellen Sie Ihr DataSourceControl:

<asp:SqlDataSource ID="sdsColors"
    runat="server"
    ConnectionString="<%$ MyConnectionString %>"
    SelectCommand="SELECT Color_Name FROM Colors">
</asp:SqlDataSource>

Erstellen Sie Ihre GridView und legen Sie die DataSourceID Eigenschaft fest:

<asp:GridView ID="gvColors"
    runat="server"
    DataSourceID="sdsColors">
</asp:GridView> 

Säulen

Es gibt sieben verschiedene Spaltentypen, die in einer GridView verwendet werden können.

<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" />

Befehlsfeld:

<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>

Stark typisiertes GridView

Ab Asp.net 4.5 können Websteuerelemente von der stark typisierten Bindung profitieren, um Unterstützung für IntelliSense und Kompilierungszeiten zu erhalten.

Erstellen Sie eine Klasse, die Ihr Modell enthält:

public class Album
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Artist { get; set; }
}

Definieren Sie das GridView-Steuerelement auf Ihrer Seite:

<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>

Laden Sie die Daten und binden Sie sie:

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();

Befehlsereignis behandeln

Mit GridViews können Befehle aus einer GridView-Zeile gesendet werden. Dies ist nützlich, um zeilenbezogene Informationen als Befehlsargumente an einen Ereignishandler zu übergeben.

So abonnieren Sie ein Befehlsereignis:

<asp:GridView ID="GridView1" ... OnRowCommand="GridView1_RowCommand">

Schaltflächen sind die gebräuchlichste Art, Befehle zu erheben. Sie unterstützen auch eine Möglichkeit, Befehlsargumente anzugeben. In diesem Beispiel ist das Argument eine ID des Elements, das die Zeile darstellt.

<TemplateField>
    <ItemTemplate>
        <asp:LinkButton ID="LinkButton1" runat="server"
                        CommandName="SampleCmd"
                        CommandArgument='<%# Eval("ID") %>'>
        </asp:LinkButton>
    </ItemTemplate>
</TemplateField>

Alternativ kann eine CommandField Spaltenvorlage verwendet werden, die die häufigsten Befehlssteuerelemente bereitstellt.

Behandlung des Ereignisses im Code dahinter:

protected void GridView1_RowCommand(object source, GridViewCommandEventArgs e)
{
    if (e.CommandName == "SampleCmd")
    {
        var id = e.CommandArgument;
    }
}

Beachten Sie, dass der in diesem Beispiel verwendete CommandName beliebig ist und vom Entwickler ausgewählt werden kann. Es gibt jedoch eine Reihe vordefinierter Namen, die die GridView selbst erkennt. Entsprechende Ereignisse werden ausgelöst, wenn diese Befehle ausgelöst werden.

Paging

ObjectDataSource

Wenn Sie eine ObjectDataSource verwenden, wird fast alles bereits für Sie erledigt. Sagen Sie der GridView einfach AllowPaging und geben Sie ihr eine 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>

Manuelle Bindung

Wenn Sie manuell binden, müssen Sie das PageIndexChanging . PageIndex einfach die DataSource und den PageIndex und binden Sie die GridView erneut.

<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()
}

Aktualisieren Sie die Rasteransicht in der Zeile

Rasteransichten sind nützlicher, wenn wir die Ansicht nach Bedarf aktualisieren können. Betrachten Sie eine Ansicht mit einer Sperr- / Entsperrfunktion in jeder Zeile. Es kann wie folgt gemacht werden:

Fügen Sie ein Aktualisierungsfenster hinzu:

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> </asp:UpdatePanel>

Fügen Sie in Ihrem UpdatePanel eine ContentTemplate und einen Trigger hinzu:

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> 
    <ContentTemplate>
    </ContentTemplate>

    <Triggers>
    </Triggers>
</asp:UpdatePanel>

Fügen Sie Ihre GridView in ContentTemplate hinzu:

<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>

Hier geben wir unserem GridView1 eine konstante Spalte für den Sperrknopf. Es ist jedoch bekannt, dass Datenbindung bisher nicht stattgefunden hat.

Zeit für DataBind: (bei PageLoad)

using (SqlConnection con= new SqlConnection(connectionString)) 
{
            SqlCommand sqlCommand = new SqlCommand(" ... ", con);
            SqlDataReader reader = sqlCommand.ExecuteReader();
            GridView1.DataSource = reader;
            GridView1.DataBind();
}

Das Sperr- / Entsperrungsbild unterscheidet sich je nach Wert einer bestimmten Spalte in Ihrer GridView. Stellen Sie sich einen Fall vor, in dem Ihre Tabelle ein Attribut / eine Spalte mit dem Titel "Sperrstatus" enthält. Nun möchten Sie (1) diese Spalte unmittelbar nach DataBind und unmittelbar vor dem Seitenrendern ausblenden und (2) jeder Zeile basierend auf diesem ausgeblendeten Spaltenwert unterschiedliche Bilder zuweisen, dh, wenn der Sperrstatus für eine Zeile 0 ist, weisen Sie ihm "lock" zu. jpg ", wenn der Status 1 ist, weisen Sie" unlock.jpg "zu. Dazu verwenden wir die OnRowDataBound Option von GridView, die sich mit Ihrem GridView vermischt, bevor jede Zeile auf die HTML-Seite gerendert wird.

<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound"> ...

In der cs-Datei

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";
            }
        }
    }

Jetzt wird die GridView nach Belieben gerendert. Jetzt können Sie Schaltflächenklickereignisse für diese Schaltfläche "Bild sperren / entsperren" implementieren. Um eine bestimmte Operation in einer bestimmten Zeile auszuführen, muss dieser Zeile ein Befehl erteilt werden. GridView bietet uns die gleiche Funktionalität namens OnRowCommand .

<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound" OnRowCommand="GridView1_RowCommand">
...
</ContentTemplate>

In cs-Datei wird eine Funktion erstellt, die einen object sender und GridViewCommandEventArgs e Mit e.CommandArgument wir den Index der Zeile e.CommandArgument , die den folgenden Befehl gegeben hat Code muss wissen, welche Schaltfläche aus dieser Zeile den Befehl gegeben hat. Also verwenden wir CommandName

<asp:ImageButton ID="imgDownload" runat="server" OnClientClick="return confirm('Are you sure want to Lock/Unlock ?');"
                            CommandName="togglelock"
                            CommandArgument='<%#Container.DataItemIndex%>'/>

Nun kann man im Backend Befehle von verschiedenen Zeilen und verschiedenen Schaltflächen unterscheiden.

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();
            }
        }
    }

Fügen Sie dem Trigger <asp:PostBackTrigger ControlID="GridView1"/> und der GridView wird aktualisiert, sobald die Datenverknüpfung abgeschlossen ist.

Verwenden Sie HorizontalAlign="Center" , um die GridView in der Mitte der Seite zu platzieren.