درج داده در بانک اطلاعاتی با استفاده از کنترل GridView

در این مقاله شما نحوه درج داده در بانک اطلاعاتی با استفاده از کنترل GridView و همچنین نمایش داده های درج شده در GridView را خواهید آموخت.

راه های زیادی برای درج داده در بانک اطلاعاتی وجود دارد. در این مقاله نحوه درج داده در بانک اطلاعاتی SQL و کنترل GridView با استفاده از کنترل تکست باکس گرید ویو را خواهید آموخت. GridView کنترل مهمی برای نمایش هر رکورد بانک اطلاعاتی روی برنامه های WinForm و WebForm می باشد.

در این مثال از یک کنترل Update Panel و CSS برای طراحی GridView استفاده شده است.

حالا ما مرحله به مرحله درج داده در بانک اطلاعاتی و همچنین نمایش رکورد ثبت شده در GridView را خواهیم دید.

فایل های مربوط به بانک اطلاعاتی به صورت یک فایل اجرایی درون فایل ضمیمه موجود می باشد. کافی است فایل SqlPackager را نصب کرده تا کلیه مراحل انجام گیرد. در صورتی که می خواهید بدون فایل اجرایی و با استفاده از Script ها یا دانش خود بانک اطلاعاتی را بسازید لطفا به نام بانک و جداول و ... دقت نمایید.

مرحله 1

بانکی با نام EmployeeDBB بسازید. طبق شکل زیر یک جدول با نام EmployeeDB در آن بسازید. می توانید برای ساخت جدول از اسکریپت زیر استفاده نمایید.

create table EmployeeDB  
(  
EmpID int primary key identity(1,1),  
EmpName varchar(20),  
EmpGender varchar(10),  
EmpDOB date null,  
EmpDepartment varchar(20)  
)

Stored Procedure زیر را برای درج داده در بانک اطلاعاتی اجرا نمایید.

USE [EmployeeDBB]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
ALTER procedure [dbo].[sp_EmpDataInsert]  
@EmpName nvarchar(20),  
@EmpGender nvarchar(10),  
@EmpDOB date,  
@EmpDepartment nvarchar(20)  
as  
begin  
set nocount on;  
insert into EmployeeDB  
(EmpName,EmpGender,EmpDOB,EmpDepartment)  
values  
(@EmpName,@EmpGender,@EmpDOB,@EmpDepartment)  
End

یک پروژه از نوع Asp.net Web Application ساخته و یک WebForm با نام GridDemo به آن اضافه نمایید.

در صفحه GridDemo.aspx کدهای زیر را کپی نمایید.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridDemo.aspx.cs" Inherits="WebApplication4.GridDemo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <style>  
        body { font-size:62.5% }  
 
        #Employee {  
            font:11px Times New Roman;   
            width:auto;  
            display:block;  
            padding:10px 0 0 0;  
        }  
  
        .text {  
            width:auto;  
            padding:2px 4px;  
            font:inherit;  
            font-weight:bold;  
            text-align:left;  
            border:solid 2px #BFBFBF;  
            background:yellow;  
            text-transform:uppercase;  
        }  
              
        .Grid {  
            width:100%;   
            font:inherit;   
            margin:5px 0 10px 0;   
            background-color:#FFF;   
            border:solid 2px #525252;  
            text-transform:uppercase;  
        }  
        .Grid td {  
            font:inherit;   
            padding:2px;   
            border:solid 1px #C1C1C1;   
            color:#333;   
            text-align:center;  
        }  
        .Grid th {  
            padding:5px;   
            color:blue;   
            background:#424234 border-left:solid 3px #525233;   
            font:inherit;  
            font-weight:bold;  
        }  
              
        .Gridbutton {  
            cursor:pointer;   
            text-align:center;   
            color: white;   
            font:inherit;  
            background-color: blue;  
            border:solid 1px #3079ED;   
            -moz-border-radius:5px;   
            -webkit-border-radius:5px;   
            line-height:20px;  
        }  
    </style>  
</head>
<body>
    <form id="form1" runat="server">
   <div>  
      
    <%--GRIDVIEW CSS--%>  
     
  
