ASP.NET
Gridview

Databindning

Det finns två sätt att binda en GridView på. Du kan antingen göra det manuellt genom att ställa DataSource egenskapen DataSource och ringa DataBind() , eller så kan du använda en DataSourceControl som en SqlDataSource .

Manuell bindning

Skapa din GridView:

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

Skapa eller hämta först källdata för GridView. Tilldela sedan data till GridViews DataSource egenskap. Slutligen ring DataBind() .

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

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

DataSourceControl

Skapa din DataSourceControl:

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

Skapa din GridView och ange egenskapen DataSourceID :

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

kolumner

Det finns sju olika kolumntyper som kan användas inom en 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>

Stark typ GridView

Börja med Asp.net 4.5 webbkontroller kan dra nytta av starkt typbundna bindningar för att få IntelliSense-support och kompileringsfel.

Skapa en klass som innehåller din modell:

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

Definiera GridView-kontrollen på din sida:

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

Ladda uppgifterna och bind dem:

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

Hantera kommandohändelse

GridViews tillåter att kommandon skickas från en GridView-rad. Detta är användbart för att skicka radspecifik information till en händelsehanterare som kommandogargument.

Så här prenumererar du på en kommandohändelse:

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

Knappar är det vanligaste sättet att höja kommandon. De stöder också ett sätt att specificera kommandotargument. I det här exemplet är argumentet ett ID för objektet som raden representerar.

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

Alternativt kan man använda en CommandField kolumnmall som ger de vanligaste kommandokontrollerna.

Hantering av händelsen i kod bakom:

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

Observera att CommandName används i detta exempel är godtyckligt och är ett val för utvecklaren. Det finns dock en uppsättning fördefinierade namn som GridView själv känner igen. Motsvarande händelser tas upp när dessa kommandon avfyras.

personsökning

Object

Om du använder en ObjectDataSource, hanteras nästan allt redan för dig, berätta bara GridView till AllowPaging och ge det en 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>

Manuell bindning

Om du binder manuellt måste du hantera händelsen PageIndexChanging . DataSource bara in DataSource och PageIndex och binda GridView igen.

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

Uppdatera Gridview på radklick

Gridviews är mer användbara om vi kan uppdatera vyn enligt vårt behov. Överväg en vy med en lås / upplåsningsfunktion i varje rad. Det kan göras som:

Lägg till en uppdateringspanel:

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

Lägg till ett ContentTemplate och trigga i din UpdatePanel:

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

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

Lägg till din GridView i 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>

Här ger vi GridView1 en konstant kolumn för låsknapp. Tänk på att databind inte har ägt rum förrän nu.

Tid för DataBind: (på PageLoad)

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

Låsa / låsa upp bilden skiljer sig från värdet på en viss kolumn i din GridView. Överväg ett fall där tabellen innehåller ett attribut / kolumn med titeln "Lås status". Nu vill du (1) dölja den kolumnen strax efter DataBind och strax före sidåtergivning och (2) Tilldela olika bilder till varje rad på grundval av det dolda kolumnvärdet, dvs om Låsstatus för en rad är 0, tilldela det "lås. jpg ", om status är 1 tilldela den" unlock.jpg ". För att göra detta använder vi OnRowDataBound alternativet i GridView, det minglar med din GridView, strax innan vi OnRowDataBound varje rad till HTML-sidan.

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

I cs-fil

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 kommer GridView att återges som vi vill, låt oss nu implementera knappklickhändelser på den Lås / Lås upp bildknappen. Förstå att för att utföra en specifik operation på en specifik rad måste ett kommando ges till den raden och GridView ger oss samma funktionalitet som heter OnRowCommand .

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

Det kommer att skapa en funktion i cs-fil som tar ett object sender och GridViewCommandEventArgs e Med e.CommandArgument vi kan få index för raden som gav kommandot Point bör noteras här är att, kan en rad ha flera knappar och cs kod måste veta vilken knapp från den raden som gav kommandot. Så vi använder CommandName

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

Nu i backend kan man skilja kommandon från olika rader och olika knappar.

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

Lägg till <asp:PostBackTrigger ControlID="GridView1"/> till Trigger och det kommer att uppdatera GridView när DataBind är klar.

Använd HorizontalAlign="Center" att placera GridView i mitten av sidan.