ASP.NET
Rasterweergave

Dataverbinding

Er zijn twee manieren om een GridView te binden. U kunt dit handmatig doen door de eigenschap DataSource in te stellen en DataBind() roepen, of u kunt een DataSourceControl gebruiken, zoals een SqlDataSource .

Handmatig binden

Maak uw GridView:

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

Maak of haal eerst de brongegevens voor de GridView op. Wijs vervolgens de gegevens toe aan de DataSource eigenschap van de GridView. DataBind() slot DataBind() .

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

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

DataSourceControl

Maak uw DataSourceControl:

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

Maak uw GridView en stel de eigenschap DataSourceID in:

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

columns

Er zijn zeven verschillende kolomtypen die binnen een GridView kunnen worden gebruikt.

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

Sterk getypeerde GridView

Beginnen met Asp.net 4.5 webcontroles kunnen profiteren van sterk getypeerde binding om IntelliSense-ondersteuning en compiletime-fouten te krijgen.

Maak een klasse aan die uw model bevat:

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

Definieer het GridView-besturingselement op uw pagina:

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

Laad de gegevens en bind deze:

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

Opdrachtafhandeling afhandelen

Met GridViews kunnen opdrachten worden verzonden vanuit een GridView-rij. Dit is handig om rijspecifieke informatie als opdrachtargumenten door te geven aan een gebeurtenishandler.

Abonneren op een opdrachtgebeurtenis:

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

Knoppen zijn de meest gebruikelijke manier om opdrachten te activeren. Ze ondersteunen ook een manier om opdrachtargumenten op te geven. In dit voorbeeld is het argument een ID van het item dat de rij vertegenwoordigt.

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

Als alternatief kan men een CommandField gebruiken die de meest voorkomende opdrachtbesturingselementen biedt.

Behandeling van het evenement in code achter:

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

Merk op dat de in dit voorbeeld gebruikte CommandName willekeurig is en een keuze van de ontwikkelaar is. Er is echter een set vooraf gedefinieerde namen die de GridView zelf herkent. Overeenkomstige gebeurtenissen worden geactiveerd wanneer deze opdrachten worden geactiveerd.

paging

ObjectDataSource

Als u een ObjectDataSource gebruikt, wordt bijna alles al voor u afgehandeld, vertel de GridView gewoon aan AllowPaging en geef het een 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>

Handmatig binden

Als u handmatig bindt, moet u de gebeurtenis PageIndexChanging . Stel eenvoudig de DataSource en PageIndex en bind de GridView opnieuw.

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

Werk Gridview bij rij-klik bij

Rasterweergaven zijn nuttiger als we de weergave volgens onze behoefte kunnen bijwerken. Overweeg een weergave met een vergrendelings- / ontgrendelingsfunctie in elke rij. Het kan gedaan worden als:

Voeg een updatepaneel toe:

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

Voeg een ContentTemplate en Trigger toe aan uw UpdatePanel:

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

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

Voeg uw GridView toe aan 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>

Hier geven we onze GridView1 één constante kolom, voor vergrendelknop. Let wel, databind heeft tot nu toe niet plaatsgevonden.

Time for DataBind: (op PageLoad)

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

Afbeelding vergrendelen / ontgrendelen verschilt volgens de waarde van een bepaalde kolom in uw GridView. Overweeg een geval waarin uw tabel een attribuut / kolom met de titel "Status vergrendeling" bevat. Nu wilt u (1) die kolom verbergen net na DataBind en net vóór het renderen van de pagina en (2) Wijs verschillende afbeeldingen toe aan elke rij op basis van die verborgen kolomwaarde, dwz als Lock Status voor een rij 0 is, wijst u dit toe "lock". jpg ", als status 1 is, wijs het" unlock.jpg "toe. Om dit te doen, zullen we de OnRowDataBound optie van GridView gebruiken, die zich vermengt met uw GridView, net voordat elke rij naar de HTML-pagina wordt weergegeven.

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

In cs-bestand

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

Nu zal de GridView worden weergegeven zoals we willen, laten we nu knopklikgebeurtenissen implementeren op die knop Afbeelding vergrendelen / ontgrendelen. Begrijp dat om een specifieke bewerking op een specifieke rij uit te voeren, een opdracht aan die rij moet worden gegeven en GridView biedt ons dezelfde functionaliteit met de naam OnRowCommand .

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

Het zal een functie in cs bestand dat een meekrijgt object sender en GridViewCommandEventArgs e Met e.CommandArgument kunnen we de index van de rij die het commando Point hier te worden opgemerkt is dat, kan een rij meerdere knoppen en de cs hebben gegeven krijgen code moet weten welke knop uit die rij de opdracht heeft gegeven. Dus we zullen CommandName

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

Nu kun je in de backend opdrachten onderscheiden van verschillende rijen en verschillende knoppen.

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

Voeg <asp:PostBackTrigger ControlID="GridView1"/> aan de Trigger en deze zal de GridView bijwerken zodra de DataBind klaar is.

Gebruik HorizontalAlign="Center" om de GridView in het midden van de pagina te plaatsen.