Click here to Skip to main content
12,296,307 members (64,276 online)
Click here to Skip to main content
Add your own
alternative version

Stats

412.7K views
1 download
68 bookmarked
Posted

ASP.NET GridView - Add a new record

, 19 Dec 2005
Rate this:
Please Sign up or sign in to vote.
ASP.NET GridView - how to add a new record.

Introduction

This code drop is part of a Smash and Grab series for the seriously ADD (Attention Deficit Disorder) programmer. I'll bet there are a lot of other programmers out there who would like to make code available to others, but just don't want to spend the hours required to create a full-blown "CodeProject" article. This is an attempt to see if I can make some useful code available to other programmers, and do it in 10 minutes. I encourage others to contribute to "Smash and Grab".

The point of this series is to present usable pre-canned classes or techniques which solve a real world problem without going into too much detail about how it works. I mean, who really cares about how System.Collections.ArrayList works, you just use it.

Please fully comment the code so that the person who really cares (and has the time) will be able to understand the underlying algorithm.

Using the code

There has been a lot of whining on the net about what a train-wreck the ASP.NET 2.0 GridView is because it won't do inserts and if the table source is empty, the grid does not even render.

Here is a solution in less than 15 lines of code.

  • Create a GridView as usual (I am using the NorthWind Categories table as an example).
  • Create the data source.
  • Change:
    SelectCommand="SELECT [CategoryID], [CategoryName]," + 
                " convert(nvarchar(1000),[Description]) FROM [Categories]";

    to:

    SelectCommand="SELECT '' as [CategoryID], '' as [CategoryName]," + 
             " '' as [Description] UNION SELECT [CategoryID]," + 
             " [CategoryName], convert(nvarchar(1000),[Description])" + 
             " FROM [Categories]";

    This inserts a blank row as the first line of the grid.

    This is the line that you will be editing to add the new record.

  • Add:
    OnRowUpdating="GridView1_RowAdding";

    as an event to the grid (you can do it through the GUI).

  • Add the highlighted JavaScript code.

    It finds the first "Edit Delete" text and changes it to "Add".

  • Add the "GridView1_RowAdding" method.

OnRowUpdating is called by the GridView before it updates a row. The GridView thinks it is doing an update to CategoryID=0 (which will silently fail). Meanwhile, you are scooping the data and doing a secret insert.

<%@ Page Language="C#" AutoEventWireup="true" 
             CodeFile="AddUpdate.aspx.cs" Inherits="AddUpdate" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script>
    function FixGrid(idGrid)
    {
      // content looks like:
      //"<A href=\"javascript:__doPostBack('GridView1',
      //    'Edit$0')\">Edit</A> 
      // <A href=\"javascript:__doPostBack('GridView1',
      //    'Delete$0')\">Delete</A>"
      // replace Edit with Add, remove Delete
      var Parts = 
       idGrid.firstChild.childNodes[1].childNodes[0].innerHTML.split(">Edit<");
      var tmp = Parts.join(">Add<"); 
      Parts = tmp.split(">Delete<");
      idGrid.firstChild.childNodes[1].childNodes[0].innerHTML = 
                                        Parts.join("><");
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" 
                 AutoGenerateColumns="False" DataKeyNames="CategoryID"
            DataSourceID="SqlDataSource1" 
                    OnRowUpdating="GridView1_RowAdding">
            <Columns>
                <asp:CommandField ShowDeleteButton="True" 
                    ShowEditButton="True" />
                <asp:BoundField DataField="CategoryID" 
                    HeaderText="CategoryID" InsertVisible="False"
                    ReadOnly="True" SortExpression="CategoryID" />
                <asp:BoundField DataField="CategoryName" 
                       HeaderText="CategoryName" 
                       SortExpression="CategoryName" />
                <asp:BoundField DataField="Description" 
                       HeaderText="Description" 
                       SortExpression="Description" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
              ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            DeleteCommand="DELETE FROM [Categories] 
                           WHERE [CategoryID] = @CategoryID"
            InsertCommand="INSERT INTO [Categories] 
                           ([CategoryName], [Description]) 
                           VALUES (@CategoryName, @Description)"
            SelectCommand="SELECT '' as [CategoryID], 
                '' as [CategoryName], '' as [Description]
                UNION SELECT [CategoryID], [CategoryName], 
                convert(nvarchar(1000),[Description])
                FROM [Categories]" 
            UpdateCommand="UPDATE [Categories] SET 
                           [CategoryName] = @CategoryName, 
                           [Description] = @Description 
                           WHERE [CategoryID] = @CategoryID">
            <DeleteParameters>
                <asp:Parameter Name="CategoryID" Type="Int32" />
            </DeleteParameters>
            <UpdateParameters>
                <asp:Parameter Name="CategoryName" Type="String" />
                <asp:Parameter Name="Description" Type="String" />
                <asp:Parameter Name="CategoryID" Type="Int32" />
            </UpdateParameters>
            <InsertParameters>
                <asp:Parameter Name="CategoryName" Type="String" />
                <asp:Parameter Name="Description" Type="String" />
            </InsertParameters>
        </asp:SqlDataSource>
    
    </div>
    </form>
        <script>
            FixGrid(document.all.GridView1);
        </script>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class AddUpdate : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void GridView1_RowAdding(object sender, 
                        GridViewUpdateEventArgs e)
    {
        if (e.RowIndex > 0)
            return; // RowIndex=0 is the row we want to insert
        System.Collections.Hashtable h = 
                    new System.Collections.Hashtable();

        foreach (System.Collections.DictionaryEntry x in e.NewValues)
        {
            h[x.Key] = x.Value;
        }
        // you now have the data to insert in a hashtable
        // get it into the database using your
        // usual Data Access Layer methods

    }
}

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Gary Dryden
Software Developer (Senior)
Canada Canada
No Biography provided

