これは、サーバー側の C# 列挙型を JSON にシリアル化し、その結果を使用してクライアント側の<select>
要素を設定する単純なソリューションです。これは、単純な列挙型とビットフラグ列挙型の両方で機能します。
<select>
C# 列挙型を JSON にシリアライズしたいと考えているほとんどの人は、おそらくそれを使用してドロップダウンを埋めていると思うので、エンド ツー エンド ソリューションを含めました。
ここに行きます:
列挙型の例
public enum Role
{
None = Permission.None,
Guest = Permission.Browse,
Reader = Permission.Browse| Permission.Help ,
Manager = Permission.Browse | Permission.Help | Permission.Customise
}
ビットごとの OR を使用してパーミッション システムを生成する複雑な列挙型。したがって、列挙型の整数値の単純なインデックス [0,1,2..] に依存することはできません。
サーバー側 - C#
Get["/roles"] = _ =>
{
var type = typeof(Role);
var data = Enum
.GetNames(type)
.Select(name => new
{
Id = (int)Enum.Parse(type, name),
Name = name
})
.ToArray();
return Response.AsJson(data);
};
上記のコードは、NancyFX フレームワークを使用して Get リクエストを処理します。これは Nancy のResponse.AsJson()
ヘルパー メソッドを使用しますが、列挙型はシリアル化の準備が整った単純な匿名型に既に射影されているため、標準の JSON フォーマッタを使用できます。
生成された JSON
[
{"Id":0,"Name":"None"},
{"Id":2097155,"Name":"Guest"},
{"Id":2916367,"Name":"Reader"},
{"Id":4186095,"Name":"Manager"}
]
クライアント側 - CoffeeScript
fillSelect=(id, url, selectedValue=0)->
$select = $ id
$option = (item)-> $ "<option/>",
{
value:"#{item.Id}"
html:"#{item.Name}"
selected:"selected" if item.Id is selectedValue
}
$.getJSON(url).done (data)->$option(item).appendTo $select for item in data
$ ->
fillSelect "#role", "/roles", 2916367
HTML 前
<select id="role" name="role"></select>
HTML 後
<select id="role" name="role">
<option value="0">None</option>
<option value="2097155">Guest</option>
<option value="2916367" selected="selected">Reader</option>
<option value="4186095">Manager</option>
</select>