حذف و اضافه کردن سطرهای جدول HTML به صورت پویا در ASP.Net

در این مقاله نشان خواهیم داد که چگونه در زمان اجرا بتوانیم در یک جدول HTML سطرهای جدول را اضافه یا حذف کنیم و تمام اطلاعات سطرها در بانک اطلاعاتی ذخیره شوند. برای انجام این کار از jQuery و Ajax استفاده خواهیم کرد.

حذف و اضافه کردن سطرهای جدول HTML به صورت پویا در ASP.Net

مزایای استفاده از جدول HTML

1- جداول HTML نسبت به کنترل GridView سبک تر هستند.

2- در سمت کلاینت می توانیم با استفاده از jQuery سطرها را حذف و اضافه کنیم.

ایجاد برنامه

مرحله 1: ایجاد جدول در بانک

ساختار جدول برنامه را مانند تصویر زیر ایجاد می کنیم.

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

CREATE TABLE [dbo].[Employee01](
	[ID] [int] IDENTITY(1,1) NOT NULL,
	[F_Name] [nvarchar](50) NULL,
	[L_Name] [nvarchar](50) NULL,
	[Email_ID] [nvarchar](50) NULL,
	[Created_Date] [datetime] NOT NULL
)
ALTER TABLE [dbo].[Employee01] ADD  CONSTRAINT [DF_Employee01_Created_Date]  DEFAULT (getdate()) FOR [Created_Date]

 

مرحله 2: ایجاد صفحه ASPX

ما در برنامه برای بهتر شدن ظاهر  از bootstrap استفاده می کنیم. ولی می توان از هر فایل CSS دلخواه برای طراحی ظاهر صفحه استفاده کرد.

<head runat="server">
    <title>Demo</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server" dir="rtl">
        <div class="container">
            <h2>جدول پایه</h2>
            <table class="table" id="maintable">
                <thead>
                    <tr>
                        <th>نام</th>
                        <th>نام خانوادگی</th>
                        <th>ایمیل</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="data-contact-person">
                        <td>
                            <input type="text" name="f-name" class="form-control f-name01" /></td>
                        <td>
                            <input type="text" name="l-name" class="form-control l-name01" /></td>
                        <td>
                            <input type="text" name="email" class="form-control email01" /></td>
                        <td>
                            <button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">افزودن</button>
                        </td>
                    </tr>
                </tbody>
            </table>

            <%--<asp:Button ID="btnSubmit" class="btn btn-primary btn-md pull-right btn-sm col-md-4 text-center" runat="server" Text="Submit" />--%>
            <button type="button" id="btnSubmit" class="btn btn-primary btn-md pull-right btn-sm">ارسال</button>
        </div>
    </form>
</body>

 

بعد از اضافه کردن این کدها، فرم به صورت زیر درخواهد آمد.

مرحله 3: اضافه کردن کنترل با استفاده از jquery

<script type="text/javascript">  
    $(document).ready(function () {  
        $(document).on("click", ".classAdd", function () { //
            var rowCount = $('.data-contact-person').length + 1;  
            var contactdiv = '<tr class="data-contact-person">' +  
                '<td><input type="text" name="f-name' + rowCount + '" class="form-control f-name01" /></td>' +  
                '<td><input type="text" name="l-name' + rowCount + '" class="form-control l-name01" /></td>' +  
                '<td><input type="text" name="email' + rowCount + '" class="form-control email01" /></td>' +  
                '<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +  
                '<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +  
                '</tr>';  
            $('#maintable').append(contactdiv); // Adding these controls to Main table class  
        });  
    });  
</script>  

 

کنترل add را در رویداد کلیک دکمه "افزودن" با کلاسی با نام classAdd اضافه شده است.

در اینجا با کلاس data-contact-person یک tr جدید اضافه می کنیم.

در آخر این را به جدولمان با Id به نام mintable اضافه می کنیم.

همچنین یک کلید جدید برای حذف آن سطر خاص قرار خواهد گرفت و نمی توانیم اولین سطر آن را پاک کنیم.

نکته: نمی توان کنترل add را بر اساس Id دکمه بنویسید زیرا در هر اضافه شدن متفاوت می باشد.

مرحله 4:

حذف یک سطر خاص

$(document).on("click", ".deleteContact", function () {  
            $(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls   
});

 

هرزمان که یک سطر جدید با tr اضافه کنیم، آن را با استفاده از ()closet در دکمه "حذف" با کلاسی با نام deleteContact می توانیم حذف کنیم.

  بعد از انجام این مراحل، صفحه ما بصورت زیر خواهد شد.

 

مرحله 5: ذخیره کردن تمام سطرها در بانک اطلاعاتی

در ابتدا نیاز داریم که کلاس Employee را ایجاد کنیم.

public class Employee
{
    public string FName { get;set;}
    public string LName { get; set; }
    public string EmailId { get; set; }
    public DateTime CreatedDate { get; set; }
}

 

سپس برای فراخوانی Ajax برای دکمه "ارسال" نیاز به نوشتن وب متد می باشد. کدهای زیر برای ذخیره اطلاعات درون بانک می باشند.

public static string Constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;  
[WebMethod]    
public static string SaveData(string empdata)//WebMethod to Save the data  
{    
    var serializeData = JsonConvert.DeserializeObject<List<Employee>>(empdata);    
    using (var con = new SqlConnection(Constr))    
    {    
        foreach (var data in serializeData)    
        {    
            using (var cmd = new SqlCommand("INSERT INTO Employee01 VALUES(@Fname, @Lname,@Email,@CreatedDate)"))    
            {    
                cmd.CommandType = CommandType.Text;    
                cmd.Parameters.AddWithValue("@Fname", data.FName);    
                cmd.Parameters.AddWithValue("@Lname", data.LName);    
                cmd.Parameters.AddWithValue("@Email", data.EmailId);    
                cmd.Parameters.AddWithValue("@CreatedDate", DateTime.Now);    
                cmd.Connection = con;    
                if (con.State == ConnectionState.Closed)    
                {    
                    con.Open();    
                }    
                cmd.ExecuteNonQuery();    
                con.Close();    
            }    
        }    
    }    
    return null;    
}

 

اکنون برای فراخوانی متد نیاز به ایجاد Ajax می باشد.

function getAllEmpData() {
            var data = [];
            $('tr.data-contact-person').each(function () {
                var firstName = $(this).find('.f-name01').val();
                var lastName = $(this).find('.l-name01').val();
                var emailId = $(this).find('.email01').val();
                var alldata = {
                    'FName': firstName,
                    'LName': lastName,
                    'EmailId': emailId
                }
                data.push(alldata);
            });
            console.log(data);
            return data;
        }

        $("#btnSubmit").click(function () {
            var data = JSON.stringify(getAllEmpData());
            //console.log(data);
            $.ajax({
                url: 'Home.aspx/SaveData',
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify({ 'empdata': data }),
                success: function () {
                    alert("داده ها با موفقیت ذخیره شدند");
                },
                error: function () {
                    alert("خطا در ورود داده");
                }
            });

 

همانطور که میبینید، Id دکمه "ارسال" btnsubmit است. Home.aspx صفحه ما و savaData متد ما می باشد.

همینطور، فایل Newtonesoft.Json.dll را از قسمت Nuget Package manager برای بدست آوردن اطلاعات در فرمت JSON و deserialize کردن آنها در وب متد در صفحه CS اضافه نموده ایم.

var serializeData = JsonConvert.DeserializeObject<List<Employee>>(empdata);  

تعریف connection string در فایل web.config

<connectionStrings>  
   <add name="constr" connectionString="Data Source=(local);Initial Catalog=UsersDB;User id = ; password=*********" />  
 </connectionStrings>  

بعد از انجام این مراحل خواهید دید که اطلاعات درون جدول در بانک اطلاعاتی ذخیره خواهند شد.

 

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

 

فایل های ضمیمه