You may also be interested in...

Comments and Discussions

 
GeneralQuick and Easy fix for insert record Pin
drewster116-Jun-11 22:44
memberdrewster116-Jun-11 22:44 
GeneralWorks well for me, but problems arise with paging. Pin
stapes13-Apr-11 23:56
memberstapes13-Apr-11 23:56 
GeneralDoes not work in Firefox Pin
stapes5-Apr-11 1:06
memberstapes5-Apr-11 1:06 
GeneralRe: Does not work in Firefox Pin
stapes14-Apr-11 0:50
memberstapes14-Apr-11 0:50 
Generalerror ! Pin
sharathu730-Dec-10 21:59
membersharathu730-Dec-10 21:59 
Generaldisplay blank grid in add/edit/update mode on UI Pin
Mr. MAHESHKUMAR5-Jan-10 23:28
memberMr. MAHESHKUMAR5-Jan-10 23:28 
GeneralEliminating GridView1_RowAdding Pin
Roy Oliver6-Aug-09 7:25
memberRoy Oliver6-Aug-09 7:25 
GeneralRe: Eliminating GridView1_RowAdding Pin
Roy Oliver6-Aug-09 9:20
memberRoy Oliver6-Aug-09 9:20 
GeneralGridview Pin
ksarchana3-Jan-09 0:47
memberksarchana3-Jan-09 0:47 
GeneralCorrected javascript for IE, FF, and Safari Pin
karen_webexc30-Jul-08 4:12
memberkaren_webexc30-Jul-08 4:12 
GeneralPls provide the code for inserting data in hashtable using DAL Pin
Member 315998723-Jul-08 7:21
memberMember 315998723-Jul-08 7:21 
QuestionHow to place data from SQLSERVER into gridview and then edit and delete data Pin
waseemtalib27-May-08 18:55
memberwaseemtalib27-May-08 18:55 
GeneralAlternative insert/update code Pin
Paul /)/+)16-Oct-07 0:52
memberPaul /)/+)16-Oct-07 0:52 
QuestionWorks great except for Paging & Sorting... Pin
imxuf17-Jul-07 12:46
memberimxuf17-Jul-07 12:46 
GeneralHere is how you can make it work on multiple GridViews Pin
HamidTheProgrammer28-Mar-07 10:42
memberHamidTheProgrammer28-Mar-07 10:42 
GeneralDoes't Work Pin
Member #376055221-Mar-07 2:40
memberMember #376055221-Mar-07 2:40 
GeneralAnother method to change to ADD link - Use RowDataBound [modified] Pin
dbernett15-Nov-06 6:15
memberdbernett15-Nov-06 6:15 
GeneralRe: Another method to change to ADD link - Use RowDataBound Pin
ccshine5-Dec-06 12:42
memberccshine5-Dec-06 12:42 
GeneralBut, if we use sorting for the same grid Pin
kvPriya5-Oct-06 18:41
memberkvPriya5-Oct-06 18:41 
GeneralI fix the javascript for the linkbutton names. Check it out! Pin
kampfer!24-Sep-06 9:52
memberkampfer!24-Sep-06 9:52 
Questiondoesnt work with strongly typed datasets Pin
xgnitesh13-Sep-06 20:52
memberxgnitesh13-Sep-06 20:52 
QuestionRe: doesnt work with strongly typed datasets [modified] Pin
rbm_the_spitfire2-Oct-06 22:09
memberrbm_the_spitfire2-Oct-06 22:09 
GeneralGood, but the Edit,Delete are not being replaced by Add Pin
kvPriya8-Sep-06 18:38
memberkvPriya8-Sep-06 18:38 
GeneralRe: Good, but the Edit,Delete are not being replaced by Add Pin
zwitterion14-Sep-06 7:55
memberzwitterion14-Sep-06 7:55 
GeneralRe: Good, but the Edit,Delete are not being replaced by Add Pin
Vincent D'Souza25-Oct-06 5:55
memberVincent D'Souza25-Oct-06 5:55 
GeneralGreat! but some issues Pin
Thouseeque7-Sep-06 19:53
memberThouseeque7-Sep-06 19:53 
Questiongreat but limited? Pin
zwitterion30-Aug-06 11:38
memberzwitterion30-Aug-06 11:38 
AnswerRe: great but limited? Pin
Michael Freidgeim1-Sep-06 17:14
memberMichael Freidgeim1-Sep-06 17:14 
QuestionidGrid.firstChild.childNodes[0] has no properties Pin
bevrigy17-Aug-06 13:08
memberbevrigy17-Aug-06 13:08 
GeneralIf using a Master Page... Pin
llennox23-Jul-06 6:05
memberllennox23-Jul-06 6:05 
GeneralGreat info, thanks Pin
Hotcut19-Jul-06 1:04
memberHotcut19-Jul-06 1:04 
GeneralThis. Code. Rocks!!! Pin
mjwinberry1-May-06 17:45
membermjwinberry1-May-06 17:45 
GeneralRecord disapers when Edit is pressed Pin
coffeemkr08-Feb-06 10:43
membercoffeemkr08-Feb-06 10:43 
Generaldosn't work Pin
anat240315-Jan-06 22:50
memberanat240315-Jan-06 22:50 
AnswerRe: dosn't work Pin
Brad Vin9-Mar-06 22:28
memberBrad Vin9-Mar-06 22:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160525.2 | Last Updated 19 Dec 2005
Article Copyright 2005 by Gary Dryden
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid