How to Create Gridview Comand Button
There are ways to make the Grid View more interactive by placing buttons in and pass in a method that will do some tasks by extracting information on each row within the Grid View Rows.
Download: Maxybyte Calculator
Doing this will make our application more dynamic and easy to interact with.
We can also change the order of what each column will display within the GridView.
These changes are possible right within the GridView when it has already been placed to the design view in the Default.aspx field: Right there Click on GridView table representation, this would select all the table within the Gridview and display an arrow at a comer right beside the GridView from which you need to select GridView Task > Edit Columns:
![]() |
Gridview Task View |
To add a button to the GridView Edit the Default.aspx for the previous lesson or set up a new one so that you have :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="LocalDbsample. Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/ xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="customerGridView" runat="server" OnRowCommand=" customerGridView_RowCommand"> <Columns>
<asp:ButtonField Text="View" />
</Columns>
</asp:GridView>
</div>
<br />
<br />
<asp:Label ID="resultLabel" runat ="server"></asp:Label>
</form>
</body>
</html>
Step1b: How To Use Design Mode Instead of Source-Viewer Mode of the Default
It is possible as well to use the design Mode of the default.aspx to make changes to how you want the GridView control to display the result from the database.
In this case whatever effect you make within the design mode on the GridView Control will reflect in the Source Code for the Default.aspx.After you have selected GridView Task > Edit Columns: then follow What to do below:
![]() |
Design mode implementation |
Step2: Set up the RowCommand Right inside the Project Property and name it as customerGridView_RowCommand
This customerGridView_RowCommand will take up the function that would make it possible to select text from each row in our Asp.Net Application. Double click on the customerGridView_RowCommand this will take you to the source code viewer mode within the Default.aspx.cs where you will write out codes that will make the Application work.
Read also: How to display dbset result in ASP.NET Grid-like format
You will also see a method which has been generated for you with the customerGridView_
Step3: Write the Commanding Code that Gets the Application Start Running Within Default.aspx.cs
Here is where all our code will reside that will get the application running:Code:
namespace LocalDbsample
{ | |
public partial class Default : System.Web.UI.Page | |
{ | |
protected void Page_Load(object sender, EventArgs e) | |
{ | |
SkypletEntities db = new SkypletEntities(); | |
var customers = db.Customers; | |
//string result = ""; | |
//foreach (var customer in customers) | |
// { | |
// result += string.Format("{0} | {1} | {2}", customer.Name, customer.CustomerId, customer.Address); | |
// } | |
customerGridView.DataSource = customers.ToList(); // Using Gridview to get data from database | |
customerGridView.DataBind();// Populate out data | |
//resultLabel.Text = result; | |
} | |
protected void customerGridView_RowCommand(ob | |
{ | |
int index = Convert.ToInt32(e. | |
GridViewRow row = customerGridView.Rows[index]; | |
var view = row.Cells[0].Text; | |
var CustomerIdValue = row.Cells[1].Text; | |
var Name = row.Cells[2].Text; | |
var Address = row.Cells[3].Text; | |
var City = row.Cells[4].Text; | |
var Note = row.Cells[7].Text; | |
var CustomerId = Guid.Parse(CustomerIdValue); | |
resultLabel.Text = string.Format("{0} | {1} | {2} | {3} | {4}", CustomerId, Name, Address, City, Note); | |
} | |
} | |
} //save and run: |
|
Best blog. Impressive!! and we are also one of the SAFEALL Security Systems In India.
ReplyDeleteBest Wireless Doorbell Camera