これを実行すると、2つのddlが表示されます。第1の値1〜4、第2の値5〜8。最初のリストから項目を選択すると、その項目が2番目のリストに追加されます。
コントローラー:
public class ModelForDropDowns
{
public IList<SelectListItem> dropDwownOneList = new List<SelectListItem>();
public IList<SelectListItem> dropDwownTwoList = new List<SelectListItem>();
public string selectedDDL1Item { get; set; }
public string selectedDDL2Item { get; set; }
}
public class HomeController : Controller
{
[HttpPost]
public ActionResult Index27(ModelForDropDowns m)
{
ModelGetDDL(m);
//add selected item from list1 to list2
m.dropDwownTwoList.Add(new SelectListItem { Text = m.selectedDDL1Item, Value = m.selectedDDL1Item });
return View(m);
}
public ActionResult Index27()
{
ModelForDropDowns mfd = new ModelForDropDowns();
ModelGetDDL(mfd);
return View(mfd);
}
void ModelGetDDL(ModelForDropDowns mfd)
{
SelectListItem sli1 = new SelectListItem { Text = "t1", Value = "v1" };
SelectListItem sli2 = new SelectListItem { Text = "t2", Value = "v2" };
SelectListItem sli3 = new SelectListItem { Text = "t3", Value = "v3" };
SelectListItem sli4 = new SelectListItem { Text = "t4", Value = "v4" };
SelectListItem sli5 = new SelectListItem { Text = "t5", Value = "v5" };
SelectListItem sli6 = new SelectListItem { Text = "t6", Value = "v6" };
SelectListItem sli7 = new SelectListItem { Text = "t7", Value = "v7" };
SelectListItem sli8 = new SelectListItem { Text = "t8", Value = "v8" };
mfd.dropDwownOneList.Add(sli1);
mfd.dropDwownOneList.Add(sli2);
mfd.dropDwownOneList.Add(sli3);
mfd.dropDwownOneList.Add(sli4);
mfd.dropDwownTwoList.Add(sli5);
mfd.dropDwownTwoList.Add(sli6);
mfd.dropDwownTwoList.Add(sli7);
mfd.dropDwownTwoList.Add(sli8);
}
ビュー:
@model Testy20161006.Controllers.ModelForDropDowns
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index27</title>
@*You can add this auto post*@
@*<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function() {
$("#list1DDL").change(function() {
$("#form1").submit();
})
})
</script>*@
</head>
<body>
<div>
@using (Html.BeginForm("Index27", "Home", FormMethod.Post, new { id = "form1" }))
{
<table>
<tr>
<td>@Html.LabelFor(r => r.dropDwownOneList)</td>
<td>
@Html.DropDownListFor(m => m.selectedDDL1Item,
new SelectList(Model.dropDwownOneList, "Value", "Text"),
new { id = "list1DDL" })
</td>
</tr>
<tr>
<td>@Html.LabelFor(r => r.dropDwownTwoList)</td>
<td>
@Html.DropDownListFor(m => m.selectedDDL2Item,
new SelectList(Model.dropDwownTwoList, "Value", "Text"))
</td>
</tr>
</table>
<input type="submit" id="btn1" />
}
</div>
</body>
</html>
[MVCで2ドロップダウンリストをロードするためのより良い方法]の可能な重複(http://stackoverflow.com/questions/28627421/better-way -to-load-2-dropdown-in-mvc) –
model-view-controllerタグは、パターンに関する質問用です。 ASP.NET-MVCの実装には特定のタグがあります。 –