عملیات CRUD (ایجاد خواندن ویرایش حذف) با استفاده از List View در Asp.net

در این مقاله به شرح عملیات CRUD یا همان چهار عمل اصلی ایجاد خواندن ویرایش حذف به کمک کنترل List View در Asp.net می پردازیم .

تمام عملیات بر روی پایگاه داده SQL و با استفاده از Stored Procedure انجام خواهد شد.

اکنون به صورت گام به گام چهار عمل اصلی CRUD(ایجاد خواندن ویرایش حذف) را با استفاده از List View شرح خواهیم داد.

مرحله 1

ابتدا یک جدول به نام Employee data در دیتا بیس بسازید . Stored Procedure مربوط به ایجاد جدول مانند شکل زیر می باشد.

    Create Table EmployeeData  
    (  
       EmpID int identity (1,1) Primary Key,  
       EmpName varchar(30),  
       Contact nchar(15),  
       EmailId nvarchar(50)  
    )

مرحله 2

وارد محیط Visual Studio شده و یک پروژه جدید از نوع Web Form ایجاد کنید.

در Solution Explorer بر روی پروژه کلیک راست کرده و add=> new Item را انتخاب کنید.

Web form را انتخاب کرده و نامی به صفحه UI خود بدهید.

Add Web Form

شکل 1: افزودن وب فرم

در قسمت Design صفحه خود تعدادی کنترل مانند دکمه Text Box و البته List View قرار می دهیم. List View را یه این جهت بر روی فرم قرار می دهیم که اطلاعات موجود در جدولی که در دیتا بیس ایجاد کرده ایم را در ان نمایش دهیم و اقدام به حذف یا ویرایش آنها نماییم .

در ادامه کدهای مربوط به Design صفحه UI قرار داده شده است

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body dir="rtl">
    <form id="form1" runat="server">
        <div>
                <div>
                    <fieldset style="width: 300px">
                        <legend>مثال لیست ویو</legend>
                        <asp:Table runat="server">
                            <asp:TableRow>
                                <asp:TableCell>نام </asp:TableCell><asp:TableCell>
                                    <asp:TextBox runat="server" ID="txtName"></asp:TextBox></asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow>
                                <asp:TableCell>شماره تماس</asp:TableCell><asp:TableCell>
                                    <asp:TextBox runat="server" ID="txtContact"></asp:TextBox></asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow>
                                <asp:TableCell>ایمیل</asp:TableCell><asp:TableCell>
                                    <asp:TextBox runat="server" ID="txtEmail"></asp:TextBox></asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow>
                                <asp:TableCell>&nbsp</asp:TableCell>
                                <asp:TableCell>
                                    <asp:Button runat="server" ID="btnSave" Text="ذخیره" OnClick="btnSave_Click" />
                                    <asp:Button runat="server" ID="btnUpdate" Text="به روز رسانی" OnClick="btnUpdate_Click" />
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </fieldset>
                </div>

                <asp:HiddenField ID="hfRecord" runat="server" />

                <h3>Employee Information</h3>

                <asp:ListView ID="ListEmployee" runat="server" OnItemCommand="ListEmployee_ItemCommand" DataKeyNames="EmpID">
                    <ItemTemplate>
                        <table>
                            <tr>
                                <td style="width: 100px">
                                    <b>شماره. :</b>
                                    <%#Eval("EmpID") %>  
                                </td>
                                <td style="width: 200px">
                                    <b>نام :</b>
                                    <%#Eval("EmpName") %>  
                                </td>
                                <td style="width: 200px">
                                    <b>شماره تماس :</b>
                                    <%#Eval("Contact") %>  
                                </td>
                                <td style="width: 300px">
                                    <b>ایمیل :</b>
                                    <%#Eval("EmailId") %>  
                                </td>
                                <td>
                                    <asp:Button ID="btndel" runat="server" Text="حذف" ToolTip="Delete a record" OnClientClick="javascript:return confirm('Are you sure to delete record?')" CommandName="EmpDelete" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "EmpID") %>' />
                                    <asp:Button ID="btnupdt" runat="server" Text="ویرایش " ToolTip="Update a record" CommandName="EmpEdit" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "EmpID") %>' />
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:ListView>
           


        </div>
    </form>
