Używanie kontrolek TemplateField w kontrolce GridView (C#)

Autor : Scott Mitchell

Pobierz plik PDF

Aby zapewnić elastyczność, kontrolka GridView oferuje pole TemplateField, które renderuje się przy użyciu szablonu. Szablon może zawierać kombinację statycznych kontrolek HTML, kontrolek sieci Web i składni powiązania danych. W tym samouczku dowiemy się, jak za pomocą pola TemplateField uzyskać większy stopień dostosowywania za pomocą kontrolki GridView.

Wprowadzenie

GridView składa się z zestawu pól, które wskazują, jakie właściwości z DataSource mają być uwzględnione w generowanym wyniku oraz jak dane będą wyświetlane. Najprostszym typem pola jest BoundField, który wyświetla wartość danych jako tekst. Inne typy pól wyświetlają dane przy użyciu alternatywnych elementów HTML. Pole CheckBoxField jest na przykład renderowane jako pole wyboru, którego stan zaznaczonego pola zależy od wartości określonego pola danych; Pole obrazu renderuje obraz, którego źródło obrazu jest oparte na określonym polu danych. Hiperlinki i przyciski, których stan zależy od bazowej wartości pola danych, można renderować przy użyciu typów pól HyperLinkField i ButtonField.

Chociaż typy pól CheckBoxField, ImageField, HyperLinkField i ButtonField umożliwiają alternatywny widok danych, nadal są one dość ograniczone w odniesieniu do formatowania. Pole CheckBoxField może wyświetlać tylko jedno pole wyboru, podczas gdy pole obrazu może wyświetlać tylko jeden obraz. Co zrobić, jeśli określone pole musi wyświetlać jakiś tekst, pole wyboru i obraz na podstawie różnych wartości pól danych? A co zrobić, jeśli chcemy wyświetlić dane przy użyciu kontrolki sieci Web innej niż CheckBox, Image, HyperLink lub Button? Ponadto BoundField ogranicza wyświetlanie do pojedynczego pola danych. Co zrobić, jeśli chcemy wyświetlić co najmniej dwie wartości pól danych w jednej kolumnie GridView?

Aby dostosować ten poziom elastyczności, obiekt GridView oferuje pole TemplateField, które jest renderowane przy użyciu szablonu. Szablon może zawierać kombinację statycznych kontrolek HTML, kontrolek sieci Web i składni powiązania danych. Ponadto pole TemplateField ma wiele szablonów, które mogą służyć do dostosowywania renderowania w różnych sytuacjach. Na przykład element ItemTemplate jest domyślnie używany do renderowania komórki dla każdego wiersza, ale EditItemTemplate szablon może służyć do dostosowywania interfejsu podczas edytowania danych.

W tym samouczku dowiemy się, jak za pomocą pola TemplateField uzyskać większy stopień dostosowywania za pomocą kontrolki GridView. W poprzednim samouczku pokazano, jak dostosować formatowanie na podstawie danych bazowych przy użyciu programów obsługi zdarzeń DataBound i RowDataBound. Innym sposobem dostosowania formatowania na podstawie danych bazowych jest wywołanie metod formatowania z szablonu. W tym samouczku również przyjrzymy się tej technice.

Na potrzeby tego samouczka użyjemy pola TemplateFields, aby dostosować wygląd listy pracowników. W szczególności wyświetlimy listę wszystkich pracowników, ale wyświetlimy imię i nazwisko pracownika w jednej kolumnie, datę zatrudnienia w kontrolce Kalendarz oraz kolumnę stanu, która wskazuje, ile dni zostali zatrudnieni w firmie.

Rysunek 1. Trzy pola szablonów są używane do dostosowywania wyświetlania (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Krok 1. Powiązanie danych z kontrolką GridView

W scenariuszach raportowania, gdy trzeba użyć pola TemplateFields w celu dostosowania wyglądu, najłatwiej jest najpierw utworzyć kontrolkę GridView zawierającą tylko pola BoundFields, a następnie w razie potrzeby dodać nowe pola TemplateFields lub zmodyfikować istniejące pola BoundFields na pola TemplateFields. W związku z tym zacznijmy od dodania kontrolki GridView do strony za pośrednictwem projektanta i powiązania jej z obiektem ObjectDataSource, który zwraca listę pracowników. Te czynności spowodują utworzenie widoku GridView z polami BoundFields dla każdych z pól pracownika.

GridViewTemplateField.aspx Otwórz stronę i przeciągnij kontrolkę GridView z przybornika do projektanta. W inteligentnym tagu GridView wybierz opcję dodania nowej kontrolki ObjectDataSource, która wywołuje metodę klasy EmployeesBLLGetEmployees().

Rysunek 2. Dodawanie nowej kontrolki ObjectDataSource, która wywołuje metodę GetEmployees() (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Powiązanie kontrolki GridView w ten sposób spowoduje automatyczne dodanie pola BoundField dla każdej z właściwości pracownika: EmployeeID, LastName, FirstName, Title, HireDate, ReportsTo i Country. W tym raporcie nie będziemy się przejmować wyświetlaniem właściwości EmployeeID, ReportsTo ani Country. Aby usunąć te pola BoundField, możesz:

• Użyj okna dialogowego Pola, a następnie kliknij link Edytuj kolumny w inteligentnym tagu GridView, aby wyświetlić to okno dialogowe. Następnie wybierz pozycję BoundFields z lewej dolnej listy i kliknij czerwony przycisk X, aby usunąć pole BoundField.
• Edytuj ręcznie składnię deklaracyjną kontrolki GridView z widoku Źródło i usuń element <asp:BoundField> dla pola powiązanego, które chcesz usunąć.

Po usunięciu elementów EmployeeID, ReportsToi Country BoundFields znaczniki gridView powinny wyglądać następująco:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:BoundField DataField="LastName" HeaderText="LastName"
            SortExpression="LastName" />
        <asp:BoundField DataField="FirstName" HeaderText="FirstName"
            SortExpression="FirstName" />
        <asp:BoundField DataField="Title" HeaderText="Title"
            SortExpression="Title" />
        <asp:BoundField DataField="HireDate" HeaderText="HireDate"
            SortExpression="HireDate" />
    </Columns>
</asp:GridView>

Poświęć chwilę, aby zobaczyć nasz postęp w przeglądarce. W tym momencie powinna zostać wyświetlona tabela z rekordem dla każdego pracownika i czterema kolumnami: jedną dla nazwiska pracownika, jedną dla swojego imienia i nazwiska, jedną dla tytułu i datę zatrudnienia.

Rysunek 3. Pola LastName, FirstName, Titlei HireDate są wyświetlane dla każdego pracownika (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 2. Wyświetlanie imienia i nazwiska w jednej kolumnie

Obecnie imię i nazwisko każdego pracownika są wyświetlane w oddzielnej kolumnie. Zamiast tego warto połączyć je w jedną kolumnę. Aby to osiągnąć, musimy użyć pola TemplateField. Możemy dodać nowe pole szablonu, dodać do niego wymaganą składnię znaczników i powiązania danych, a następnie usunąć BoundFields FirstName i LastName, albo przekonwertować BoundField FirstName na pole szablonu, edytować pole szablonu w celu uwzględnienia wartości LastName, a następnie usunąć BoundField LastName.

Oba podejścia dają ten sam wynik, ale osobiście lubię konwertować BoundFields na TemplateFields, gdy to możliwe, ponieważ konwersja automatycznie dodaje kontrolki sieci Web ItemTemplate i EditItemTemplate oraz składnię powiązania danych, co pozwala na naśladowanie wyglądu i funkcjonalności BoundField. Korzyść polega na tym, że będziemy musieli wykonać mniej pracy z TemplateField, ponieważ proces konwersji wykona część tej pracy za nas.

Aby przekonwertować istniejące pole BoundField na pole szablonu, kliknij link Edytuj kolumny z menu inteligentnego tagu GridView, co otworzy okno dialogowe z polami. Wybierz pole BoundField, które chcesz przekonwertować z listy w lewym dolnym rogu, a następnie kliknij link "Konwertuj to pole na pole szablonu" w prawym dolnym rogu.

Rysunek 4: Przekształć pole powiązane w pole szablonu w oknie dialogowym 'Pola' (kliknij, aby wyświetlić obraz pełnowymiarowy)

Przejdź dalej i przekonwertuj FirstName pole BoundField na pole szablonu. Po tej zmianie nie ma żadnej zauważalnej różnicy w programie Designer. Dzieje się tak dlatego, że konwertowanie pola BoundField na pole szablonu powoduje utworzenie pola templatefield, które zachowuje wygląd i działanie obiektu BoundField. Pomimo braku różnicy wizualnej na tym etapie w Designerze, ten proces konwersji zastąpił deklaratywną składnię BoundField — <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> — do następującej składni TemplateField:

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Jak widać, pole TemplateField składa się z dwóch szablonów ItemTemplate , które mają etykietę, której Text właściwość jest ustawiona na wartość FirstName pola danych, oraz EditItemTemplate kontrolkę TextBox, której Text właściwość jest również ustawiona na FirstName pole danych. Składnia powiązania danych — <%# Bind("fieldName") %> wskazuje, że pole fieldName danych jest powiązane z określoną właściwością kontrolki sieci Web.

Aby dodać wartość pola danych LastName do tego TemplateField, musimy dodać inną kontrolkę sieci Web Label w ItemTemplate i powiązać jej właściwość Text z LastName. Można to zrobić ręcznie lub za pośrednictwem Projektanta. Aby to zrobić ręcznie, wystarczy dodać odpowiednią składnię deklaratywną do pliku ItemTemplate:

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
        <asp:Label ID="Label2" runat="server"
            Text='<%# Bind("LastName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Aby dodać go za pośrednictwem projektanta, kliknij link Edytuj szablony z tagu inteligentnego GridView. Spowoduje to wyświetlenie interfejsu edytowania szablonu kontrolki GridView. W tagu inteligentnym tego interfejsu znajduje się lista szablonów w elemencie GridView. Ponieważ w tym momencie mamy tylko jedno pole szablonu, jedynymi szablonami wymienionymi na liście rozwijanej są te szablony dla FirstName pola szablonu wraz z polami EmptyDataTemplate i PagerTemplate. Szablon EmptyDataTemplate, jeśli został określony, jest używany do renderowania danych wyjściowych kontrolki GridView, gdy brak jest wyników powiązanych z tą kontrolką; PagerTemplate, jeśli został określony, jest używany do renderowania interfejsu stronicowania dla kontrolki GridView obsługującej stronicowanie.

Rysunek 5. Szablony kontrolki GridView można edytować za pośrednictwem projektanta (kliknij, aby wyświetlić obraz pełnowymiarowy)

Aby również wyświetlić element LastName w polu TemplateField FirstName, przeciągnij kontrolkę Etykieta z przybornika do FirstName wewnątrz ItemTemplate w interfejsie edycji szablonu GridView.

Rysunek 6. Dodaj kontrolkę etykiety Web do szablonowego elementu ItemTemplate (FirstName)

W tym momencie kontrolka etykiety sieci Web dodana do TemplateField ma właściwość Text ustawioną na "Label". Musimy to zmienić, aby ta właściwość była powiązana z wartością pola danych LastName. Aby to osiągnąć, kliknij inteligentny tag kontrolki "Etykieta" i wybierz opcję Edytuj powiązania danych.

Rysunek 7. Wybierz opcję Edytuj daneBindings z tagu inteligentnego etykiety (kliknij, aby wyświetlić obraz pełnowymiarowy)

Spowoduje to wyświetlenie okna dialogowego DataBindings. Z tego miejsca możesz wybrać właściwość do powiązania z danymi z listy po lewej stronie i wybrać pole, do którego mają być powiązane dane, z listy rozwijanej po prawej stronie. Text Wybierz właściwość po lewej stronie i LastName pole po prawej stronie, a następnie kliknij przycisk OK.

Rysunek 8. Powiązanie Text właściwości z polem LastName danych (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Uwaga / Notatka

Okno dialogowe DataBindings umożliwia wskazanie, czy należy wykonać dwukierunkowe powiązanie danych. Jeśli to pole pozostanie niezaznaczone, zostanie użyta składnia <%# Eval("LastName")%> powiązania danych zamiast <%# Bind("LastName")%>. Oba podejścia są odpowiednie do tego samouczka. Dwukierunkowe powiązanie danych staje się ważne podczas wstawiania i edytowania danych. Jednak w przypadku zwykłego wyświetlania danych każda z tych metod będzie działać równie dobrze. Szczegółowo omówimy dwukierunkowe powiązanie danych w przyszłych samouczkach.

Poświęć chwilę, aby wyświetlić tę stronę w przeglądarce. Jak widać, kontrolka GridView nadal zawiera cztery kolumny; jednak kolumna FirstName zawiera teraz zarówno wartości pól danych, jakFirstName i LastName .

Rysunek 9. Wartości FirstName i LastName są wyświetlane w jednej kolumnie (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Aby ukończyć ten pierwszy krok, usuń LastName właściwość BoundField i zmień nazwę FirstName właściwości TemplateField HeaderText na "Name". Po tych zmianach deklaratywny kod znaczników GridView powinien wyglądać następująco:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name" SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="Title"
            SortExpression="Title" />
        <asp:BoundField DataField="HireDate" HeaderText="HireDate"
            SortExpression="HireDate" />
    </Columns>
</asp:GridView>

Rysunek 10. Imię i nazwisko każdego pracownika są wyświetlane w jednej kolumnie (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 3. Używanie kontrolki kalendarza do wyświetlaniaHiredDatepola

Wyświetlanie wartości pola danych jako tekstu w GridView jest tak proste, jak użycie BoundField. Jednak w przypadku niektórych scenariuszy dane najlepiej wyrażać przy użyciu określonej kontrolki sieci Web zamiast zwykłego tekstu. Takie dostosowanie wyświetlania danych jest możliwe przy użyciu TemplateFields. Na przykład zamiast wyświetlać datę zatrudnienia pracownika jako tekst, możemy wyświetlić kalendarz (przy użyciu kontrolki Kalendarz) z wyróżnioną datą zatrudnienia.

Aby to osiągnąć, zacznij od przekonwertowania HiredDate pola BoundField na pole szablonu. Po prostu przejdź do inteligentnego znacznika kontrolki GridView i kliknij link Edytuj kolumny, aby wyświetlić okno dialogowe z polami. Wybierz pole BoundField i kliknij pozycję "Przekonwertuj HiredDate to pole na pole szablonu".

Rysunek 11. Konwertowanie pola powiązanego HiredDate na pole szablonu (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Jak pokazano w kroku 2, to zastąpi BoundField PoleSzablonu, który zawiera ItemTemplate i EditItemTemplate z etykietą i polem tekstowym, których właściwości Text są powiązane z wartością HiredDate przy użyciu składni wiązania danych <%# Bind("HiredDate")%>.

Aby zastąpić tekst kontrolką Kalendarz, edytuj szablon, usuwając etykietę i dodając kontrolkę Kalendarz. W projektancie wybierz pozycję Edytuj szablony z tagu inteligentnego GridView, a następnie wybierz pozycję HireDate TemplateField ItemTemplate z listy rozwijanej. Następnie usuń kontrolkę Etykieta i przeciągnij kontrolkę Kalendarz z zestawu narzędzi do edytora szablonu.

Rysunek 12. Dodawanie kontrolki kalendarza do HireDate pola szablonu ItemTemplate (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

W tym momencie każdy wiersz w kontrolce GridView będzie zawierać kontrolkę Kalendarz w polu HiredDate TemplateField. Jednak rzeczywista HiredDate wartość pracownika nie jest ustawiana nigdzie w kontrolce Kalendarz, co powoduje, że każda kontrolka Kalendarz domyślnie wyświetla bieżący miesiąc i datę. Aby rozwiązać ten problem, musimy przypisać właściwość HiredDate każdego pracownika do właściwości SelectedDate i VisibleDate kontrolki kalendarza.

Z poziomu tagu inteligentnego kontrolki Kalendarz wybierz pozycję Edytuj powiązania danych. Następnie powiąż obie właściwości SelectedDate i VisibleDate z danymi pola HiredDate.

Rysunek 13. Powiązanie SelectedDate właściwości i VisibleDate z polem HiredDate danych (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Uwaga / Notatka

Wybrana data kontrolki Kalendarz nie musi być widoczna. Na przykład kalendarz może mieć 1 sierpnia 1999 r. jako wybraną datę, jednak pokazuje bieżący miesiąc i rok. Wybrana data i widoczna data są określane przez właściwości SelectedDate i VisibleDate kontrolki Kalendarz. Chcemy wybrać cechę pracownika HiredDate oraz zapewnić jej wyświetlenie, więc obie te właściwości powinny być powiązane z polem danych HireDate.

Podczas wyświetlania strony w przeglądarce kalendarz pokazuje teraz miesiąc daty zatrudnienia pracownika i wybiera tę konkretną datę.

Rysunek 14: Pracownik jest wyświetlany w kontrolce kalendarza (HiredDate)

Uwaga / Notatka

W przeciwieństwie do wszystkich przykładów, które widzieliśmy do tej pory, w tym samouczku nie ustawiliśmy EnableViewState właściwości na false dla tego GridView. Przyczyną tej decyzji jest to, że kliknięcie dat w kontrolce kalendarza powoduje operację zwrotną, ustawiając wybraną datę kalendarza na datę właśnie klikniętą. Jeśli jednak stan widoku GridView jest wyłączony, przy każdym zwrocie dane GridView są ponownie powiązane z jego bazowym źródłem danych, co powoduje, że wybrana data kalendarza zostanie ustawiona z powrotem na datę pracownika, nadpisując datę wybraną przez użytkownika.

W tym samouczku jest to kwestia bez znaczenia, ponieważ użytkownik nie ma możliwości zaktualizowania elementu pracownika HireDate. Prawdopodobnie najlepiej byłoby skonfigurować kontrolkę Kalendarz, aby jej daty nie można było wybrać. Niezależnie od tego, ten samouczek pokazuje, że w niektórych okolicznościach należy włączyć stan widoku, aby zapewnić pewne funkcje.

Krok 4. Wyświetlanie liczby dni, przez które pracownik pracował dla firmy

Do tej pory widzieliśmy dwie aplikacje TemplateFields:

• Łączenie co najmniej dwóch wartości pól danych w jedną kolumnę i
• Wyrażanie wartości pola danych przy użyciu kontrolki sieci Web zamiast tekstu

Trzecie użycie elementu TemplateFields polega na wyświetlaniu metadanych dotyczących danych bazowych obiektu GridView. Oprócz wyświetlania dat zatrudnienia pracowników możemy również chcieć mieć kolumnę, w której jest wyświetlana łączna liczba dni pracy.

Jednak inne użycie pola templatefields występuje w scenariuszach, w których dane bazowe muszą być wyświetlane inaczej w raporcie strony internetowej niż w formacie przechowywanym w bazie danych. Wyobraź sobie, że tabela Employees miała pole Gender, aby przechowywało znak M lub F oznaczający płeć pracownika. Podczas wyświetlania tych informacji na stronie internetowej możemy pokazać płeć jako "Mężczyzna" lub "Kobieta", w przeciwieństwie do "M" lub "F".

Oba te scenariusze można obsłużyć, tworząc metodę formatowania w klasie code-behind strony ASP.NET (lub w oddzielnej bibliotece klas, zaimplementowanej jako static metoda), która jest wywoływana z szablonu. Taka metoda formatowania jest wywoływana z szablonu przy użyciu tej samej składni powiązania danych widocznej wcześniej. Metoda formatowania może przyjmować dowolną liczbę parametrów, ale musi zwrócić ciąg. Zwracany ciąg to kod HTML wstrzykiwany do szablonu.

Aby zilustrować tę koncepcję, rozszerzmy nasz samouczek, aby pokazać kolumnę zawierającą łączną liczbę dni pracy pracownika. Ta metoda formatowania przyjmie obiekt Northwind.EmployeesRow i zwróci liczbę dni, w których pracownik jest zatrudniony, jako wartość tekstową. Tę metodę można dodać do klasy związanej z kodem za stroną ASP.NET, ale musi być oznaczona jako protected lub public, aby uzyskać do niej dostęp z szablonu.

protected string DisplayDaysOnJob(Northwind.EmployeesRow employee)
{
    // Make sure HiredDate is not null... if so, return "Unknown"
    if (employee.IsHireDateNull())
        return "Unknown";
    else
    {
        // Returns the number of days between the current
        // date/time and HireDate
        TimeSpan ts = DateTime.Now.Subtract(employee.HireDate);
        return ts.Days.ToString("#,##0");
    }
}

HiredDate Ponieważ pole może zawierać NULL wartości bazy danych, musimy najpierw upewnić się, że wartość nie jest równa NULL przed rozpoczęciem obliczeń. Jeśli wartość to HiredDate, zwracamy po prostu ciąg "Nieznany"; jeśli nie jest NULL, obliczamy różnicę między bieżącym czasem a wartością NULL i zwracamy liczbę dni.

Aby użyć tej metody, musimy wywołać ją z TemplateField w GridView przy użyciu składni powiązania danych. Zacznij od dodania nowego pola TemplateField do kontrolki GridView, klikając link Edytuj kolumny w tagu inteligentnym kontrolki GridView i dodając nowy element TemplateField.

Rysunek 15. Dodawanie nowego pola szablonu do kontrolki GridView (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Ustaw właściwość HeaderText tego nowego TemplateField na "Days on the Job" i właściwość ItemStyle na HorizontalAlign. Aby wywołać metodę DisplayDaysOnJob z szablonu, dodaj metodę ItemTemplate i użyj następującej składni powiązania danych:

<%# DisplayDaysOnJob((Northwind.EmployeesRow)
     ((System.Data.DataRowView) Container.DataItem).Row) %>

Container.DataItem DataRowView Zwraca obiekt odpowiadający rekordowi DataSource powiązanemu z elementem GridViewRow. Jej Row właściwość zwraca silnie typizowaną Northwind.EmployeesRow, która jest przekazywana do DisplayDaysOnJob metody. Ta składnia powiązania danych może pojawić się bezpośrednio w ItemTemplate elemencie (jak pokazano w poniższej składni deklaratywnej) lub może zostać przypisana do właściwości Text kontrolki etykiety sieci Web.

Uwaga / Notatka

Alternatywnie, zamiast przekazywać instancję EmployeesRow, możemy po prostu przekazać wartość HireDate przy użyciu <%# DisplayDaysOnJob(Eval("HireDate")) %>. Jednak metoda Eval zwraca object wartość, więc musielibyśmy zmienić sygnaturę metody DisplayDaysOnJob, aby akceptowała parametr wejściowy typu object, zamiast tego. Nie możemy ślepo rzutować wywołania Eval("HireDate") na DateTime, ponieważ kolumna HireDate w tabeli Employees może zawierać wartości NULL. Dlatego musimy zaakceptować object jako parametr wejściowy do metody DisplayDaysOnJob, sprawdzić, czy posiada wartość bazy danych NULL (co można zweryfikować przy użyciu metody Convert.IsDBNull(objectToCheck)), a następnie postępować odpowiednio.

Ze względu na te subtelności zdecydowałem się przekazywać całe wystąpienie EmployeesRow. W następnym samouczku zobaczymy bardziej pasujący przykład użycia składni Eval("columnName") do przekazywania parametru wejściowego jako argumentu do metody formatowania.

Poniżej przedstawiono składnię deklaratywną dla elementu GridView po dodaniu pola szablonu i metodzie DisplayDaysOnJob wywoływanej z elementu ItemTemplate:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name" SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="Title"
            SortExpression="Title" />
        <asp:TemplateField HeaderText="HireDate"
            SortExpression="HireDate">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox2" runat="server"
                    Text='<%# Bind("HireDate") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Calendar ID="Calendar1" runat="server"
                    SelectedDate='<%# Bind("HireDate") %>'
                    VisibleDate='<%# Eval("HireDate") %>'>
            </asp:Calendar>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Days On The Job">
            <ItemTemplate>
                <%# DisplayDaysOnJob((Northwind.EmployeesRow)
                    ((System.Data.DataRowView) Container.DataItem).Row) %>
            </ItemTemplate>
            <ItemStyle HorizontalAlign="Center" />
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Rysunek 16 przedstawia ukończony samouczek po wyświetleniu za pośrednictwem przeglądarki.

Rysunek 16. Liczba dni, przez które pracownik był w zadaniu, jest wyświetlana (kliknij, aby wyświetlić obraz pełnowymiarowy)

Podsumowanie

Pole TemplateField w kontrolce GridView zapewnia wyższy stopień elastyczności wyświetlania danych niż jest dostępny w innych kontrolkach pól. Pola szablonów (TemplateFields) są idealne w sytuacjach, w których:

• Wiele pól danych musi być wyświetlanych w jednej kolumnie GridView
• Dane najlepiej wyrażać przy użyciu kontrolki sieci Web, a nie zwykłego tekstu
• Dane wyjściowe zależą od danych bazowych, takich jak wyświetlanie metadanych lub ponowne formatowanie danych

Oprócz dostosowywania wyświetlania danych pola szablonu są również używane do dostosowywania interfejsów użytkownika używanych do edytowania i wstawiania danych, jak zobaczymy w przyszłych samouczkach.

Kolejne dwa samouczki kontynuują eksplorowanie szablonów, zaczynając od zapoznania się z używaniem pól szablonów w widoku DetailsView. Następnie przejdziemy do widoku FormView, który używa szablonów zamiast pól w celu zapewnienia większej elastyczności w układzie i strukturze danych.

Szczęśliwe programowanie!

Informacje o autorze

Scott Mitchell, autor siedmiu książek ASP/ASP.NET i założyciel 4GuysFromRolla.com, współpracuje z technologiami internetowymi firmy Microsoft od 1998 roku. Scott pracuje jako niezależny konsultant, trener i pisarz. Jego najnowsza książka to Sams Teach Yourself ASP.NET 2.0 w ciągu 24 godzin. Można go uzyskać pod adresem mitchell@4GuysFromRolla.com.

Specjalne podziękowania

Ta seria samouczków została omówiona przez wielu przydatnych recenzentów. Główny recenzent tego samouczka był Dan Jagers. Chcesz przejrzeć nadchodzące artykuły MSDN? Jeśli tak, napisz do mnie na adres mitchell@4GuysFromRolla.com.

Poprzedni następny