Last active
December 19, 2015 22:19
-
-
Save miso-soup/de89b36b12b08b4ff079 to your computer and use it in GitHub Desktop.
ASP.NET MVC で動的なドロップダウンリストを実装する http://miso-soup3.hateblo.jp/entry/2013/07/18/141908 で使用したコードです
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
public class City | |
{ | |
public int Id { get; set; } | |
public string Name { get; set; } | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
public class CreateAddressModel | |
{ | |
public int? StateId { get; set; } | |
public int? CityId { get; set; } | |
public SelectList StateSelectList { get; set; } | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 = "氷見市" }, | |
}}, | |
}; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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