ASP.NET MVC で動的なドロップダウンリストを実装する http://miso-soup3.hateblo.jp/entry/2013/07/18/141908 で使用したコードです
public class CreateAddressModel | |
{ | |
public int? StateId { get; set; } | |
public int? CityId { get; set; } | |
public SelectList StateSelectList { get; set; } | |
} |
public class State | |
{ | |
public int Id { get; set; } | |
public String Name { get; set; } | |
public IEnumerable<City> Cities { get; set; } | |
/// <summary> | |
/// 県のスタブリストを作成して返します。 | |
/// </summary> | |
/// <returns></returns> | |
public static IEnumerable<State> CreateDefaultsState() | |
{ | |
return new List<State>() | |
{ | |
new State() { Id = 1, Name = "石川県" , Cities = new List<City>() | |
{ | |
new City() { Id = 1, Name = "金沢市" }, | |
new City() { Id = 1, Name = "七尾市" }, | |
new City() { Id = 1, Name = "小松市" }, | |
new City() { Id = 1, Name = "輪島市" }, | |
}}, | |
new State() { Id = 2, Name = "福井県" , Cities = new List<City>() | |
{ | |
new City() { Id = 1, Name = "福井市" }, | |
new City() { Id = 1, Name = "敦賀市" }, | |
new City() { Id = 1, Name = "小浜市" }, | |
new City() { Id = 1, Name = "大野市" }, | |
}}, | |
new State() { Id = 3, Name = "富山県" , Cities = new List<City>() | |
{ | |
new City() { Id = 1, Name = "富山市" }, | |
new City() { Id = 1, Name = "高岡市" }, | |
new City() { Id = 1, Name = "魚津市" }, | |
new City() { Id = 1, Name = "氷見市" }, | |
}}, | |
}; | |
} | |
} |
@model DynamicSelectList.Models.CreateAddressModel | |
@Html.LabelFor(m => m.StateId, "県") | |
<select | |
data-bind="options: states, optionsText: 'Text', optionsValue: 'Value', value: selectedState, | |
optionsCaption: '県を選択して下さい。'"> | |
</select> | |
@Html.LabelFor(m => m.CityId, "市町村") | |
<select | |
data-bind="options: cities, optionsText: 'Text', optionsValue: 'Value', value: selectedCitity, | |
optionsCaption: '市町村を選択して下さい。', enable: cities().length !== 0"> | |
</select> | |
<script src="~/Scripts/knockout-2.3.0.js"></script> | |
<script type="text/javascript"> | |
$(function() { | |
var createAddressViewModel = { | |
states: ko.observableArray([]), | |
cities: ko.observableArray([]), | |
selectedState: ko.observable(), | |
selectedCitity: ko.observable(), | |
setStates: function () { | |
//都道府県のセレクトリストのソースを設定します | |
$.ajax({ | |
type: 'GET', | |
url: '/api/states', | |
dataType: 'json', | |
cache: false, | |
success: function (data) { | |
createAddressViewModel.states(data); | |
} | |
}); | |
} | |
}; | |
createAddressViewModel.selectedState.subscribe(function (selectedStateId) { | |
//都道府県が変更された時 | |
if (!selectedStateId) { | |
createAddressViewModel.cities([]); | |
} | |
$.ajax({ | |
type: 'GET', | |
//url: '/api/cities', | |
url: '/api/cities', | |
data: { stateId: selectedStateId }, | |
dataType: 'json', | |
cache: false, | |
success: function (data) { | |
createAddressViewModel.cities(data); | |
createAddressViewModel.selectedCitity(''); | |
} | |
}); | |
}); | |
ko.applyBindings(createAddressViewModel); | |
createAddressViewModel.setStates(); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment