Pages

Wednesday 8 August 2012

How to insert new record into database using Gridview?

In this example, I am describing you how to insert a new record record using gridview. Here I have taken a gridview showing an Employee's Details and using that gridview we can insert new record also.
Step-1: Add a page to your solution. In my case, i have named it GridView.aspx.
Step-2: Place a gridview inside the page.
Step-3: Modify the gridview and add following templates to your gridview.
My Gridivew after adding templates:
Source Code:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" ShowFooter="True"
            OnRowCommand="GridView1_RowCommand" ShowHeaderWhenEmpty="true">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        EMPLOYEE NAME</HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lblName" runat="server" Text='<%#Bind("EmpName") %>'></asp:Label></ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtName" runat="server"></asp:TextBox></FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        GENDER</HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lblGender" runat="server" Text='<%#Bind("Gender") %>'></asp:Label></ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtGender" runat="server"></asp:TextBox></FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        ADDRESS</HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lblAddress" runat="server" Text='<%#Bind("EmpAddress") %>'></asp:Label></ItemTemplate>
                    <FooterTemplate>
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        IS ACTIVE</HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lblIsActive" runat="server" Text='<%#Bind("IsActive") %>'></asp:Label></ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtIsActive" runat="server"></asp:TextBox></FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        INSERT</HeaderTemplate>
                    <FooterTemplate>
                        <asp:Button ID="btnInsert" runat="server" Text="Insert" CommandName="Insert" />
                    </FooterTemplate>
                </asp:TemplateField>
            </Columns>
            <EmptyDataTemplate>
                <tr>
                    <td>
                        <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                    </td>
                    <td>
                        <asp:TextBox ID="txtGender" runat="server"></asp:TextBox>
                    </td>
                    <td>
                        <asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>
                    </td>
                    <td>
                        <asp:TextBox ID="txtIsActive" runat="server"></asp:TextBox>
                    </td>
                    <td>
                        <asp:Button ID="btnInsert" runat="server" Text="Insert" CommandName="Insert" />
                    </td>
                </tr>
            </EmptyDataTemplate>
        </asp:GridView>



Design View:

Step-4: After that, create a table in database("Employee" in my case) which will store details of all employees.

Step-5: Write a method to fill the grid with employee details and call the method on Page_Load.

SqlConnection con = new SqlConnection(“-----Your Connection String-----“);
    SqlCommand com;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            FillGrid();
        }
    }

    public void FillGrid()
    {
        com = new SqlCommand("select * from Employee", con);
        DataTable dt = new DataTable();
        SqlDataAdapter da = new SqlDataAdapter(com);
        da.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
Now, debug the page. As currently we don't have any record in the Employee Table, the controls placed inside EmptyDataTemplate will be shown in the output.



Step-6: Now, write your own lines in the gridview's RowCommand for inserting record to database.

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "Insert")
        {
            GridViewRow gr = (GridViewRow)((Button)e.CommandSource).NamingContainer;
            TextBox name = gr.FindControl("txtName") as TextBox;
            TextBox Gender = gr.FindControl("txtGender") as TextBox;
            TextBox Address = gr.FindControl("txtAddress") as TextBox;
            TextBox IsActive = gr.FindControl("txtIsActive") as TextBox;
            SqlCommand com = new SqlCommand("insert into Employee  
values(@name,@Gender,@Address,@IsActive)", con);
            com.Parameters.AddWithValue("@name", name.Text);
            com.Parameters.AddWithValue("@Gender", Gender.Text);
            com.Parameters.AddWithValue("@Address", Address.Text);
            com.Parameters.AddWithValue("@IsActive", IsActive.Text);
            con.Open();
            com.ExecuteNonQuery();
            con.Close();
            FillGrid(); //-- I have called the fillgrid method to refill the grid after             
                                                       inserting new record.
        }
    }
Step-7: Debug the page,enter your desired value and click the "Insert" button.
Then, the values will be inserted into database and the gridview will be refreshed showing the newly inserted record.
"Employee" Table after inserting new record:

Gridview after inserting new record(it will be refreshed/ refilled):



Regards,
Prajanuranjan....

No comments:

Post a Comment

Total Pageviews