چه تکنولوژی می‌خواهید یاد بگیرید؟

نظرات و انتقادات خود را با ما در میان بگذارید

آپدیت روزانه

بیش از 1500 مطلب آموزشی

نیازهای روز

ایجاد DropDownListهای مرتبط در ASP.Net MVC

ادامه این پست با نحوه پر کردن مقدار یک DropDownList با استفاده از DropDownList دیگر خواهیم پرداخت. احتمالا با مثال DropDownList استان و شهرستان برخورد نموده‌اید، لازم است بعد از انتخاب استان مقادیر DropDownList شهرستان بر اساس استان انتخاب شده مقدار دهی شود. در این مقاله با استفاده از متد get از کتابخانه jQuery به صورت داینامیک برای کل پروژه مثالی پیاده سازی خواهیم کرد تا دیگر نیاز به تعریف متد به منظور وارد نمودن اطلاعات در کنترلر DropDownListهای مرتبط نباشید.

دیاگرام استان و شهرستان

کاربران با انتخاب استان یک درخواست با استفاده از متد get  از کتابخانه jQuery به سرور ارسال می‌کنند، لیست از شهرستان‌های که فیلد Province_Id آن‌ها با مقدار ارسالی از سمت کاربر برابر باشد برگردانده خواهد شد، این لیست بر اساس نام شهرستان فیلتر شده و به صورت Json برای مرورگر برگردانده می‌شود و در نهایت کاربر لیست شهرستان‌های مرتبط با استان را مشاهده خواهد کرد.

مدل استان و شهرستان:

مدل کلاس استان به صورت زیر تعریف نموده‌ایم:

using System;
using System.Collections.Generic;

namespace Fill_Drop_Down_list.Models
{
    public static class Province
    {
        public int Id { get; set; }
        
        public string Name { get; set; }
        
        public ICollection<City> City { get; set; }
    }
}

مدل کلاس شهرستان:

using System;
using System.ComponentModel.DataAnnotations.Schema;

namespace Fill_Drop_Down_list.Models
{
    public static class City
    {
        public int Id { get; set; }
        
        public string Name { get; set; }
        
        public int Province_Id { get; set; }
        
        public Province Province{ get; set; }
    }
}

کنترلر جدید تعریف و متدی به منظور نمایش صفحه ایجاد نماید:

using System;
using System.Web.Mvc;

namespace Fill_Drop_Down_list.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
    }
}

مدل زیر به عنوان دیتابیس استفاده می‌شود:

using System;
using System.Collections.Generic;

namespace Fill_Drop_Down_list.Models
{
    /// <summary>
    /// دیتابیس
    /// </summary>
    public static class Database
    {
        /// <summary>
        /// لیست استان‌ها
        /// </summary>
        /// <returns></returns>
        public static IEnumerable<Province> GetProvince()
        {
            return new List<Province>()
            {
                new Province() {Id = 1, Name = "کردستان"}
                 , new Province() {Id = 2, Name = "تهران"}
                  , new Province() { Id = 3, Name = "فارس"}
            };
        }
        /// <summary>
        /// لیست شهرستان‌ها
        /// </summary>
        /// <returns></returns>
        public static IEnumerable<City> FindCity()
        {
            return new List<City>()
            {
                new City() {Id = 1, Name = "سنندج", Province_Id = 1}
                 , new City() {Id = 2, Name = "مریوان", Province_Id = 1}
                  , new City() {Id = 3, Name = "رباط کریم", Province_Id = 2}
                   , new City() {Id = 4, Name = "مرودشت", Province_Id = 3}
            };
        }
    }
}

نخست لیست استان‌ها به کاربر نمایش خواهیم داد:

/// <summary>
/// 
/// </summary>
/// <returns></returns>
// GET: Home
public ActionResult Index()
{
     ViewBag.Province = new SelectList(Database.GetProvince(), "Id", "Name");
     return View();
}

کد HTML :

<div class="form-group">
    @Html.DropDownList("province", (SelectList)ViewBag.Province, "انتخاب استان", new { @class = "form-control" })
</div>

نتیجه خروجی دستور بالا:

نتیجه خروجی مدل استان

 

پیاده سازی Dropdownlist شهرستان:

 کد HTML اکشن متد Index به کد زیر تغییر خواهد کرد:

<div class="form-group">
@Html.DropDownList("province", (SelectList)ViewBag.Province, "انتخاب استان", new { @class = "form-control", initilize_dropdown = "/Home/City", drop = "#city" })
</div>
<div class="form-group">
    <select class="form-control" id="city"></select>
</div>

 پیاده سازی متد داینامیک برای پر کردن مقدار Dropdownlist زیر مجموعه یک Dropdownlist دیگر. تنها کافیست این متد در فایل JS تعریف شود و در هر جای صفحه که لازم باشد آن را فراخوانی نمود:

$('[initilize-dropdown]').change(function () {
   var id = $(this).val();
   var model = $(this).attr('initilize-dropdown');
   var fill_dropdown = $(this).attr('drop');
   $(fill_dropdown).empty();
   $.get(model, { 'id': id }, function (data) {
        $.each(data, function (index, value) {
          $(fill_dropdown).append(new Option(value.Name, value.Id));
        });
   });
});

 موردی که لازم است رعایت شود: اضافه نمودن پراپرتی initilize-dropdown و drop به Dropdownlist والد. مقدار initilize-dropdown، مسیر اکشن متدی می‌باشد که قرار است Dropdownlist بر اساس آن مقدار دهی شود.

/// <summary>
/// 
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public ActionResult City(int id)
{
    return Json(Database.FindCity().Where(x => x.Province_Id == id), JsonRequestBehavior.AllowGet);
}

خروجی:

خروجی نهایی

 

برای دانلود سورس مثال این پستاینجا کلیک کنید.

امید نصری

0 نظر:

تعداد دیدگاه‌های کاربران : 0 دیدگاه
مهمان گرامی! برای ارسال نظر نیاز است وارد سایت شوید.


You must log on to comment.