در این مقاله قصد داریم قابلیت انتخاب همه رکوردهای جدول و حذف آنها را با استفاده از jQuery و Ajax در ASP.net MVC پیاده سازی کنیم. گاهی اوقات لازم است تا چند رکورد همزمان از طریق Checkbox انتخاب شوند .

در این مقاله قصد داریم قابلیت انتخاب همه رکوردهای جدول و حذف آنها را با استفاده ازjQuery  و   Ajax در  ASP.net MVC  پیاده سازی کنیم.  گاهی اوقات لازم است تا چند رکورد همزمان از طریق  Checkbox انتخاب شوند .

تصویر زیر را در نظر بگیرید. مثالی را به این صورت پیاده سازی خواهیم کرد.

همانطور که میبینید دو راه برای انتخاب رکوردها وجود دارد:

   1. ردیف ها به صورت جداگانه برای حذف انتخاب شوند.

   2. تیک زدن  Checkbox قرار داده شده در ردیف header  برای انتخاب همه ردیف ها. این Checkbox وضعیت بقیه  checkbox ها را نیز تغییر می دهد.

با یک بار انتخاب این checkbox ها و کلیک بر روی حذف، رکوردهای مورد نظر حذف خواهند شد.

به عنوان مثال از جدول  Customer  دیتابیس Northwind استفاده کرده ایم. برای استفاده از آن به یک مدل با استفاده از EF code first احتیاج داریم. کلاسCustomer  به صورت زیر خواهد بود:

public class Customers
    {
        [Key]
        [StringLength(5)]
        public string CustomerID { get; set; }

        [Required]
        [StringLength(40)]
        public string CompanyName { get; set; }

        [StringLength(30)]
        public string ContactName { get; set; }

        [StringLength(30)]
        public string ContactTitle { get; set; }

        [StringLength(60)]
        public string Address { get; set; }

        [StringLength(15)]
        public string City { get; set; }

        [StringLength(15)]
        public string Region { get; set; }

        [StringLength(10)]
        public string PostalCode { get; set; }

        [StringLength(15)]
        public string Country { get; set; }

        [StringLength(24)]
        public string Phone { get; set; }

        [StringLength(24)]
        public string Fax { get; set; }
    }

dbcontext  نیز به صورت زیر ایجاد خواهد شد.

public partial class Model1 : DbContext
    {
        public Model1()
            : base("name=Model1")
        {
        }


        public virtual DbSet<Customers> Customers { get; set; }

        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
            modelBuilder.Entity<Customers>()
                .Property(e => e.CustomerID)
                .IsFixedLength();
        }
    }

توجه داشته باشید که این Context از  Connection String دیتابیس که در  Web.config  ذخیره شده است استفاده میکند. اکنون  HomeController  را با index() و  delete() به صورت زیر ایجاد میکنیم.

public ActionResult Index()
        {
            using (Model1 db =
                   new Model1())
            {
                var query = from c in db.Customers
                            select c;
                return View(query.ToList());
            }
        }
        public ActionResult Delete(string[] customerIDs)
        {
            using (Model1 db = new Model1())
            {
                foreach (string customerID in customerIDs)
                {
                    Customers obj = db.Customers.Find(customerID);
                    db.Customers.Remove(obj);
                }
                db.SaveChanges();
                return Json(" مشتریان با موفقیت حذف شدند.");
            }
        }

کد قرار گرفته در index  همه مشتریان را از جدول  Customer  دریافت کرده و به  View برای نمایش پاس می دهد.

Delete() آرایه ای از CustomerID ها را برای حذف شدن دریافت میکند . این عمل از طریق jQuery  سمت سرویس گیرنده فراخوانی خواهد شد و در حین آن ، آرایه پاس داده خواهد شد.

اکنون  View  را ایجاد کرده و اسکریپتهای  jQuery  را به آن اضافه میکنیم. سپس کدهای زیر را در آن قرار می دهیم.

@model List<WebApplication5.Models.Customers>

@{
    ViewBag.Title = "Index";
}

<h3><a href="http://barnamenevisan.org/">مرجع تخصصی برنامه نویسان</a></h3>


<h3>لیست مشتریان</h3>
<input type="button" id="delete"
       value="حذف مشتریان انتخاب شده" />
<br /><br />
<table border="1" cellpadding="10">
    <tr>
        <th><input type="checkbox" id="checkAll"/></th>
        <th>کد مشتری</th>
        <th>نام مشتری</th>
        <th>کشور</th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                <input type="checkbox" class="checkBox"
                       value="@item.CustomerID"/>
            </td>
            <td>@item.CustomerID</td>
            <td>@item.CompanyName</td>
            <td>@item.Country</td>
        </tr>
    }
</table>
<script src="~/Scripts/jquery-1.10.2.js"></script>

CustomerID ، CompanyName و  Country  در جدول نمایش داده خواهند شد.

ردیف header شامل یک  checkbox است که  ID آن  checkAll می باشد.

هر ردیف جدول شامل یک  checkbox  است که کلاس checkbox  به آن اختصاص داده شده است. این مقدار برای CustomerID هر ردیف تنظیم شده است.

دکمه قرار گرفته در بالای جدول برای آغاز عمل delete استفاده شده است.

حالا یک بلوک  <script> اضافه کرده و کدهای زیر را در آن قرار می دهیم.

<script>
    $(document).ready(function () {

        $("#checkAll").click(function () {
            $(".checkBox").prop('checked',
                $(this).prop('checked'));
        });

        $("#delete").click(function () {
            var selectedIDs = new Array();
            $('input:checkbox.checkBox').each(function () {
                if ($(this).prop('checked')) {
                    selectedIDs.push($(this).val());
                }
            });

            var options = {};
            options.url = "/Home/Delete";
            options.type = "POST";
            options.data = JSON.stringify(selectedIDs);
            options.contentType = "application/json";
            options.dataType = "json";
            options.success = function (msg) {
                alert(msg);
            };
            options.error = function () {
                alert("در هنگام حذف رکوردها خطایی رخ داده است!");
            };
            $.ajax(options);

        });
    });

کد رویداد کلیک برای چک باکس CheckAll و دکمه delete فعال می شود. رویداد کلیک وضعیت checkbox ها را مدیریت میکند. این کار با استفاده از کلاس selector در jQuery انجام میگیرد . مقدار ویژگی  checkbox هایی که از آن کلاس استفاده میکنند جابجا خواهد شد. توجه داشته باشید که برای این کار از متد  Prop() استفاده می شود.

رویداد کلیک دکمه حذف یک آرایه متغیر را برای ذخیره  CustomerIDهای انتخاب شده تعریف میکند. سپس همه  checkbox هایی که از کلاس  CSS چک باکس استفاده میکنند را انتخاب میکند. متد each() از طریق این  checkbox  ها تکرار می شود. اگر یک  checkbox  تیک خورده باشد مقدار آن به آرایه فرستاده می شود. از این طریق تمام  CustomerID ها را درون آرایه  SelectedID دریافت خواهیم کرد. و پس از پاک شدن پیام موفقیت آمیزی از delete() نمایش داده خواهد شد.

سپس  option object  برای نگهداری تنظیمات پیکربندی  Ajax  ایجاد می شود. ویژگی url  به عمل delete() اشاره میکند و ویژگی data نسخه  json آرایه selectedID را نگهداری میکند. در آخر $.ajax() برای ایجاد فراخوانی ajax استفاده می شود.