YuShu Hsiao

DropDownList的資料來源有兩種，從DB查詢，或是自己在後端定義好要顯示在前端的資料

這篇先寫一下自己定義的下拉式選單資料該如何顯示在前端。

首先定義一下ViewModel

public class AP0010_ConitionModel 
{
   //我要選取的預設值
   public String State { get; set; }
   //資料來源
   public List<SelectListItem> State_ListItem { get; set; }        
}

public class AP0010ViewModel 
{
   public AP0010_ConitionModel condition { get; set; }       
   //以下可以放其他條件
}

後端初始化給資料的時候，有兩種方式，可以給List<SelectListItem>，也可以給SelectList

AP0010_ConitionModel condition = new AP0010_ConitionModel();

//--List<SelectListItem>
//初始化下拉式選單的值 
condition.State_ListItem = new List<SelectListItem>() {
	new SelectListItem() {
		Text = "全部資料",
		Value = "ALL",
	},
	new SelectListItem
	{
		Text = "已生效",
		Value = "AP",
	},
	new SelectListItem
	{
		Text = "草稿",
		Value = "APP",
	}
};
//預設選取的資料
condition.State = "ALL";
            

 

//SelectList 的初始化
public SelectList GetEMP_CATEGORY()
{
	List<SelectListItem> Category = new List<SelectListItem>()
	{
		new SelectListItem() {
			Text = "AAA",
			Value = "1",
		},
		new SelectListItem
		{
			Text = "BBB",
			Value = "2",
		},
		new SelectListItem
		{
			Text = "CCC",
			Value = "3",
		}
	};

	return new SelectList(Category, dataTextField: "Text", dataValueField: "Value");
}

在View的部分，

@Html.DropDownListFor(c => c.condition.State, Model.condition.State_ListItem, new { @class = "form-control ", id = "PageSize" })

這樣後端在Model Binding的時候就可以正常接收，

執行結束之後如果要將POST之前使用者選取的資料回傳回去的話，

將接收的model.condition 傳到要 return View 的model，

網頁再重新產生的時候，就會依照condition內的指定state重新產生DropDownList。

 

原本之前有在前端直接用Html語法產生下拉式選單，

<select class="form-control" name="condition.State" id="" style="width:170px;display:inline">
	<option value="ALL">全部資料</option>
	<option value="AP">已生效</option>
	<option value="APP">草稿</option>
</select>

原本的想法是我只要把name命名正確的話，POST到後端還是可以正常的Model Binding

的確只要命名正確的話，第一次POST到後端的時候可以正常的接收到資料，

但是如果要將執行結果要重新return View(model) 回前端，這時候就無法直接保留選取上一次查詢的時候選取的值，

其實要做應該也是可以，就將選取的值塞到一個隱藏欄位，前端再用JS去判斷隱藏欄位的值，

如果有資料的話就設定下拉式選項的資料，這樣比起來，似乎直接用上面的方法比較直覺一些，

未來要維護程式的時候也比較直覺