</body>
</html>

مرحله 3

دوباره به دیتابیس برگردید .و پروسیجر های مربوط به insert,delete, update, select در قسمت Programability => Stored Procedure بنویسد .

در شکل های زیر کد مربوط به هر کدام از عملیات آورده شده است .

//پرو سیجر Select برای List View

    create procedure sp_FillData  
    As  
       Begin  
       set nocount on;  
       select EmpID, EmpName, Contact, EmailID from EmployeeData  
    End

// پروسیجر درج

create procedure sp_InsertEmployeeData  
   @EmpName varchar(30),  
   @Contact nchar(15),  
   @EmailId nvarchar(50)  
As  
   Begin  
   set nocount on;  
   Insert into dbo.EmployeeData   
      (EmpName,Contact,EmailId)  
   values  
      (@EmpName,@Contact,@EmailId)  
End

//پروسیجر حذف

    Create procedure sp_DeleteEmployeeData  
       @EmpID int  
    As  
       Begin  
       set nocount on;  
       Delete from EmployeeData where EmpID=@EmpID  
    End

// پروسیجر Select

    create procedure sp_SelectEmployeeData  
       @EmpID int  
    As  
       Begin  
       set nocount on;  
       select EmpID, EmpName, Contact, EmailID from EmployeeData where EmpID=@EmpID  
    End

// پروسیجر ویراش

    Create procedure sp_UpdateEmployeeData  
       @EmpID int,  
       @EmpName varchar(30),  
       @Contact nchar(15),  
       @EmailId nvarchar(50)  
    As  
       Begin  
       set nocount off;  
       UPDATE Employeedata SET EmpName=@EmpName,Contact=@Contact,EmailId=@EmailId WHERE EmpID=@EmpID  
    End

مرحله 4

تنظیم Connection String

در Solution Explorer واردWeb.config شده و کد مربوط به Connection String را مانند شکل زیر وارد کنید

    <connectionStrings>  
       <add name="connstr" connectionString="Data Source=RAKESH-PC;Initial Catalog=SqlServerTech;User ID=sa;Password=password" providerName="System.Data.SqlClient"/>  
    </connectionStrings>

مرحله 5

در این مرحله کدهای مربوط به چهار عمل اصلی را در قسمت Code Behind صفحه یا همان بخش .cs صفحه می نویسیم .

ابتدا در Page Load کد های مربوط به نمایش اطلاعات جدول Employee data در داخل List View آورده شده است .

سپس در قسمت btnSave_Click کدهایی برای ذخیره کردن اطلاعات در جدول نوشته شده است .توسط این کدها اطلاعاتی که کاربر در Text Box ها وارد می کند در جدول Employee data ذخیره می شود.

در قسمت btnUpdate_Click کدهای برای به روز رسانی اطلاعات جدول وجود دارد

