これは jQuery で実行できます。私のやり方はこうなります。次のようなフォームがあるとします。
<form method="post" action="#">
<select id="myList" name="myList">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<input type="text" id="newValue" name="newValue" />
<a href="#" id="btn">add new value</a>
<input type="submit" value="Submit">
</form>
myList は新しい値を追加して更新するドロップダウン、newValue はドロップダウン (myList) に追加される新しい値を受け取るテキスト フィールド、id btn のリンクは追加ボタンです。次のような jQuery を追加できます。
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click(function (event) {
event.preventDefault();
$.post("/home/addvalue", { value: $("#newValue").val() }, function (result) {
if (result != null) {
$("#myList").append("<option value='" + result.id + "' selected='selected'>" + result.text + "</option>");
}
});
});
});
</script>
リンク (btn) をクリックすると、テキスト ボックスから値 (およびその値のみ) を収集し、サーバーに POST (フォームの送信) を実行します。サーバーが、新しく挿入された値の ID を含む何らかの回答を返すことを期待していると思います。サーバーがその新しいIDを送り返す場合、新しい結果をリストに追加します(そして、それを選択したものとして設定します)
サーバー側では、コードは次のようになります
[HttpPost]
public JsonResult AddValue(FormCollection collection)
{
//do database inser for the new value and get the id
var response = new Dictionary<string, object>();
response.Add("id", 3);//3 here represents that last id
response.Add("text", collection["value"]); //the value you sent for the new option
return Json(response);
}
POST(ed) データを受け取り、データベースに保存します。値が保存され、新しい ID がディクショナリに保存されたら、それをシリアライズして上記の JavaScript を json として送り返します。これによりフォームが更新されるため、実際に送信したときに myList の値が新しい値になります。これが役に立てば幸いです(そうであれば、答えを受け入れてください)