赞
踩
var ProductsSortList是数据库查询的List做成Json传给客户端,用jq处理<select>,但是Mvc不需要做更多的JQ工作,做成SelectListItem ,用@Html.DropDownList 和@DropDownListFor直接使用
1、JQ数据做的下拉框,基本就是传统的Select标签,借助EF强大的查询功能,客户端用jq处理ViewDATA
- var ProductsSortList = OperateContext.Current.BLLSession.IProductsSortBLL.GetListBy_NoTrack(s => s.ProductsSortID > 0).Select(s => new Model.ViewModel.ProductsSort()
- {
- ProductsSortName = s.ProductsSortName,
- ProductsSortID = s.ProductsSortID,
- nodes = s.GoodsSorts.Select(t => new Model.ViewModel.GoodSort()
- {
- GoodsSortID = t.GoodsSortId,
- GoodsSortName = t.GoodsSortName,
-
- }).ToList()
- }).ToList();
- ViewData["ProductsSortDrop"] = Common.DataHelper.ToJSON(ProductsSortList);
- <select name="ModifyProductsSort" id="ModifyProductsSort">
- <option value="0" selected="selected">产品一级分类</option>
- </select>
- <select name="ModifyGoodSort" id="ModifyGoodSort">
- <option value="0" selected="selected">产品二级分类</option>
- </select>
- <script type="text/javascript">
- function escape2Html(str) {
- var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
- return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; });
- }
- //下拉框联动js
- var a = '@ViewData["ProductsSortDrop"]';
- j = escape2Html(a);
-
- var obj = $.parseJSON(j);
-
- $(document).ready(init);
-
- function init() {
-
-
- $.each(obj, function (index, val) {
- $("<option value='" + val.ProductsSortID + "'>" + val.ProductsSortName + "</option>").appendTo($("#ModifyProductsSort"))//动态添加Option子项
-
- });
-
- $("select[name='ModifyProductsSort']").change(function () {
- var selectedPortsSort = $(this).val();
-
- if (selectedPortsSort == 0)
- {
- $("select[name='ModifyGoodSort']").innerHTML = "";
- $("select[name='ModifyGoodSort']").html('<option value="产品二级分类" selected="selected">产品二级分类</option>');
- }//清空二级下拉框
- else {
- document.getElementById("ModifyGoodSort").innerHTML = "";
-
- ShowCityWithSelectedGoodSort(selectedPortsSort);
- }
- });
- }
-
- function ShowCityWithSelectedGoodSort(selectedPortsSort) {
-
- $.each(obj, function (index, val) {
-
- if (val.ProductsSortID == selectedPortsSort)
- {
-
- $.each(val.nodes, function (i, v)
- {
- $("<option value='" + v.GoodsSortID + "'>" + v.GoodsSortName + "</option>").appendTo($("select[name='ModifyGoodSort']"))
-
- })
- }
-
- });
- }
- </script>
- var ProductsSortList = OperateContext.Current.BLLSession.IProductsSortBLL.GetListBy_NoTrack(s => s.ProductsSortID > 0).Select(s => new SelectListItem()
- {
- Text = s.ProductsSortName,
- Value = s.ProductsSortID.ToString()
-
- });
-
- ViewData["ProductsSortDrop"] = ProductsSortList;
@Html.DropDownList("ProductsSortDrop")
还可以给其加上一个默认选项:@Html.DropDownList("ProductsSortDrop", "请选择");
- var ProductsSortList = OperateContext.Current.BLLSession.IProductsSortBLL.GetListBy_NoTrack(s => s.ProductsSortID > 0).Select(s => new SelectListItem()
- {
- Text = s.ProductsSortName,
- Value = s.ProductsSortID.ToString()
-
-
- });
- ViewData["ProductsSortDrop"] = ProductsSortList;
-
- var GoodsSortDropList = OperateContext.Current.BLLSession.IGoodsSortBLL.GetListBy_NoTrack(s=>s.ProductsSortID==GoodsList.ProductsSortID).Select(s => new SelectListItem()
- {
- Text= s.GoodsSortName,
- Value = s.GoodsSortId.ToString()
-
-
- });
- ViewData["GoodsSortDrop"] = GoodsSortDropList;
@Html.DropDownListFor(m => m.ProductsSortID, ViewData["ProductsSortDrop"] as IEnumerable<SelectListItem>)
@Html.DropDownListFor(m => m.GoodsSortID, ViewData["GoodsSortDrop"] as IEnumerable<SelectListItem>)
这样Mvc提交,自动的提交两个DropDownList的ID及value值
<script type="text/javascript">
$(document).ready(init);
function init() {
$("select[name='ProductsSortID']").change(function () {
document.getElementById("GoodsSortID").innerHTML = "";
var selectedProvince = $(this).val();
ShowCityWithSelectedProvince(selectedProvince);
});
}
function ShowCityWithSelectedProvince(province) {
$.ajax({
url: "@Url.Action("GoodsSortDrp", "AdminConsole")",
data: { ProductsSortId: province },
success: function (data) {
console.log(data);
$.each(data, function (i, v) {
$("<option value='" + v.Value + "'>" + v.Text + "</option>").appendTo($("select[name='GoodsSortID']"))
})
}
});
}
</script>
三、强类型:
DropDownListFor常用的是两个参数的重载,第一参数是生成的select的名称,第二个参数是数据,用于将绑定数据源至DropDownListFor
Modle:
public class SettingsViewModel
{
Repository rp =new Repository();
public string ListName { get; set; }
public IEnumerable<SelectListItem> GetSelectList()
{
var selectList = rp.GetArea().Select(a => new SelectListItem {
Text=a.AreaName,
Value=a.AreaId.ToString()
});
return selectList;
}
}
Controller:
public ActionResult Index()
{
return View(new SettingsViewModel());
}
View:
@model Mvc3Applicationtest2.Models.SettingsViewModel
@Html.DropDownListFor(m=>m.ListName,Model.GetSelectList(),"请选择")
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。