Auto Generate Serial Number in GridView

Share |

To auto generate serial number in Gridview, which we can use only for display purpose and has nothing to do with database and data related operations.

• Add Following Column in Grid View at first position

       
       <%# ((GridViewRow)Container).RowIndex + 1%>
   
 

Above code will simply autogenerate serial number in Gridview

Read more...

Add Update Delete in Gridview Asp.net

Share |

This article is about simple way to Add Update and Delete records using asp.net GridView using Dataset or Datatable. We shall update the database table naming (Download Demo)

"UserTable".

Schema for UserTable is as follows

Note:I have used SqlServer 2008

For this article we are going to fill GridView by data from database.

We are going to make perform following operations on data using GridView

1. Add New record into database; here data will directly be added into database table
2. Update Records into database, using edit link.
3. Delete Records using delete link

To make Add Update Delete in Gridview more user friendly; make sure your website is Ajax Enabled and Gridview is put under UpdatePanel. This will avoid unnecessary

postback and Gridview control will look smart.

Before we develop GridView, lets work out main functions for database operations. Create a Class File naming "ManageUsers" and add following functions one by one

Fetch Data from Database.

public DataTable Fetch()
    {
        string sql = "Select * From UserTable";
        SqlDataAdapter da = new SqlDataAdapter(sql, cnstr);
        DataTable dt = new DataTable();
        da.Fill(dt);
        return dt;
        // Write your own Logic for fetching data, this method should return a DataTable
    }

Update Data into Database

public void Update(int id, string FirstName, string LastName, string EmailAddress, string LoginId, string Password, string StartDate, string EndDate)
    {
        string sql = "UPDATE UserTable SET [First Name] = '"+ FirstName + "',[Last Name] = '" + LastName + "',[Login Id] = '" + LoginId +"' ,[Password] = '" + Password 

+ "'";
             sql += ",[Start Date] = '" + StartDate +"',[End Date] = '" + EndDate +"',[Email Address] = '" + EmailAddress + "' WHERE Id=" + id;

        SqlConnection conn = new SqlConnection(cnstr);
        conn.Open();
        SqlCommand cmd = new SqlCommand(sql, conn);
        cmd.ExecuteNonQuery();
        conn.Close();
        conn.Dispose();

    }

Insert new records into Database

public void Insert(string FirstName, string LastName, string EmailAddress, string LoginId, string Password, string StartDate, string EndDate)
    {
       string sql = "INSERT INTO UserTable ([First Name],[Last Name],[Login Id],[Password],[Start Date],[End Date],[Email Address]) ";
       sql +=" VALUES ('"+ FirstName +"','" + LastName + "','" + LoginId +"','" + Password + "','" + StartDate + "','" + EndDate + "','" + EmailAddress + "')";
           
        SqlConnection conn = new SqlConnection(cnstr);
        conn.Open();
        SqlCommand cmd = new SqlCommand(sql, conn);
        cmd.ExecuteNonQuery();
        conn.Close();
        conn.Dispose();
    }

Delete records from Database

public void Delete(int id)
    {
        string sql = "DELETE FROM UserTable WHERE Id=" + id;
        SqlConnection conn = new SqlConnection(cnstr);
        conn.Open();
        SqlCommand cmd = new SqlCommand(sql, conn);
        cmd.ExecuteNonQuery();
        conn.Close();
        conn.Dispose();
        // Write your own Delete statement blocks.
    }

In above code cnstr is the connection string for our

database.

Now we shall make changes in GridView (Note: Make sure GridView is added on page and under updatepanel) (Download Demo)

Once we add gridview inside updatepanel, do following things

