نحوه انتخاب چند مقدار به صورت CheckBox در MVC

جمعه 10 مهر 1394

در این مقاله قصد داریم به توضیحی در باره پیدا سازی چک باکس و همچنین انتخاب چند آیتم به صورت چک باکسی در تکنولوژی MVC بپردازیم

نحوه انتخاب چند مقدار به صورت   CheckBox در MVC

در این آموزش قصد داریم به طریقه استفاده از CheckBox در MVC  بپردازیم

دستور کار:

در این مقاله ما از روش Code First  استفاده میکنیم  ابتدا یک  جدول به نام Roles  برای نگهداری نقش ها و جدول به نام Users  برای نگهداری کاربران و یک جدول واسط   به نام User-Role  که حاوی Id  های جدول های مذکور هستند را انتخاب میکنیم

جدول Role:

  public class Roles
    {[Key]
        public int RoleID { get; set; }
        [Display(Name = "نقش سیستم ")]
        public string RoleName { get; set; }

        public List<Users_Roles> UsersRoleses { get; set; }
    }

 

جدول Users:

    public class Users
    {
        [Key]
        public int UserID { get; set; }

        [Display(Name = "نام کاربر ")]
        public string Name { get; set; }

        public List<Users_Roles> UsersRoleses { get; set; }
    }

 

جدول User-Roles

  public class Users_Roles
    {
        [Key]
        public int U_RID { get; set; }
        public int RoleID { get; set; }
        public int UserID { get; set; }

        public Roles Roles { get; set; }
        public Users Users { get; set; }
    }

همان طور که از تصویر معلوم است روی  Controller. راست کلیک کرده وAddرا میزنیم و     یک  کنترلر.  ،از نوع roles از جنس کلاس   Controller with views, using Entity Framework MVC 5   ایجاد میکنیم.

 

 

حال از برنامه اجرا گرفته و تعدادی رکود ثیت کنید

 و برای ما بقی کلاس ها هم همانند بالا کنترلر را میسازیم

حال  ما قصد داریم اطلاعاتی که در جدول Role ثبت کردیم به صورت چک باکس در صفحه افزودن کاربر اضافه شوند و کابر با انتخاب هر آیتم ، آیتم انتخاب شده در جدول واسط  ، User-Role  ثیت شود برای این کار کافی است از ViewModel   زیر که حاوی فیلد های جدول User  و یک کلاس دیگر حاوی مقادیر ارسال شده به کنترلر میباشند

 public class UserViewmodel
    {
        [Key]
        public int UserID { get; set; }

        [Display(Name = "نام کاربر ")]
        public string Name { get; set; }
        public List<Roles> AvaliableRoless { get; set; }

        public List<Roles> SelectedRoles { get; set; }

        public PostedRoles PostedRoles { get; set; }

    }

    public class PostedRoles
    {
        public string[] RoleIDs { get; set; }//کلاسی که مقادیر ارسال شده را به کنترلر میفرستد 
    }
}

 

حال برای استفاده  از checkBox کافی است روی پروژه راست کلیک کرده و درMVC CheckBox List  >  add>Nuget  را به پروژه اضافه کنید

 

 

حال بایستی تغیراتی در View > Create>User  انجام بدهیم ابتدا مدل را از نوع Userبه UserView مدل تغیر میدهیم

@model CheckBox__DB.Models.UserViewmodel

 

سپس برای استفاده از چک باکس از Helper  ، CheckBox استفاده میکنیم

<div class="form-group">
            <label>نقش ها </label>
            <div class="col-md-10">
              @Html.CheckBoxListFor(model => model.PostedRoles.RoleIDs,
                                 model => model.AvaliableRoless,
                                 m => m.RoleID,
                                 person => person.RoleName,
                                 model => model.SelectedRoles,
                                 Position.Horizontal)
            </div>
        </div>

 

حال برای آن که اطلاعات جدول Role  به صورت چک باکسی  به نمایش در  آید در کنترلر User قسمت  Create از نوع get کد های زیر را مینویسیم

 public ActionResult Create()
        {
            return View(new UserViewmodel()
            {
                AvaliableRoless  = db.Roles.ToList(),
                SelectedRoles = new List<Roles>()
            });
        }

 

,ودر انتها برای ثیت  ایتم های  انتخاب شده در  متد Create  از نوع post  تغیرات زیر را اعمال میکینم

   public ActionResult Create(UserViewmodel users)
        {
            if (ModelState.IsValid)
            {
                Users u= new Users()
                {
                    Name = users.Name
                };
                db.Users.Add(u);
                foreach (string item in users.PostedRoles.RoleIDs)//ایتم های که انتخاب کردیم را می اورد 
                {
                    db.Users_Roles.Add(new Users_Roles()
                    {
                        UserID = u.UserID,
                        RoleID = int.Parse(item)
                    });

                }
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(users);
        }

 

حال از برنامه اجرا بگیرید

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

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید