آموزش Dropdownlist در MVC -ساخت Dropdownlist آبشاری

در این پست به آموزش Dropdownlist در MVC  به صورت آبشاری خواهیم پرداخت  :

در این مثال از entity framework به روش   code first برای خواندن کشور ها و ایالت ها ( states) از دیتابیس استفاده می شود.

  • ویژوال استدیو را باز کنید
  • یک پروژه از نوع ASP.NET MVC 4 ایجاد کرده و نام آن را CascadingDropDown قرار دهید.
  • View engine آنرا Razer انتخاب کنید
  • یک کنترلر با نام HomeController به پوشه کنترلر اضافه کنید
  • کلاس های مدل را مطابق کدهای زیر به پوشه مدل اضافه کنید:

Country:

public class Country  
{  
   public int CountryID { get; set; }  
   public string Name { get; set; }  
  
   public virtual ICollection<State> States { get; set; }  
}

State:

public class State  
{  
   public int StateID { get; set; }  
   public string Name { get; set; }  
  
   public int CountryID { get; set; }  
   public virtual Country Country { get; set; }  
}

ModelDbContext:

public class ModelDbContext : DbContext  
{  
   public DbSet<Country> Countries { get; set; }  
   public DbSet<State> States { get; set; }  
}

Model

در این کلاس مدل یک پراپرتی با نام CountryID که نگهدارنده کشور انتخابی و یک پراپرتی با نام State برای نگهداری مقدار ایالت و پراپرتی های Countries و States برای نگهداری لیست کشور های موجود و ایالت های هر کدام تعریف شده است.

public class Model  
{  
    public int ? CountryID  
    {  
        get;  
        set;  
    }  
    public int ? StateID  
    {  
        get;  
        set;  
    }  
    public IEnumerable < Country > Countries  
    {  
        get;  
        set;  
    }  
    public IEnumerable < State > States  
    {  
        get;  
        set;  
    }  
}

آموزش Dropdownlist در MVC

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

public class ModelInitializer: DropCreateDatabaseIfModelChanges < ModelDbContext >  
{  
    protected override void Seed(ModelDbContext context)  
    {  
        var countries = new List < Country >  
        {  
            new Country  
            {  
                Name = "India"  
            },  
            new Country  
            {  
                Name = "USA"  
            },  
            new Country  
            {  
                Name = "South Africa"  
            },  
            new Country  
            {  
                Name = "Australlia"  
            },  
        };  
        var states = new List < State >  
        {  
            new State  
            {  
                Name = "Delhi", Country = countries.Single(m => m.Name == "India")  
            },  
            new State  
            {  
                Name = "Mumbai", Country = countries.Single(m => m.Name == "India")  
            },  
            new State  
            {  
                Name = "California", Country = countries.Single(m => m.Name == "USA")  
            },  
            new State  
            {  
                Name = "Newyork", Country = countries.Single(m => m.Name == "USA")  
            },  
            new State  
            {  
                Name = "Capetown", Country = countries.Single(m => m.Name == "South Africa")  
            },  
            new State  
            {  
                Name = "Bolavia", Country = countries.Single(m => m.Name == "South Africa")  
            },  
            new State  
            {  
                Name = "Sydney", Country = countries.Single(m => m.Name == "Australlia")  
            },  
            new State  
            {  
                Name = "Melbourne", Country = countries.Single(m => m.Name == "Australlia")  
            },  
        };  
        countries.ForEach(m => context.Countries.Add(m));  
        states.ForEach(m => context.States.Add(m));  
    }  
}

همچنین connection string در فایل  web.config را برای ارتباط با دیتابیس اضافه کنید

<connectionStrings>  
   <add name="ModelDbContext" connectionString="Data Source=.\SQLEXPRESS; Initial Catalog=CountryDb; Integrated Security=true;" providerName="System.Data.SqlClient"/>  
</connectionStrings>

فایل Global.asax مطابق کدهای زیر ویرایش کنید:

protected void Application_Start()  
{  
    Database.SetInitializer(new CascadingDropDown.Models.ModelInitializer());  
    AreaRegistration.RegisterAllAreas();  
    WebApiConfig.Register(GlobalConfiguration.Configuration);  
    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);  
    RouteConfig.RegisterRoutes(RouteTable.Routes);  
}

