listbox 在mvc中的使用

先看一下效果图

 

首先在controller中Create时.将数据存放与viewdata中

[Authorize]
public ActionResult Create()
{
IList<RuleElement> list = RuleElement.GetAll();
ViewData["ElementList"] = new SelectList(list, "ID", "RuleElementName");
ViewData["SelectElement"]=new List<SelectListItem>();
ViewData["HidenList"] = "";
return View("Create");
}

 

然后在Create view页面中把一个listbox填充数据

 <%=Html.ListBox("Elist", ViewData["ElementList"] as IEnumerable<SelectListItem>, new { SelectionMode = "Single", id = "Elist", name = "Elist", ondblclick = "SelectRule();" ,})%>

在另一个listbox.下放上一个hidden,一个重置.当点击重置时.清空第二个listbox数据

<%=Html.ListBox("RuleElementList", ViewData["SelectElement"] as IEnumerable<SelectListItem>, new { id = "RuleElementList", name = "RuleElementList", style = "width: 140px;height:130px;" })%>
<%=Html.Hidden("HidenList", ViewData["HidenList"].ToString())%>

 <input id="Button1" type="button" value="重置" />

//js写的.当时木用jquery,不好意思.

<script type="text/javascript">
$(document).ready(function() {
$("#Button1").click(function() {
$('#RuleElementList option').each(function(i, option) { $(option).remove(); });
document.getElementById("HidenList").value = "";
});
});

function SelectRule() {
var ss = document.getElementById("Elist");
var e = ss.options[ss.selectedIndex];
var rr = document.getElementById("RuleElementList");
var hList = document.getElementById("HidenList").value;
var length = rr.options.length;
for (var i = 0; i < length; i++) {
if (rr.options[i].text == e.text && rr.options[i].value == e.value)
return true;
}
rr.options.add(new Option(e.text, e.value));
elist = hList + e.value + ",";
document.getElementById("HidenList").value = elist;
}
</script>