mvc SelectList 给下拉框 @Html.DropDownList绑定值

后台代码:

public class DropController : Controller
{
// GET: Drop
public ActionResult Index()
{
List<Province> list = new List<Province>
{
new Province{ Id=1,name="山西省"},
new Province{ Id=1,name="广东省"},
new Province{ Id=1,name="山东省"},
new Province{ Id=1,name="河北省"},
new Province{ Id=1,name="湖南省"}
};
var dropDownList = new SelectList(list, "Id", "name");
ViewBag.dropDownList = dropDownList;
return View();
}
}

public class Province
{
public int Id { get; set; }
public string name { get; set; }
}

前台代码:

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/layui/css/layui.css" rel="stylesheet" />
<script src="~/layui/layui.js"></script>
<script src="~/Scripts/jquery-3.3.1.js"></script>
<style>
.layui-form-select dl dd.layui-this {
background-color: #1E9FFF;
}
</style>
</head>
<body>
<div>
主页
</div>
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">选择省份:</label>
<div class="layui-input-inline">
@Html.DropDownList("province", ViewBag.dropDownList as SelectList, "请选择省份", new { @class = "form-control input-small" })
</div>
</div>
</div>

<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">选择市区:</label>
<div class="layui-input-inline">
<select name="quiz2">
<option value="">请选择市</option>
<option value="杭州">杭州</option>
<option value="宁波">宁波</option>
<option value="温州">温州</option>
<option value="温州">台州</option>
<option value="温州">绍兴</option>
</select>
</div>
</div>
</div>

</div>

<script>
layui.use([‘layer‘, ‘form‘], function () {
var layer = layui.layer
, form = layui.form;
form.render();
});
</script>
</body>
</html>

这里在后台代码中 

var dropDownList = new SelectList(list, "Id", "name");
ViewBag.dropDownList = dropDownList;

表示新建了一个SelectList 其中Id用作下拉框绑定的value  name表示下拉框绑定的text 然后将数据保存在viewbag中

@Html.DropDownList("province", ViewBag.dropDownList as SelectList, "请选择省份", new { @class = "form-control input-small" })

这一段前台的razor代码 其中"province"表示下拉框的id和name ,前台选择用的那个  ViewBag.dropDownList as SelectList表示要绑定到下拉框的数据  "请选择省份"是要绑定下拉框的提示项

new { @class = "form-control input-small" } 表示前台那个类属性.

接下来加一个按钮 看能不能获取到点击的值

可以获取 代码如下:

layui.use([‘layer‘, ‘form‘], function () {
var layer = layui.layer
, form = layui.form;
form.render();

$("#btnTest").click(function () {
var value = $("#province").val();
layer.alert("选中的值是" + value);
});
});

这里这个说明 在使用razor语法来做数据绑定  前台也可以使用layui的样式

原文地址:https://www.cnblogs.com/yagamilight/p/12321951.html

时间: 2024-11-05 15:51:28

mvc SelectList 给下拉框 @Html.DropDownList绑定值的相关文章

.NET MVC中给下拉框填充数据

在MVC 中绑定模型的视图,很多时候都会用到下拉框,所以在此记录一下根据DataTable中的数据给下拉框填充数据的方法 1 /// <summary> 2 /// 将 DataTable 转成下拉框的填充数据List<SelectListItem>类型 3 /// </summary> 4 /// <param name="dt">数据DataTable</param> 5 /// <param name="

MVC下拉框Html.DropDownList 和DropDownListFor 的常用方法

一.非强类型:Controller:ViewData["AreId"] = from a in Table                               select new SelectListItem {                                Text=a.AreaName,                               Value=a.AreaId.ToString()                             

net mvc下拉框Html.DropDownList 和DropDownListFor的常用方法

www.qdmm.com/BookReader/1660935,68378037.aspxwww.qdmm.com/BookReader/1660935,68378041.aspxwww.qdmm.com/BookReader/1660935,68378047.aspxwww.qdmm.com/BookReader/1660935,68378052.aspxwww.qdmm.com/BookReader/1660935,68378055.aspxwww.qdmm.com/BookReader/1

下拉框Html.DropDownList 和DropDownListFor 的经常用法

一.非强类型: Controller: ViewData["AreId"] = from a in rp.GetArea() select new SelectListItem { Text=a.AreaName, Value=a.AreaId.ToString() }; View: @Html.DropDownList("AreId") 还能够给其加上一个默认选项:@Html.DropDownList("AreId", "请选择&qu

MVC 中的@Html.DropDownList下拉框的使用

MVC 中的下拉框 实现方式,下面为大家介绍一个我自己认为比较好用的实现方式,而二话不说直接上代码: 第一步: 后台代码 //公共的方法 //在每次需要展示下拉框的时候,需要调用一下这个方法 [数据源是DB数据库] private void _ProductExtensions( BtDbContext _ctx ) { #region 商品分类 List<SelectListItem> listProductTypes = new List<SelectListItem>();

MVC 实现下拉框

MVC动态实现下拉框的方式有很多种,但是方便快捷的却是很少,现在记录一种常用的下拉框实现方式: 1.先看看视图代码是怎么写的 <div class="form-group col-xs-12 col-sm-8 col-md-8"> <label class="control-label">这是一个下拉框:</label> @Html.DropDownList("selectRoleId", ViewData[&

javascript遍历select下拉框判断其中值是否与指定值相等

用jquery多了,就忘了原生的js是如何写的了,还需要多加巩固. 需求:jsp回显一select下拉框.选中指定值. 用户点击修改 该select进行已有值回显.有两种解决方法 一.js中获取用户的该swig_dmSelect值,本例中是从action中获取的 js获取所有option,然后遍历进行判断. <script type="text/javascript"> <% String swjg_dmSelect = (String)session.getAttr

mvc 下拉框赋值

以前使用WebForm变成时,下拉框传值只需直接在后台绑定代码就可以了.现在我们来看看在MVC中DropDownList是如果和接受从Controller传过来的值的. 第一种:使用DropDownList 控制器代码: public ActionResult Index() { //1.1查询YzSeriesEntity的数据 List<Model.YzSeriesEntity> seriesList = seriesBLL.LoadEnities().ToList(); //1.2将YzS

ASP.NET MVC 下拉框的传值的两种方式

以前使用WebForm变成时,下拉框传值只需直接在后台绑定代码就可以了.现在我们来看看在MVC中DropDownList是如果和接受从Controller传过来的值的. 第一种:使用DropDownList 控制器代码: public ActionResult Index() { //1.1查询YzSeriesEntity的数据 List<Model.YzSeriesEntity> seriesList = seriesBLL.LoadEnities().ToList(); //1.2将YzS