یک کنترلر با نام HomeController ایجاد کرده و اکشن زیر را به آن اضافه کنید. در این کنترلر اکشن index  یک شئی از نوع Model  به همراه ویو index که نگهدارنده لیست کشور ها از دیتابیس هست را بر می گرداند.اکشن SelectCountry لیست استان ها بر اساس id  کشور برگشت می دهد.

ModelDbContext db = new ModelDbContext();  
public ActionResult Index()  
{  
    Model model = new Model  
    {  
        Countries = db.Countries.ToList()  
    };  
    return View(model);  
}  
[HttpPost]  
public virtual ActionResult SelectCountry(int ? countryid)  
{  
    var states = countryid.HasValue ? db.Countries.FirstOrDefault(m => m.CountryID == countryid).States : null;  
    Model model = new Model  
    {  
        CountryID = countryid,  
            Countries = db.Countries.ToList(),  
            States = states  
    };  
    if (Request.IsAjaxRequest()) return PartialView("_States", model);  
    else return View("Index", model);  
}

یک view با نام Index اضافه کرده و کدهای زیر را در آن وارد کنید:

@model CascadingDropDown.Models.Model  
@{  
    Layout = null;  
}  
  
<!DOCTYPE html>  
<html>  
    <head>  
        <meta name="viewport" content="width=device-width" />  
        <title>Index</title>  
        <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>  
        <script type="text/javascript">  
            $(document).ready(function () {  
  
                $('input[type=submit]').hide();  
  
                $('#CountryID').change(function () {  
                    $(this).parents('form').submit();  
                    return false;  
                });  
  
                $("form[action$='SelectCountry']").submit(function () {  
  
                    $.ajax({  
                        url: $(this).attr('action'),  
                        type: 'post',  
                        data: $(this).serialize(),  
                        success: function (response) {  
                            $('#states').html(response);  
                        }  
                    });  
                    return false;  
                });  
            });  
        </script>  
    </head>  
    <body>  
        <div>  
            @using (Html.BeginForm("SelectCountry", "Home"))  
            {  
  
                <fieldset>  
                    <legend>Countries</legend>  
                    @Html.DropDownListFor(m => m.CountryID, new SelectList(Model.Countries,"CountryID", "Name"), "[Please select a Country]")  
  
                    <input type="submit" value="Select" />  
                </fieldset>  
            }  
  
        </div>  
        <div id="states">  
            @Html.Partial("_States", Model)  
        </div>  
    </body>  
</html>

یک partial view با نام States_ ایجاد کنید

@model CascadingDropDown.Models.Model  
<fieldset>  
   @if (Model.States != null && Model.States.Count() > 0)  
   {  
      <legend>States</legend>  
      @Html.HiddenFor(m => m.CountryID);  
      @Html.DropDownListFor(m => m.StateID, new SelectList(Model.States, "StateID","Name"), "[Please select a state]")  
   }  
   else  
   {  
      <legend>No states available</legend>  
   }  
</fieldset>

حال بعد از اجرای برنامه باید تصویر زیر را داشته باشیم

آموزش dropdownlist در mvc

در صورتیکه جاوا اسکریپت غیر فعال باشد یک دکمه مظابق شکل زیر نمایش داده می شود تا با کلیک برروی آن استان ها نمایش داده شودآموزش asp mvcد

آموزش Dropdownlist در MVC

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

کلاس asp

ورکشاپ رایگان دوره های تخصصی برنامه نویسی

شما این فرصت را دارید، با تکمیل فرم زیر، قبل از انتخاب دوره آموزشی مناسب خود، در ورکشاپ رایگان دوره های تخصصی برنامه نویسی شرکت کنید
  • این فیلد برای اعتبار سنجی است و باید بدون تغییر باقی بماند .

درباره‌ی محمد آذرنیوا

من محمد آذرنیوا، نویسنده و مدرس دوره های برنامه نویسی ، طراحی وب و تحلیل گر پایگاه داده هستم و قصد دارم در این وبسایت مطالب کاربردی در این زمینه را با شما به اشتراک بگذارم ...

همچنین ببینید

ساخت اپلیکیشن سمت کاربر با فرمت Javascript

در این بخش از آموزش Web API با استفاده از HTML، Javascript و  Knockout.js   اپلیکیشنی …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *