MVC Html.DropDownList 和DropDownListFor 的常用方法
来源:互联网 发布:网络女胖子图片搞笑 编辑:程序博客网 时间:2024/06/06 09:31
一、非强类型:
第一种,还是级联
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>
3、JQ
<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>
第二种,纯种MVC
Controller:var ProductsSortList是数据库查询的下拉框绑定做成SelectListItem
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;
view:
@Html.DropDownList("ProductsSortDrop")
还可以给其加上一个默认选项:@Html.DropDownList("ProductsSortDrop", "请选择");
二、强类型+非强类型(ViewData,并实现级联:
控制器:提供下拉框数据绑定
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;
view:
@Html.DropDownListFor(m => m.ProductsSortID, ViewData["ProductsSortDrop"] as IEnumerable<SelectListItem>)
@Html.DropDownListFor(m => m.GoodsSortID, ViewData["GoodsSortDrop"] as IEnumerable<SelectListItem>)这样Mvc提交,自动的提交两个DropDownList的ID及value值
jq级联:<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(),"请选择")
- MVC Html.DropDownList 和DropDownListFor 的常用方法
- MVC Html.DropDownList 和DropDownListFor 的常用方法
- 下拉框Html.DropDownList 和DropDownListFor 的常用方法
- (下拉框系列1)下拉框Html.DropDownList 和DropDownListFor 的常用方法
- 关于.net mvc中@Html.DropDownListFor和@Html.DropDownList默认值无法选中问题
- 关于mvc中@Html.DropDownListFor和@Html.DropDownList默认值无法选中问题简单总结
- ASP.NET.MVC--注解和反射将Enum转换List<SelectListItem>为@Html.DropDownListFor()下拉列表的通用方法
- ASP.NET MVC DropDownList扩展,实现foreach@Html.DropDownListFor(p=>p.Type,p.Type,TypeItem)
- MVC DropDownListFor 的使用和无限级分类的展示
- ASP.NET MVC中@Html.DropDownListFor使用方法
- ASP.NET MVC中@Html.DropDownListFor使用方法
- ASP.NET MVC中@Html.DropDownListFor使用方法
- ASP.NET MVC中@Html.DropDownListFor使用方法
- .net mvc Html.DropDownListFor 设置默认值无效
- Html.DropDownList()的用法 ( Asp.Net MVC)
- Html.DropDownList()的用法 ( Asp.Net MVC)
- Html.DropDownList()的用法 ( Asp.Net MVC)
- MVC中Html.DropDownList的使用方法
- linux编程之系统调用
- 各种距离
- iptables对请求的URL作IP访问控制
- Mysql命令alter add:增加表的字段
- 在java多态中,this问题 解释
- MVC Html.DropDownList 和DropDownListFor 的常用方法
- Android资源文件strings实现特殊字符转义
- 渗透测试演练平台RedTigers Hackit通关writeup以及wechall平台介绍
- LACP学习笔记
- 03_10Pandas_数据合并concat
- javaScript之数组(一)
- Google推荐的图片加载库Glide介绍
- opencv笔记:图像与数据的相互转换
- [Ext JS 6 By Example 翻译] 第2章 - 核心概念