</div>  
  
    <%--- Add Script Manager ----%>  
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" EnablePageMethods="true" >  
    </asp:ScriptManager>  
  
    <div id="Employee">  
        <asp:UpdatePanel runat="server" UpdateMode="Always"  >  
            <ContentTemplate>  
                <asp:GridView runat="server" ID="GridEmpData"  
                 CssClass="Grid"   
                 AutoGenerateColumns="false"   
                 ShowFooter="true" >  
                 <Columns>  
                    <asp:TemplateField HeaderText="Employee No.">  
                        <ItemTemplate><%#Eval("EmpID")%></ItemTemplate>  
                        <FooterTemplate><h4><i> INSERT NEW RECORD </i></h4></FooterTemplate>  
                    </asp:TemplateField>  
  
                    <asp:TemplateField HeaderText="Employee Name">  
                        <ItemTemplate><%#Eval("EmpName")%></ItemTemplate>  
                        <FooterTemplate><asp:TextBox runat="server" ID="txtEmpName" CssClass="text"></asp:TextBox></FooterTemplate>  
                    </asp:TemplateField>  
                   
                    <asp:TemplateField HeaderText="Gender">  
                        <ItemTemplate><%#Eval("EmpGender")%></ItemTemplate>  
                        <FooterTemplate><asp:TextBox runat="server" ID="txtEmpGender" CssClass="text"></asp:TextBox></FooterTemplate>  
                    </asp:TemplateField>  
  
                    <asp:TemplateField HeaderText="Date of Birth">  
                        <ItemTemplate><%#Eval("EmpDOB")%></ItemTemplate>  
                        <FooterTemplate><asp:TextBox runat="server" ID="txtEmpDOB" CssClass="text"></asp:TextBox></FooterTemplate>  
                    </asp:TemplateField>  
  
                    <asp:TemplateField HeaderText="Department">  
                        <ItemTemplate><%#Eval("EmpDepartment")%></ItemTemplate>  
                        <FooterTemplate><asp:TextBox runat="server" ID="txtEmpDpt" CssClass="text" ></asp:TextBox></FooterTemplate>  
                    </asp:TemplateField>  
  
                    <asp:TemplateField>  
                        <ItemTemplate></ItemTemplate>  
                        <FooterTemplate><asp:Button runat="server" ID="btnSave" Text="SAVE NEW RECORD" CssClass="Gridbutton" CommandName="Footer" onclick="btnSave_Click" /></FooterTemplate>  
                    </asp:TemplateField>  
                 </Columns>  
                   
                 <EmptyDataTemplate>  
                    <tr>  
                        <th>Employee Name</th>  
                        <th>Gender</th>  
                        <th>Date of Birth</th>  
                        <th>Department</th>  
                        <th></th>  
                    </tr> 
  
                    <tr>  
                        <td><asp:TextBox runat="server" ID="txtEmpName" CssClass="text"></asp:TextBox></td>  
                        <td><asp:TextBox runat="server" ID="txtEmpGender" CssClass="text"></asp:TextBox></td>  
                        <td><asp:TextBox runat="server" ID="txtEmpDOB" CssClass="text"></asp:TextBox></td>  
                        <td><asp:TextBox runat="server" ID="txtEmpDpt" CssClass="text" ></asp:TextBox></td>  
                        <td><asp:Button runat="server" ID="btnSave" Text="SAVE NEW RECORD" CssClass="Gridbutton" onclick="btnSave_Click" CommandName="EmptyDataTemplate" /></td>  
                    </tr>  
                                  
                 </EmptyDataTemplate>  
                  
                </asp:GridView>  
            </ContentTemplate>  
          
        </asp:UpdatePanel>  
        <asp:Label ID="lblmsg" runat="server" Text="Label" Visible="False"></asp:Label>
    </div> 
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"></asp:SqlDataSource>
    </form>
</body>
</html>

در صفحه WebConfig رشته اتصال را نسبت به کامپیوتر خود تنظیم نمایید.

    <add name="نام دلخواه" connectionString="Data Source=.;Initial Catalog=نام بانک اطلاعاتی;User ID=نام کاربری;Password=کلمه عبور" providerName="System.Data.SqlClient"/>

در صفحه GridDemo.aspx.cs کدهای زیر را کپی نمایید.

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication4
{
    public partial class GridDemo : System.Web.UI.Page
    {
        string conString = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                EmployeeDataGrid();
            } 
  
        }
        private void EmployeeDataGrid()
        {
            using (SqlConnection con = new SqlConnection(conString))
            {
                using (SqlCommand cmd = new SqlCommand("select * from EmployeeDB"))
                {
                    SqlDataAdapter dt = new SqlDataAdapter();
                    try
                    {
                        cmd.Connection = con;
                        con.Open();
                        dt.SelectCommand = cmd;

                        DataTable dTable = new DataTable();
                        dt.Fill(dTable);

                        GridEmpData.DataSource = dTable;
                        GridEmpData.DataBind();
                    }
                    catch (Exception)
                    {
                        lblmsg.Text = "record not found";
                    }
                }
            }
        }

        protected void btnSave_Click(object sender, EventArgs e)
        {
            Button btn = (Button)sender;
            GridViewRow GrdRow = (GridViewRow)btn.Parent.Parent;

            TextBox txtEmpName = (TextBox)GrdRow.Cells[0].FindControl("txtEmpName");
            TextBox txtEmpGender = (TextBox)GrdRow.Cells[0].FindControl("txtEmpGender");
            TextBox txtEmpDOB = (TextBox)GrdRow.Cells[0].FindControl("txtEmpDOB");
            TextBox txtEmpDpt = (TextBox)GrdRow.Cells[0].FindControl("txtEmpDpt");


            using (SqlConnection con = new SqlConnection(conString))
            {
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.CommandText = "sp_EmpDataInsert";

                    cmd.Connection = con;
                    con.Open();
                    cmd.Parameters.AddWithValue("@EmpName", SqlDbType.NVarChar).Value = txtEmpName.Text.Trim();
                    cmd.Parameters.AddWithValue("@EmpGender", SqlDbType.NVarChar).Value = txtEmpGender.Text.Trim();
                    cmd.Parameters.AddWithValue("@EmpDOB", SqlDbType.Date).Value = txtEmpDOB.Text.Trim();
                    cmd.Parameters.AddWithValue("@EmpDepartment", SqlDbType.NVarChar).Value = txtEmpDpt.Text;

                    cmd.ExecuteNonQuery();
                }
            }
            EmployeeDataGrid();
        }   
    }
}

در نهایت خروجی شما مانند شکل زیر می شود.