|
public class ModelDbContext : DbContext
{
public DbSet<Country> Countries { get; set; }
public DbSet<State> States { get; set; }
}
|
Model
در این کلاس مدل یک پراپرتی با نام CountryID که نگهدارنده کشور انتخابی و یک پراپرتی با نام State برای نگهداری مقدار ایالت و پراپرتی های Countries و States برای نگهداری لیست کشور های موجود و ایالت های هر کدام تعریف شده است.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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
همچنین به وسیله کدهای زیر مقداری داده نمونه وقتی دیتابیس ایجاد می شود در آن وارد می کنیم
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
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 کشور برگشت می دهد.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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 اضافه کرده و کدهای زیر را در آن وارد کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
@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_ ایجاد کنید
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@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>
|
حال بعد از اجرای برنامه باید تصویر زیر را داشته باشیم
در صورتیکه جاوا اسکریپت غیر فعال باشد یک دکمه مظابق شکل زیر نمایش داده می شود تا با کلیک برروی آن استان ها نمایش داده شود
د
زمانیکه شما یک کشور را انتخاب می کنید لیست تمام استان ها بر اساس کشور انتخاب شده نمایش داده خواهد شد.
