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

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

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>

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

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