بر پنجره Properties مربوط به List View در قسمت event بر روی رویداد ItemCommand دو بار کلیک کنید تا Handler مربوط به این Event ایجاد شود .در این قسمت با توجه به مقدار command name که برای هر کدام از دکمه های Edit و Delete کدهای مربوط به ویرایش و حذف اطلاعات List View گنجانده شده است.

    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
    using System.Configuration;  
    using System.Data;  
    using System.Data.SqlClient;  
      
    public partial class UI_ListView : System.Web.UI.Page  
    {  
        string connection = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            if (!IsPostBack)  
            {  
                GetEmployeeDetail();  
            }  
        }  
        void GetEmployeeDetail()  
        {  
            SqlConnection con = new SqlConnection(connection);  
      
            SqlCommand cmd = new SqlCommand("sp_FillData", con);  
            cmd.CommandType = CommandType.StoredProcedure;  
      
            con.Open();  
            ListEmployee.DataSource = cmd.ExecuteReader();  
            ListEmployee.DataBind();  
        }  
        protected void btnSave_Click(object sender, EventArgs e)  
        {  
            using (SqlConnection con = new SqlConnection(connection))  
            {  
                using (SqlCommand cmd = new SqlCommand("sp_InsertEmployeeData", con))  
                {  
                    cmd.CommandType = CommandType.StoredProcedure;  
                    con.Open();  
                    cmd.Parameters.AddWithValue("@EmpName", SqlDbType.VarChar).Value = txtName.Text.Trim();  
                    cmd.Parameters.AddWithValue("@Contact", SqlDbType.NChar).Value = txtContact.Text.Trim();  
                    cmd.Parameters.AddWithValue("@EmailId", SqlDbType.NVarChar).Value = txtEmail.Text.Trim();  
                    cmd.ExecuteNonQuery();  
                    con.Close();  
      
                    txtName.Text = String.Empty;  
                    txtContact.Text = String.Empty;  
                    txtEmail.Text = String.Empty;  
                }  
            }  
            GetEmployeeDetail();  
        }  
        protected void btnUpdate_Click(object sender, EventArgs e)  
        {  
            SqlConnection con = new SqlConnection(connection);  
            SqlCommand cmd = new SqlCommand("sp_UpdateEmployeeData", con);  
            cmd.CommandType = CommandType.StoredProcedure;  
      
            cmd.Parameters.AddWithValue("@EmpID", Convert.ToInt32(hfRecord.Value));  
            cmd.Parameters.AddWithValue("@EmpName", SqlDbType.VarChar).Value = txtName.Text.Trim();  
            cmd.Parameters.AddWithValue("@Contact", SqlDbType.NChar).Value = txtContact.Text.Trim();  
            cmd.Parameters.AddWithValue("@EmailId", SqlDbType.NVarChar).Value = txtEmail.Text.Trim();  
      
            con.Open();  
            cmd.ExecuteNonQuery();  
            con.Close();  
      
            GetEmployeeDetail();  
      
            btnSave.Visible = true;  
            btnUpdate.Visible = false;  
      
            hfRecord.Value = string.Empty;  
            txtName.Text = String.Empty;  
            txtContact.Text = String.Empty;  
            txtEmail.Text = String.Empty;  
        }  
        protected void ListEmployee_ItemCommand(object sender, ListViewCommandEventArgs e)  
        {  
            switch (e.CommandName)  
            {  
                case ("EmpDelete"):  
                    int EmpID = Convert.ToInt32(e.CommandArgument);  
                    deleteEmployee(EmpID);  
                    break;  
                case ("EmpEdit"):  
                    EmpID = Convert.ToInt32(e.CommandArgument);  
                    UpdateEmployeeDetail(EmpID);  
                    break;  
            }  
        }  
       void deleteEmployee(int EmpID)  
        {  
            SqlConnection con = new SqlConnection(connection);  
            SqlCommand cmd = new SqlCommand("sp_DeleteEmployeeData", con);  
            cmd.CommandType = CommandType.StoredProcedure;  
      
            cmd.Parameters.AddWithValue("@EmpID", EmpID);  
            con.Open();  
            cmd.ExecuteNonQuery();  
            con.Close();  
            GetEmployeeDetail();  
       }  
        void UpdateEmployeeDetail(int EmpID)  
        {  
            SqlConnection con = new SqlConnection(connection);  
            SqlCommand cmd = new SqlCommand("sp_SelectEmployeeData", con);  
            cmd.CommandType = CommandType.StoredProcedure;  
            cmd.Parameters.AddWithValue("@EmpID", EmpID);  
      
            con.Open();  
            SqlDataReader dr = cmd.ExecuteReader();  
            if (dr.HasRows)  
            {  
                dr.Read();  
                hfRecord.Value = dr["EmpID"].ToString();  
                txtName.Text = dr["EmpName"].ToString();  
                txtContact.Text = dr["Contact"].ToString();  
                txtEmail.Text = dr["EmailId"].ToString();  
            }  
            dr.Dispose();  
      
            con.Close();  
            btnSave.Visible = false;  
            btnUpdate.Visible = true;  
            GetEmployeeDetail();  
        }  
      
    }

مرحله 6

با فشردن دکمه های Ctrl+F5 پروژه را اجرا کنید .