ASP.NET
GridView

Wiązanie danych

Istnieją dwa sposoby powiązania GridView. Możesz to zrobić ręcznie, ustawiając właściwość DataSource i wywołując DataBind() , lub możesz użyć DataSourceControl, takiego jak SqlDataSource .

Wiązanie ręczne

Utwórz swój GridView:

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

Najpierw utwórz lub pobierz dane źródłowe dla GridView. Następnie przypisz dane do właściwości DataSource GridView. Na koniec wywołaj DataBind() .

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

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

DataSourceControl

Utwórz DataSourceControl:

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

Utwórz GridView i ustaw właściwość DataSourceID :

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

Kolumny

Istnieje siedem różnych typów kolumn, których można używać w 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>

Mocno wpisany GridView

Począwszy od Asp.net 4.5 formanty sieciowe mogą korzystać z silnie typowanego wiązania, aby uzyskać wsparcie IntelliSense i błędy podczas kompilacji.

Utwórz klasę, która będzie przechowywać Twój model:

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

Zdefiniuj formant GridView na swojej stronie:

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

Załaduj dane i powiąż je:

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

Obsługa zdarzenia polecenia

GridViews pozwalają na wysyłanie poleceń z wiersza GridView. Jest to przydatne do przekazywania informacji specyficznych dla wiersza do procedury obsługi zdarzeń jako argumentów polecenia.

Aby zasubskrybować zdarzenie polecenia:

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

Przyciski są najczęstszym sposobem wywoływania poleceń. Obsługują również sposób określania argumentów poleceń. W tym przykładzie argument jest ID elementu reprezentowanego przez wiersz.

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

Alternatywnie można użyć szablonu kolumny CommandField który zapewnia najczęstsze elementy sterujące poleceń.

Obsługa zdarzenia w kodzie za:

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

Zauważ, że CommandName użyta w tym przykładzie jest dowolna i jest wyborem programisty. Istnieje jednak zestaw predefiniowanych nazw, które rozpoznaje sam GridView. Odpowiednie zdarzenia są wywoływane po uruchomieniu tych poleceń.

Stronicowanie

ObjectDataSource

Jeśli używasz ObjectDataSource, prawie wszystko jest już obsługiwane, po prostu powiedz GridView AllowPaging i nadaj mu 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>

Wiązanie ręczne

W przypadku wiązania ręcznego należy obsłużyć zdarzenie PageIndexChanging . Wystarczy ustawić DataSource i PageIndex i ponownie powiązać GridView.

<asp:GridView ID="gvColors"
    runat="server"
    AllowPaging="True"
    PageSize="5"
    OnPageIndexChanging="gvColors_PageIndexChanging">
</asp:GridView>

DO#

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

Zaktualizuj Gridview po kliknięciu wiersza

Widoki siatki są bardziej przydatne, jeśli możemy zaktualizować widok zgodnie z naszymi potrzebami. Rozważ widok z funkcją blokowania / odblokowywania w każdym rzędzie. Można to zrobić w następujący sposób:

Dodaj panel aktualizacji:

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

Dodaj ContentTemplate i Trigger w panelu UpdatePanel:

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

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

Dodaj GridView do 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>

Dajemy GridView1 jedną stałą kolumnę dla przycisku blokady. Pamiętaj, że połączenie danych nie miało miejsca do tej pory.

Czas na DataBind: (na PageLoad)

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

Obraz Zablokuj / Odblokuj będzie różny w zależności od wartości określonej kolumny w GridView. Rozważ przypadek, w którym twoja tabela zawiera atrybut / kolumnę zatytułowaną „Status blokady”. Teraz chcesz (1) ukryć tę kolumnę tuż po DataBind i tuż przed renderowaniem strony oraz (2) Przypisz różne obrazy do każdego wiersza na podstawie tej wartości ukrytej kolumny, tj. Jeśli Status blokady dla wiersza wynosi 0, przypisz mu „blokuj. jpg ”, jeśli status to 1, przypisz mu„ odblokuj.jpg ”. Aby to zrobić, użyjemy opcji OnRowDataBound GridView, która miesza się z GridView, tuż przed renderowaniem każdego wiersza na stronie HTML.

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

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

Teraz GridView będzie renderowany tak, jak chcemy, teraz zaimplementuj zdarzenia kliknięcia przycisku na tym przycisku obrazu Zablokuj / Odblokuj. Zrozum, że aby wykonać określoną operację na określonym wierszu, należy podać polecenie do tego wiersza, a GridView zapewnia nam tę samą funkcjonalność o nazwie OnRowCommand .

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

Stworzy funkcję w pliku cs, który e.CommandArgument object sender i GridViewCommandEventArgs e Za pomocą e.CommandArgument możemy uzyskać indeks wiersza, który dał komendę Punkt, o którym należy tutaj pamiętać, że wiersz może mieć wiele przycisków i cs kod musi wiedzieć, który przycisk z tego wiersza wydał polecenie. Więc użyjemy CommandName

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

Teraz w backendie można rozróżnić polecenia z różnych wierszy i różnych przycisków.

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

Dodaj <asp:PostBackTrigger ControlID="GridView1"/> do Trigger a zaktualizuje GridView po zakończeniu DataBind.

Użyj HorizontalAlign="Center" aby umieścić GridView na środku strony.