ASP.NET Tutorial/Data Binding/CommandField
Adding edit functionality using a CommandField control
<source lang="csharp">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Untitled Page</title>
</head> <body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" Runat="server" DataSourceID="SqlDataSource1" DataKeyNames="CustomerID" AutoGenerateColumns="False" AllowSorting="True" AllowPaging="True"> <PagerStyle HorizontalAlign="Center"></PagerStyle> <PagerSettings Position="TopAndBottom" FirstPageText="Go to the first page" LastPageText="Go to the last page" Mode="NextPreviousFirstLast"> </PagerSettings> <Columns> <asp:CommandField ShowHeader="True" HeaderText="Command" ShowEditButton="True"></asp:CommandField> <asp:BoundField ReadOnly="True" HeaderText="CustomerID" DataField="CustomerID" SortExpression="CustomerID"></asp:BoundField> <asp:HyperLinkField HeaderText="CompanyName" DataNavigateUrlFields="CustomerID,Country" SortExpression="CompanyName" DataNavigateUrlFormatString= "http://www.foo.ru/Customer.aspx?id={0}&country={1}" DataTextField="CompanyName"> </asp:HyperLinkField> <asp:BoundField HeaderText="ContactName" DataField="ContactName" SortExpression="ContactName"></asp:BoundField> <asp:BoundField HeaderText="ContactTitle" DataField="ContactTitle" SortExpression="ContactTitle"></asp:BoundField> <asp:BoundField HeaderText="Address" DataField="Address" SortExpression="Address"></asp:BoundField> <asp:BoundField HeaderText="City" DataField="City" SortExpression="City"></asp:BoundField> <asp:BoundField HeaderText="Region" NullDisplayText="N/A" DataField="Region" SortExpression="Region"></asp:BoundField> <asp:BoundField HeaderText="PostalCode" DataField="PostalCode" SortExpression="PostalCode"></asp:BoundField> <asp:BoundField HeaderText="Country" DataField="Country" SortExpression="Country"></asp:BoundField> <asp:BoundField HeaderText="Phone" DataField="Phone" SortExpression="Phone"></asp:BoundField> <asp:BoundField HeaderText="Fax" DataField="Fax" SortExpression="Fax"></asp:BoundField> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" Runat="server" SelectCommand="SELECT * FROM [Customers]" ConnectionString="<%$ ConnectionStrings:AppConnectionString1 %>" DataSourceMode="DataSet" UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [ContactTitle] = @ContactTitle, [Address] = @Address, [City] = @City, [Region] = @Region, [PostalCode] = @PostalCode, [Country] = @Country, [Phone] = @Phone, [Fax] = @Fax WHERE [CustomerID] = @original_CustomerID"> <UpdateParameters> <asp:Parameter Type="String" Name="CompanyName"></asp:Parameter> <asp:Parameter Type="String" Name="ContactName"></asp:Parameter> <asp:Parameter Type="String" Name="ContactTitle"></asp:Parameter> <asp:Parameter Type="String" Name="Address"></asp:Parameter> <asp:Parameter Type="String" Name="City"></asp:Parameter> <asp:Parameter Type="String" Name="Region"></asp:Parameter> <asp:Parameter Type="String" Name="PostalCode"></asp:Parameter> <asp:Parameter Type="String" Name="Country"></asp:Parameter> <asp:Parameter Type="String" Name="Phone"></asp:Parameter> <asp:Parameter Type="String" Name="Fax"></asp:Parameter> <asp:Parameter Type="String" Name="CustomerID"></asp:Parameter> </UpdateParameters> </asp:SqlDataSource>
</form>
</body> </html> File: Web.config <configuration>
<appSettings/> <connectionStrings> <add name="AppConnectionString1" connectionString="Data Source=localhost\SQLEXPRESS;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient" /> </connectionStrings> <system.web> <compilation debug="true" strict="false" explicit="true"> <codeSubDirectories> <add directoryName="VB"></add> <add directoryName="CS"></add> </codeSubDirectories> </compilation> <pages> <namespaces> <clear/> <add namespace="System"/> <add namespace="System.Collections"/> <add namespace="System.Collections.Specialized"/> <add namespace="System.Configuration"/> <add namespace="System.Text"/> <add namespace="System.Text.RegularExpressions"/> <add namespace="System.Web"/> <add namespace="System.Web.Caching"/> <add namespace="System.Web.SessionState"/> <add namespace="System.Web.Security"/> <add namespace="System.Web.Profile"/> <add namespace="System.Web.UI"/> <add namespace="System.Web.UI.WebControls"/> <add namespace="System.Web.UI.WebControls.WebParts"/> <add namespace="System.Web.UI.HtmlControls"/> </namespaces> </pages> <authentication mode="Windows"></authentication> <identity impersonate="true"/> </system.web>
</configuration></source>
Use a CommandField to customize the appearance of the Edit, Delete, Update, Cancel, and Select buttons
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>Show CommandField</title>
</head> <body>
<form id="form1" runat="server">
<asp:GridView id="grdProducts" DataSourceID="srcProducts" DataKeyNames="Id" AutoGenerateColumns="false" Runat="server"> <Columns> <asp:CommandField ButtonType="Image" ShowEditButton="true" EditText="Edit Product" UpdateText="Update Product" ShowCancelButton="true" CancelText="Cancel Edit" ShowDeleteButton="true" DeleteText="Delete Product"/> <asp:BoundField DataField="Title" HeaderText="Product Title" /> <asp:BoundField DataField="Director" HeaderText="Product Director" /> </Columns> </asp:GridView> <asp:SqlDataSource id="srcProducts" ConnectionString="<%$ ConnectionStrings:Products %>" SelectCommand="SELECT Id,Title,Director FROM Products" UpdateCommand="UPDATE Products SET Title=@Title, Director=@Director WHERE Id=@Id" DeleteCommand="DELETE Products WHERE Id=@Id" Runat="server" />
</form>
</body> </html> File: Web.config <configuration>
<connectionStrings> <add name="Products" connectionString="Data Source=.\SQLEXPRESS; AttachDbFilename=|DataDirectory|MyDatabase.mdf;Integrated Security=True;User Instance=True" /> </connectionStrings>
</configuration></source>