Show, Edit, Update Data Using GridView Control

Introduction

The GridView is composed of a set of fields that indicate what properties from the DataSource are to be included in the rendered output along with how the data will be displayed. The simplest field type is the BoundField, which displays a data value as text. Other field types display the data using alternate HTML elements. The CheckBoxField, for example, renders as a check box whose checked state depends on the value of a specified data field; the ImageField renders an image whose image source is based upon a specified data field. Hyperlinks and buttons whose state depends on an underlying data-field value can be rendered using the HyperLinkField and ButtonField field types, respectively.

Main

While both DataGrid and GridView controls are used for binding and displaying data in tabular format, there are subtle differences between the two as far as their suitability is concerned. When you use a DataGrid control, you need to write your own code for binding, sorting, and paging data. In contrast, these features are inbuilt in the GridView control and you can display, insert, edit or delete your data using this control without having to write code. However, some of these pitfalls of the DataGrid control have been addressed with ASP.NET 2.0 and after. 
 
The GridView control is the successor to the DataGrid control. Like the DataGrid control, the GridView control was designed to display data in an HTML table. When bound to a data source, the DataGrid and GridView controls each display a row from a DataSource as a row in an output table. Although it has a similar object model to that of the DataGrid control, the GridView control also has a number of new features and advantages over the DataGrid control, which include: Richer design-time capabilities, Improved data source binding capabilities, Automatic handling of sorting, paging, updates, and deletes,   Additional column types and design-time column operations, and A Customized pager user interface (UI) with the PagerTemplate property.

Now lets look at my GridView example to understand how it works. First create a new project called GridView. Next drag the SQL DataSource and GridView Control to the empty area of your web form. This time we will use sqlDataSource instead of DataBind method.

<asp:SqlDataSource runat="server" ID="ProductSource" ConnectionString="Data 
Source=YourDBSource;Initial Catalog=NorthWind;UID=YpurDBUserName;pwd=YourDBPassword"
            SelectCommand="SELECT ProductID, ProductName, discontinued 
FROM products where CategoryID = @CategoryID"
            UpdateCommand="UPDATE products SET
           ProductName=@ProductName, discontinued=@discontinued WHERE ProductID=@ProductID"
            ProviderName="System.Data.SqlClient">
            <SelectParameters>
                <asp:ControlParameter Name="CategoryID" ControlID="txtCategory" 
DefaultValue="1" Type="Int32" />
            </SelectParameters>
</asp:SqlDataSource>

Note that there are UpdateCommand which will work for AutoGenerateEditButton in GridView Property. Lets take a look at the Gridview Syntax.

<asp:Label ID="lblCategory" runat="server" Text="Category"></asp:Label>
<asp:TextBox ID="txtCategory" runat="server"></asp:TextBox>
<asp:GridView ID="gvExample" runat="server" DataSourceID="ProductSource" 
DataKeyNames="productid"
            AutoGenerateEditButton="true" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="ProductName" HeaderText="Product" />
                <asp:CheckBoxField DataField="discontinued" 
HeaderText="Discontinued" />
                <asp:ButtonField ButtonType="Button" Text="Buy" />
                <asp:HyperLinkField Text="More Info..." 
DataNavigateUrlFields="productid,discontinued"
                    DataNavigateUrlFormatString="more.aspx?id={0}&disc={1}" />
            </Columns>
</asp:GridView>

There are AutoGenerateEditButton="true" on above syntax. This means every single row in GridView will be inserted with edit button. This enabled us to edit record on Grid. Next important thing is the select parameters in SqlDataSource Syntax. This is to filter the selected data based on Category ID. It is Consist of int number 1, 2, and so on. Next for this Select Parameter, you need to insert also a textbox with ID="txtCategory". Look at the asp:TextBox above.

when someone click edit link it will look like the one below.

You already knew predifened BoundField, CheckBoxField, ButtonField above. Now you can also insert a TemplateField like the one below.

<asp:templatefield headertext="Product">
   <ITEMTEMPLATE>
     <B><%# Eval("productname")%></B> <BR>
     available in <%# Eval("quantityperunit")%>
  </ITEMTEMPLATE>
</asp:templatefield>

The TemplateField is used by data-bound controls (such as GridView and DetailsView) to display custom content for each record displayed. When you need to display content in a data-bound control that is not provided by one of the predefined data control fields (such as BoundField), use the TemplateField class to create your custom user interface (UI). The TemplateField object is displayed differently depending on the data-bound control in which it is used. For example, the GridView control displays a TemplateField object as a column, and the DetailsView control displays it as a row.

Another property you can add to your GridView is sorting and paging. They are enabled simply by turning on the AllowPaging and AllowSorting properties like the one below.

<asp:GridView AllowPaging="true" AllowSorting="true" ID="gvExample" 
runat="server" DataSourceID="ProductSource" DataKeyNames="productid"
            AutoGenerateEditButton="true" AutoGenerateColumns="false">
            <pagersettings firstpagetext="7" lastpagetext="8" 
               nextpagetext="4" PreviousPageText="3" mode=NextPreviousFirstLast /> 
            <Columns>
                <asp:BoundField DataField="ProductName" HeaderText="Product" />
                <asp:CheckBoxField DataField="discontinued" 
HeaderText="Discontinued" />
                <asp:ButtonField ButtonType="Button" Text="Buy" />
                <asp:HyperLinkField Text="More Info..." 
DataNavigateUrlFields="productid,discontinued"
                    DataNavigateUrlFormatString="more.aspx?id={0}&disc={1}" />
            </Columns>
</asp:GridView>

Page result will look like the one below.

Conclusion

Data-bound controls are an essential part of most, if not all, Web apps. Data-bound controls should be simple and powerful. Ideally, they should provide advanced features in a few clicks and use a limited amount of code. The key point of ASP.NET 3.5 data binding was that it required less code with more powerful data operations.

Reference

Include all the useful links or references that can help users learn about this tutorial

1. GridView Class
2. More Over DataGrid

Other Related and Popular Articles :

Author Profile : Hans Candra

Comments