ساخت dropdown آبشاری با استفاده از HtmlHelper - asp-mvc

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


دوشنبه 29 مرداد
MVC

ساخت dropdown آبشاری با استفاده از HtmlHelper

شنبه, 11 آذر 1396

چند روش واسه ساختن دراپ داون یا همون کمبو باکس آبشاری هست اولش بگم منظور همون استان و شهر هست که استان انتخاب کرد شهرهای اون استان توی دراپ داون دومی باشه یه روشش که راحته اما پرفورمنس نداره که هر بار دراپ داون استان تقییر کرد بریم در خواست ایجکس بزنیم و شهر های اون با یه پارشیال ویو توی پیجمون لود کنیم یا روش دیگه که اکثر سایت ها استفاده می کنند شهرها رو می ریزن توی یه آرایه جاوا اسکریپتی که اگه id استان از بانک بیاد مشکلات خاص خودش داره.
اما من می خوام id استان توی option های خود شهر نگه دارم و با جاوا اسکریپت هر استانی انتخاب شد اون option هایی که مقدار id استانشون برابر id انتخاب نمایش بدم و بقیه رو مخفی کنم البته دراپ داون خودمون با کمک HtmlHelper می سازیم که با یه تیر دو نشون بزنیم
. laugh

ابتدا لیست همه استان ها و شهر ها در کنترلر می ریزیم توی یه ویو بگ فقط شهر ها رو از نوع یه ویو مدل می ریزیم که id استانش هم داشته باشه.

 

ViewBag.States = new SelectList(_db.States, "StateId", "StateName");

 ViewBag.cities = _db.cities.Select(p => new CascadingDropdownViewModel
{
  Id=p.cityId,
  Title = p.CityName,
  ForeignKeyId = p.StateId
}).ToList();

این کدها رو توی اکشنی که می خوایم می ذاریم کد کلاس CascadingDropdownViewModel در ادامه می ذارم

    public class CascadingDropdownViewModel
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public int ForeignKeyId { get; set; }
    }

خوب حالا توی پروژه تون یه فولدر بسازید به اسم Helpers و یه کلاس داخلش بسازید ما توی این کلاس می خوایم یه HtmlHelper بسازیم که دراپ داون شهرمون واسمون بسازه واسه اینکار باید از Extension method ها استفاده کنیم همون طور که می دونید کلاس و متدمون باید static باشن و قبل ورودیمون this بذاریم ما توی ورودی مون اسم ویو بگ می گیریم و دراپ داون مون می سازیم

    public static class DropdownExtensions
    {
        public static MvcHtmlString CascadingDropdown(this HtmlHelper helper, string name)
        {
            var obj = helper.ViewData.Eval(name);
            var modeList = (List<CascadingDropdownViewModel>)obj;
            var htmlDropdownList = $"<select id=\"{name}\" name=\"{name}\" ><option value=\"\"></option>";
            htmlDropdownList = modeList.Aggregate(htmlDropdownList,
                (current, model) => current +
                ("<option value=\"" + model.Id + "\" data-ForeignKeyId = \"" + model.ForeignKeyId + "\" > " + model.Title + "</option>"));
            htmlDropdownList += "</select>";
            return MvcHtmlString.Create(htmlDropdownList);
        }
        public static MvcHtmlString CascadingDropdown(this HtmlHelper helper, string name, object htmlAttributes)
        {
            var attr = (IDictionary<string, object>) HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
            var obj = helper.ViewData.Eval(name);
            var modeList = (List<CascadingDropdownViewModel>)obj;
            var htmlDropdownList = $"<select id=\"{name}\" name=\"{name}\" ";
            htmlDropdownList = attr.Aggregate(htmlDropdownList, (current, o) => current + (o.Key + "=\"" + o.Value + "\" "));
            htmlDropdownList += "><option value=\"\"></option>";
            htmlDropdownList = modeList.Aggregate(htmlDropdownList,
                (current, model) => current +
                                    ("<option value=\"" + model.Id + "\" data-ForeignKeyId = \"" + model.ForeignKeyId + "\" > " + model.Title + "</option>"));
            htmlDropdownList += "</select>";
            return MvcHtmlString.Create(htmlDropdownList);
        }
    }

خوب توی این کلاس دو تا متد همنام گذاشتیم چرا ؟ cool واسه اینکه سمت ویو هم بتونیم دراپ داون ساده بسازیم هم دراپ داون با Attribute به همین خاطر دو تا متد همنام داریم کدها هم ساده هستند با دستورات linq یه تگ select ساختیم شما می تونید با foreach هم اینکار بکنید واسه گرفتن Attribute ها هم از Dictionary استفاده کردیم و اونها رو توی تگ select مون اعمال کردیم خوب حالا وقتشه بریم سمت ویو blush

@Html.DropDownList("States", String.Empty)

@Html.CascadingDropdown("cities")

اولی که دراپ داون استان هست و با استفاده از HtmlHelper خود mvc ساختیم دومی هم HtmlHelper خودمونه فقط برای اینکه مشکل فضای نام نداشته باشید فضای نام کلاس HtmlHelper خودمون توی وب کانفیگ پوشه ویو اضافه کنیم . حالا بریم سراغ کدهای جی کوئری و جاوا اسکریتمون

    $(document).ready(function () {
        $("#cities").find('option').hide();
        $("#cities").val('');

        $("#States").on('change', function () {
            var selectedCostCenter = $("#CostCenterID").val();
            if (selectedCostCenter != '') {
                $("#cities").find('option').hide();
                $("#cities option[value='']").show();
                $('*[data-foreignkeyid="' + selectedCostCenter + '"]').show();
            }
            else {
                $("#cities").find('option').hide();
                $("#cities").val('');
            }

        });

    });

کد های اینجا هم که خیلی سادست اولش همه option ها مخفی می کنه بعد دراپ داون استان تغییر کرد میاد option هایی که data-foreignkeyid برابر id استان هست نمایش میده وبقیه اونهایی که نیست مخفی می کنه به همین راحتی به همین خوشمزگی devil  شما می تونید چندین دراپ داون که به هم وصل هستند و اصلاحا آبشاری هستند بسازید فقط اگه تعداد بیشتر شد توی چنج دراپ داون باید بقیه دراپ داون ها زیر شاخه ش مخفی کنید

امیدوارم این مطلب به درد تون بخوره نظر فراموش نشه مرسی heart



نظرات

Drag to order
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

meisammeisam

عالییییییییییییی بود بسیار زیاد مهندس سیف ، کلا از این دید هیچ وقت به این کمبو ها نگاه نکرده بودم :)