1. set AutoGenerateColumns as False.
2. Change the ShowFooter Flag to True
3. set the DataKeyNames your column name for Id. (This field can have multiple values depending on requirement, we are going to use Id, as it is primary key of our datatable. These values are available in GridView events. We can access them using. GridView.DataKeys[e.RowIndex].Values[0]
4. Smart Navigation Tag of the GridView control, choose Add New Column
   
   
   Now add 8 BoundField columns with DataField values as "Id","First Name","Last Name","Email Address", "Login Id", "Password", "Start Date", "End Date"; also add 2 CommandField columns with one for Edit/Update and another for Delete functions. Now we can see our Grid View control is ready. Above data fields are column names of the DataTable we are using. (To bind correct columns, our datatable column names and gridview bound column's "DataField" should match.
5. We shall also give facility to add new records, for that we will put controls in Footer row. To do this we need to convert all above BoundField columns to template field columns. Click on the Smart Navigation Tag on the GridView choose Edit Columns, the Field’s property window will open.  Select column by column from Id, include also Edit column, and select ‘Convert this field into a TemplateField’
   
   
   Except "delete" column all the BoundField columns are converted in to Template Field Column.
6. Now one by one we will controls to Footer of the GridView. Right click on the GridView control, select Edit Template.
   
   Column[0] – Id: select Edit Template, choose column[0] – Id, you can view a label placed in the ItemTemplate section and a TextBox placed in the EditItemTemplate section (Id is our Primary key and it should not be editable). In edit Item Section template, put Label. Do not add anything in Footer Template.
   
   Column[1] - First Name
   Now again select Edit Template, choose column[1] - First Name, Add another TextBox in the FooterTemplate section and name it as NewFirstName. 
   
   Column[2] - Last Name
   Choose column[2] - Last Name, Add another TextBox in the FooterTemplate section and name it as NewLastName. 
   
   Column[3] - Email Address
   Choose column[3] - Email Address, Add another TextBox in the FooterTemplate section and name it as NewEmailAddress. 
   
   Column[4] - Login Id
   Choose column[4] - Login Id, Add another TextBox in the FooterTemplate section and name it as NewLoginId. 
   
   Column[5] - Password
   Choose column[5] - Password, Add another TextBox in the FooterTemplate section and name it as NewPassword. 
   
   Column[6] - Start Date
   Choose column[6] - Start Date, Add another TextBox in the FooterTemplate section and name it as NewStartDate. (Check following source view, we have added, Calender Extender of Ajax Toolkit)
   
   Column[7] - End Date
   Choose column[7] - End Date, Add another TextBox in the FooterTemplate section and name it as NewEndDate.  (Check following source view, we have added, Calender Extender of Ajax Toolkit)
   
   Column[8] - Edit
   Just add a link button into the FooterTemplate section, specify its CommandName property as ‘AddNew’.
7. 
   Source of the Gridview control changes to following, check we have added Calender Extender for date selection. (Download Demo)
   
   

   
           
               
                   
                       
                   
                   
                       
                   
               
               
                   
                       
                   
                   
                       
                   
                   
                       
                   
               
               
                   
                       
                   
                   
                       
                   
                   
                       
                   
               
               
                   
                       
                   
                   
                       
                   
                   
                       
                   
               
               
                   
                       
                   
                   
                       
                   
                   
                       
                   
               
               
                   
                       
                   
                   
                       
                   
                   
                       
                   
               
               
                   
                       
                       
                   
                   
                       
                       
                   
                   
                       
                   
               
               
                   
                       
                       
                   
                   
                       
                       
                   
                   
                       
                   
               
               
                   
                       
                        
                   
                   
                       Add New
                   
                   
                       
                   
               
               
           
           
   

8. Now we shall develop code in code behind of web page i.e. in C#. We have already developed ManageUsers Class in start. We will develop code for handing Edit,Update and Insert operations of GridView. Add events as shown in following image.
   
   
   
   
   
   Now check out following code for each event we have added for GridView.
   
   Create object of the Class "ManageUsers"; and write function to Bind Customer details to the GridView.

   private void BindCustomers()
       {
           DataTable CustomerTable = customer.Fetch();
   
           if (CustomerTable.Rows.Count > 0)
           {
               gridUserManagement.DataSource = CustomerTable;
               gridUserManagement.DataBind();
           }
           else
           {
               CustomerTable.Rows.Add(CustomerTable.NewRow());
               gridUserManagement.DataSource = CustomerTable;
               gridUserManagement.DataBind();
   
               int TotalColumns = gridUserManagement.Rows[0].Cells.Count;
               gridUserManagement.Rows[0].Cells.Clear();
               gridUserManagement.Rows[0].Cells.Add(new TableCell());
               gridUserManagement.Rows[0].Cells[0].ColumnSpan = TotalColumns;
               gridUserManagement.Rows[0].Cells[0].Text = "No Record Found";
           }
       }
   

   
   Initializing the GridView control on Page load:
   

   protected void Page_Load(object sender, EventArgs e)
       {
           if (!IsPostBack)
           {
               BindCustomers();
           }
       }
   

   
   GridView RowEditing Event
   

   protected void gridUserManagement_RowEditing(object sender, GridViewEditEventArgs e)
       {
           gridUserManagement.EditIndex = e.NewEditIndex;
           BindCustomers(); 
       }
   

   
   GridView RowCancelingEdit Event
   

   protected void gridUserManagement_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
       {
           gridUserManagement.EditIndex = -1;
           BindCustomers(); 
       }
   

   
   Updating Records (GridView RowUpdating Event): Update the data to the UserTable, by adding the following lines of code in the GridView’s RowUpdating event
   

   protected void gridUserManagement_RowUpdating(object sender, GridViewUpdateEventArgs e)
       {
           TextBox txtNewFirstName = (TextBox)gridUserManagement.Rows[e.RowIndex].FindControl("TextBox2");
           TextBox txtNewLastName = (TextBox)gridUserManagement.Rows[e.RowIndex].FindControl("TextBox3");
           TextBox txtNewEmailAddress = (TextBox)gridUserManagement.Rows[e.RowIndex].FindControl("TextBox4");
           TextBox txtNewLoginId = (TextBox)gridUserManagement.Rows[e.RowIndex].FindControl("TextBox5");
           TextBox txtNewPassword = (TextBox)gridUserManagement.Rows[e.RowIndex].FindControl("TextBox6");
           TextBox txtNewStartDate = (TextBox)gridUserManagement.Rows[e.RowIndex].FindControl("TextBox8");
           TextBox txtNewEndDate = (TextBox)gridUserManagement.Rows[e.RowIndex].FindControl("TextBox9");
   
           customer.Update(Convert.ToInt32(gridUserManagement.DataKeys[e.RowIndex].Values[0].ToString()), txtNewFirstName.Text, txtNewLastName.Text, txtNewEmailAddress.Text, txtNewLoginId.Text, txtNewPassword.Text, txtNewStartDate.Text, txtNewEndDate.Text);
           gridUserManagement.EditIndex = -1;
           BindCustomers(); 
       }
   

   The above block of codes in RowUpdating event, finds the control in the GridView, takes those values in pass it to the ManageUsers class Update method. The first parameter GridView1.DataKeys[e.RowIndex].Values[0].ToString() will return the Id of the Customer. That is the unique id for each customer to perform update function.
   
   Delete In GridView:
   

   protected void gridUserManagement_RowDeleting(object sender, GridViewDeleteEventArgs e)
       {
           customer.Delete(Convert.ToInt32(gridUserManagement.DataKeys[e.RowIndex].Values[0].ToString()));
           BindCustomers(); 
       }
   

   
   Add New Records from GridView control
   
   

   protected void gridUserManagement_RowCommand(object sender, GridViewCommandEventArgs e)
       {
           if (e.CommandName.Equals("AddNew"))
           {
               TextBox txtNewFirstName = (TextBox)gridUserManagement.FooterRow.FindControl("NewFirstName");
               TextBox txtNewLastName = (TextBox)gridUserManagement.FooterRow.FindControl("NewLastName");
               TextBox txtNewEmailAddress = (TextBox)gridUserManagement.FooterRow.FindControl("NewEmailAddress");
               TextBox txtNewLoginId = (TextBox)gridUserManagement.FooterRow.FindControl("NewLoginId");
               TextBox txtNewPassword = (TextBox)gridUserManagement.FooterRow.FindControl("NewPassword");
               TextBox txtNewStartDate = (TextBox)gridUserManagement.FooterRow.FindControl("NewStartDate");
               TextBox txtNewEndDate = (TextBox)gridUserManagement.FooterRow.FindControl("NewEndDate");
   
               customer.Insert(txtNewFirstName.Text, txtNewLastName.Text, txtNewEmailAddress.Text, txtNewLoginId.Text, txtNewPassword.Text, txtNewStartDate.Text, txtNewEndDate.Text);
               BindCustomers();
           } 
       }
   

   
   

This is how we can develop a simple GridView control in Asp.Net with Add Update Delete functionality.

Download Demo Code here --> Add Update Delete in Gridview Asp.net

Read more...

Cross Page PostBack In Asp.Net

Share |

In web development, many times we come across following situation

We need to redirect to new page, but we also need some data which belongs to previous page, we might need to display the data on new page. So what things we normally do are,

eighter keep the data in session, or in hidden variable, or put data in application variable, or again run the code to get same data and bind it to similar kind of control.

I think this is something which we can avoid by simply applying logic of Cross Page Postback, where we can directly identify the controls whose value we need to display on new page.

E.g.

step1--> We have Grid View on say PAGE1.aspx and we redirect to PAGE2.aspx.

step2--> On PAGE2.aspx we need same Grid View to Display. For this we will probably use traditional ways to maintain the grid.

Now what if I say we can directly access grid which is already filled with data, and simply put the same grid on PAGE2.aspx. This sounds very simple. And it is very simple. For better understanding just check out following code which I have written on PAGE2.aspx

<br /> protected void Page_Load(object sender, EventArgs e)<br /> {<br /> if (PreviousPage.IsCrossPagePostBack)<br /> {<br /> TextBox tb1 = (TextBox)PreviousPage.FindControl("_tb1");<br /> TextBox tb2 = (TextBox)PreviousPage.FindControl("_tb2");<br /> GridView Gv = (GridView)PreviousPage.FindControl("GridView1");<br /> int sum = Int32.Parse(tb1.Text) + Int32.Parse(tb2.Text);<br /> _div.Controls.Add(Gv);<br /> Response.Write(sum.ToString());<br /> }<br /> <br /> }<br />

It looks very easy to use the code. You can DOWNLOAD the demo code, explained below
In above code check out the If condition where we have check whether it is a CrossPagePostBack or not.
We have following things in our web application.

• Page1.aspx (with cs code)
• Page2.aspx (with cs code)

Lets build Page1.aspx first, we have following HTML in Page1.aspx file. 

<br /> <form id="form1" runat="server"> <div> <asp:TextBox runat="server" ID="_tb1"></asp:TextBox><br /> +<br /> <asp:TextBox runat="server" ID="_tb2"></asp:TextBox><br /> <br /> <asp:Button runat="server" ID="_button" PostBackUrl="~/Page2.aspx" Text=" = " /><br /> <asp:GridView ID="GridView1" runat="server"><br /> </asp:GridView><br /> </div> </form>

check out the PostBackUrl of button. which is set to Page2.aspx, we just need to do this in our code so that Page1 will be accessible in Page2.aspx
which looks like following page

Now we will write code in Page1.aspx.cs file which is as below, you can generally copy paste the code in your files.

<br /> protected void Page_Load(object sender, EventArgs e)<br /> {<br /> GridView1.DataSource = _sampleData;<br /> GridView1.DataBind();<br /> <br /> }<br /> public DataTable _sampleData<br /> {<br /> get<br /> {<br /> DataTable dt = (DataTable)Session["DataTable"];<br /> if (dt == null)<br /> {<br /> dt = new DataTable();<br /> dt.Columns.Add(new DataColumn("Contact Name", typeof(string)));<br /> dt.Columns.Add(new DataColumn("Company Name", typeof(string)));<br /> dt.Columns.Add(new DataColumn("City", typeof(string)));<br /> dt.Columns.Add(new DataColumn("Country", typeof(string)));<br /> dt.Columns.Add(new DataColumn("rowNumber", typeof(int)));<br /> <br /> dt.Rows.Add(new object[] { "Maria Anders", "Alfreds Futterkiste", "Berlin", "Germany", 0 });<br /> dt.Rows.Add(new object[] { "Ana Trujillo", "Emparedados y helados ", "México D.F.", "Mexico", 1 });<br /> dt.Rows.Add(new object[] { "Antonio Moreno", "Antonio Moreno Taquería", "México D.F.", "Mexico", 2 });<br /> dt.Rows.Add(new object[] { "Thomas Hardy", "Around the Horn", "London", "UK", 3 });<br /> dt.Rows.Add(new object[] { "Christina Berglund", "Berglunds snabbköp", "Luleå", "Sweden", 4 });<br /> dt.Rows.Add(new object[] { "Hanna Moos", "Delikatessen", "Mannheim", "Germany", 5 });<br /> dt.Rows.Add(new object[] { "Blauer See", "Citeaux Blondesddsl ", "Strasbourg", "France", 6 });<br /> dt.Rows.Add(new object[] { "Frédérique", "Bólido Comidas preparadas", "Madrid", "Spain", 7 });<br /> dt.Rows.Add(new object[] { "Martín Sommer", "Lebihan", "Bon app", "France", 8 });<br /> dt.Rows.Add(new object[] { "Laurence", "Lincoln Bottom-Dollar Markets", "Marseille", "France", 9 });<br /> dt.Rows.Add(new object[] { "Elizabeth", "père et fils", "Tsawassen", "Canad", 10 });<br /> dt.Rows.Add(new object[] { "Aria Cruz", "Familia Arquibaldo Sao", "Paulo", "Brazil", 11 });<br /> dt.Rows.Add(new object[] { "Diego Roel", "FISSA Fabrica Inter. Salchichas S.A.", "Madrid", "Spain", 12 });<br /> dt.Rows.Add(new object[] { "Martine", "Rancé Folies gourmandes", "Lille", "France", 13 });<br /> dt.Rows.Add(new object[] { "Maria", "Larsson Folk och fä HB", "Bräcke", "Sweden", 14 });<br /> dt.Rows.Add(new object[] { "Peter", "Franken Frankenversand", "München", "Germany", 15 });<br /> dt.Rows.Add(new object[] { "Carine", "Schmitt France restauration", "Nantes", "France", 16 });<br /> dt.Rows.Add(new object[] { "Paolo", "Accorti Franchi S.p.A.", "Torino", "Italy", 17 });<br /> dt.Rows.Add(new object[] { "Lino", "Rodriguez Furia Bacalhau e Frutos do Mar", "Lisboa", "Portugal", 18 });<br /> dt.Rows.Add(new object[] { "Eduardo", "Saavedra Galería del gastrónomo", "Barcelona", "Spain", 19 });<br /> dt.Rows.Add(new object[] { "José", "Pedro Freyre Godos Cocina Típica", "Sevilla", "Spain", 20 });<br /> <br /> Session["DataTable"] = dt;<br /> }<br /> return dt;<br /> }<br /> set<br /> {<br /> Session["DataTable"] = value;<br /> }<br /> <br /> }<br />

This is what we have to do for Page1.aspx, we are done with our code. In Page1.aspx we simple have two textboxes and one Grid View control which we bind to some sample table. In Page2.aspx we Just make Grid View Object and set the reference of Page1's Grid View to new gird view thats it. If you observe the code written for Page2.aspx, we don't retrieve the data from any where and bind it to Grid View, we simple set the reference. This makes code execution also easy, and in similar way we can always pick some random controls which we need to display on some other page. We can also have many links referring to different pages depending on the requirement.

Download Demo Code here --> CrossPagePostback.zip

Read more...