ASP.NET
Vista a griglia

Associazione dati

Esistono due modi per associare un GridView. È possibile eseguirlo manualmente impostando la proprietà DataSource e chiamando DataBind() , oppure è possibile utilizzare un DataSourceControl come SqlDataSource .

Associazione manuale

Crea il tuo GridView:

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

Prima creare o recuperare i dati di origine per GridView. Quindi, assegnare i dati alla proprietà DataSource di GridView. Infine, chiama DataBind() .

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

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

DataSourceControl

Crea il tuo DataSourceControl:

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

Crea il tuo GridView e imposta la proprietà DataSourceID :

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

colonne

Esistono sette diversi tipi di colonna che possono essere utilizzati all'interno di 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 fortemente tipizzato

A partire da Asp.net 4.5 i controlli web possono trarre vantaggio dall'associazione fortemente tipizzata per ottenere il supporto IntelliSense e gli errori di compilazione.

Crea una classe, che trattiene il tuo modello:

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

Definisci il controllo GridView sulla tua 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>

Carica i dati e collegali:

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

Gestione dell'evento di comando

GridViews consente di inviare comandi da una riga GridView. Questo è utile per passare informazioni specifiche di una riga in un gestore di eventi come argomenti del comando.

Per iscriversi a un evento di comando:

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

I pulsanti sono il modo più comune per aumentare i comandi. Supportano anche un modo per specificare gli argomenti del comando. In questo esempio, l'argomento è un ID dell'elemento rappresentato dalla riga.

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

In alternativa, è possibile utilizzare un modello di colonna CommandField che fornisce i controlli di comando più comuni.

Gestione dell'evento nel codice sottostante:

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

Si noti che il CommandName utilizzato in questo esempio è arbitrario ed è una scelta dello sviluppatore. Esiste, tuttavia, un insieme di nomi predefiniti riconosciuti dalla GridView. Gli eventi corrispondenti vengono sollevati quando questi comandi vengono attivati.

paging

ObjectDataSource

Se si utilizza ObjectDataSource, quasi tutto è già gestito per te, basta semplicemente dire a GridView di AllowPaging e assegnargli un 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>

Associazione manuale

Se l'associazione viene eseguita manualmente, è necessario gestire l'evento PageIndexChanging . Basta impostare DataSource e PageIndex e reindirizzare 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()
}

Aggiorna Gridview sul clic di riga

Le GridView sono più utili se possiamo aggiornare la vista secondo le nostre necessità. Considera una vista con una funzione di blocco / sblocco in ogni riga. Può essere fatto come:

Aggiungi un pannello di aggiornamento:

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

Aggiungi un ContentTemplate e un Trigger all'interno di UpdatePanel:

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

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

Aggiungi il tuo GridView all'interno di 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>

Qui stiamo dando al nostro GridView1 una colonna costante, per il pulsante di blocco. Intendiamoci, il database non ha avuto luogo fino ad ora.

Tempo per DataBind: (su PageLoad)

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

Blocca / Sblocca l'immagine sarà diversa in base al valore di una determinata colonna in GridView. Considera un caso in cui la tabella contiene un attributo / colonna intitolato "Stato blocco". Ora si desidera (1) nascondere quella colonna subito dopo DataBind e immediatamente prima del rendering della pagina e (2) Assegnare immagini diverse a ciascuna riga in base a quel valore di colonna nascosta, vale a dire se lo stato di blocco per una riga è 0, assegnarlo a "blocco". jpg ", se lo stato è 1 assegnalo" unlock.jpg ". Per fare ciò, utilizzeremo OnRowDataBound opzione OnRowDataBound di GridView, che si confonde con GridView, appena prima di rendere ogni riga alla pagina HTML.

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

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

Ora il GridView sarà reso come vogliamo, ora implementiamo eventi di clic sui pulsanti su quel pulsante Blocca / Sblocca immagine. Comprendere che per eseguire un'operazione specifica su una riga specifica, è necessario fornire un comando a tale riga e GridView ci fornisce la stessa funzionalità denominata OnRowCommand .

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

e.CommandArgument una funzione nel file cs che accetta un object sender e GridViewCommandEventArgs e Con e.CommandArgument possiamo ottenere l'indice della riga che ha dato il comando Il punto da notare qui è che, una riga può avere più pulsanti e il cs il codice deve sapere quale pulsante da quella riga ha dato il comando. Quindi useremo CommandName

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

Ora nel backend è possibile distinguere i comandi da diverse righe e pulsanti diversi.

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

Aggiungi <asp:PostBackTrigger ControlID="GridView1"/> al Trigger e aggiornerà GridView una volta eseguito il DataBind.

Usa HorizontalAlign="Center" per posizionare GridView al centro della pagina.