دوره آموزشي #C و ASP.NET MVC +وبمستران

دوره آموزشيAndroid با Java

دوره آموزشي PHP و MySql+وبمستران
نمایش نتایج: از 1 به 2 از 2

موضوع: drop down های داینامیک

  1. #1

    drop down های داینامیک

    با سلام
    تو mvc می خوام چند تا drop down رو به صورت سلسله مراتبی ایجاد کنم مثلا
    استان -شهرستان -بخش-شهر و ...
    و هر کدام از این ها از کلاس دیگری گرفته می شوند
    و در آخر هر کدام از اینها در database ذخیره خواهند شد
    حالا بهترین راه برای ایجاد چنین چیزی چه هست ؟
    با تشکر

  2. #2
    مثال زیر برای استان و شهرزده شده با توجه به نیازتون تغییر بدین
    یک اکشن که برای نمایش استان ها ایجاد کنید
    کد:
    public ActionResult LoadState()
            {
                List<SelectListItem> li = new List<SelectListItem>();
                li.Add(new SelectListItem { Text = "انتخاب", Value = "0" });
                li.Add(new SelectListItem { Text = "خراسان", Value = "1" });
                li.Add(new SelectListItem { Text = "تهران", Value = "2" });
                li.Add(new SelectListItem { Text = "مازندران", Value = "3" });
                li.Add(new SelectListItem { Text = "سیستان و بلوچستان", Value = "4" });
                ViewData["State"] = li;
                return View();
    
            }
    این کدها را به View اکشن بالا اضافه کنید
    کد:
    @using (Html.BeginForm())
    {
        @Html.DropDownList("State", ViewData["State"] as List<SelectListItem>)
    }
    تا اینجا باید لیست کشویی اول در ویو نماش داده شود حالابا استفاده از اسکریپت JSON و متد JSON لیست تو در تو را ایجاد می کنیم. لیست کشویی زیر را نیز به ویو اضافه کنید
    کد:
    @Html.DropDownList("city",  new SelectList(string.Empty, "Value", "Text"), "شهر را انتخاب کنید",  new { style = "width:250px", @class = "dropdown1" })

    حالا متدی که اطلاعات شهر های هر استان را مشخص می کنه و خروجی از نوع JSON است رو اضافه کنید. این متد بر اساس id استان انتخاب شده شهر های مرود نظر رو بر می گردونه

    کد:
    public JsonResult GetCity(string id)
    {
                List<SelectListItem> City = new List<SelectListItem>();
                switch (id)
                {
                    case "1":
                        City.Add(new SelectListItem { Text = "انتخاب", Value = "0" });
                        City.Add(new SelectListItem { Text = "مشهد", Value = "1" });
                        City.Add(new SelectListItem { Text = "قوچان", Value = "2" });
                        City.Add(new SelectListItem { Text = "نیشابور", Value = "3" });
                        City.Add(new SelectListItem { Text = "تایباد", Value = "4" });
                        City.Add(new SelectListItem { Text = "چناران", Value = "5" });
                        break;
                }
     
                return Json(new SelectList(City, "Value", "Text"));
    }
    اینم اسکریپت های مربوط به فراخوانی متد JSON که بعد از انتخاب استان اجرا می شه
    کد:
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Dropdownlist Selectedchange event
            $("#State").change(function () {
                $("#city").empty();
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("GetCity")',
                    dataType: 'json',
                    data: { id: $("#State").val() },
                    success: function (citys) {
                        // states contains the JSON formatted list
                        // of states passed from the controller
                        $.each(citys, function (i, city) {
                            $("#city").append('<option value="'
    + city.Value + '">'
    + city.Text + '</option>');
                        });
                    },
                    error: function (ex) {
                        alert('Failed to retrieve states.' + ex);
                    }
                });
                return false;
            })
        });
    </script>

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •