后台代码：

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的样式

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

  1. MVC controller序列化下拉框给view

    在开发中遇到的小问题,一个下拉框,一个文本域 ,文本域根据下拉框变化: 由于是一次全部取出的值,下拉框变化不想再去取值: 在后台把值先序列化给前台用 controller: List<Lesso ...

  2. C# MVC LayUI实现下拉框二级联动

    一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...

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

    一.非强类型:Controller:ViewData["AreId"] = from a in Table                               select ...

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

    一.非强类型: Controller: ViewData["AreId"] = from a in rp.GetArea()                             ...

  5. mvc视图双下拉框联动

    html部分的代码 <tr class="trs"> <td class="item1"><div class="ite ...

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

    MVC 中的下拉框 实现方式,下面为大家介绍一个我自己认为比较好用的实现方式,而二话不说直接上代码: 第一步: 后台代码 //公共的方法 //在每次需要展示下拉框的时候,需要调用一下这个方法 [数据源 ...

  7. MVC 实现下拉框

    MVC动态实现下拉框的方式有很多种,但是方便快捷的却是很少,现在记录一种常用的下拉框实现方式: 1.先看看视图代码是怎么写的 <div class="form-group col-xs ...

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

    用jquery多了,就忘了原生的js是如何写的了,还需要多加巩固. 需求:jsp回显一select下拉框.选中指定值. 用户点击修改 该select进行已有值回显.有两种解决方法 一.js中获取用户的 ...

  9. jQuery Ajax MVC 下拉框联动

    无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...

随机推荐

  1. 版本控制系统之git

    一.简介 git是Linux内核项目发起者linus用C语言写的,主要用来做项目的版本控制追踪:git是无中心节点的分布式版本控制系统,也是目前很流行的版本控制系统:其安装简单,使用简单:相比传统的c ...

  2. Linux init 详解（0,1,2,3,4,5,6）

    一.什么是 init init是Linux系统操作中不可缺少的程序之一. 所谓的init进程,它是一个由内核启动的用户级进程. 内核自行启动(已经被载入内存,开始运行,并已初始化所有的设备驱动程序和数 ...

  3. Cypress系列（65）- 测试运行失败自动重试

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 重试的介绍 学习前的三问 什么是重试测试 ...

  4. 微信小程序 - 重置checkbox样式

    /* 未选中的 背景样式 */ checkbox .wx-checkbox-input { border-radius: 50%;/* 圆角 */ width: 30rpx; /* 背景的宽 */ h ...

  5. 【C/C++】用C语言编写爬虫—爬虫程序优化要点

    写一个网络爬虫   用C语言来写一个网络爬虫,来获取一个网站上感兴趣的信息,抓取自己需要的一切. #include<cspider/spider.h>/* 自定义的解析函数,d为获取到的h ...

  6. 旋转子段 （思维stl）

    题目: 大概意思就是给你一个序列,你可以选择一段区间使它左右翻折一遍,然后呢,从1到n找一遍,看a[i]==i的数最多是多少. 其实刚才我已经把暴力思路说出来了,枚举每一个区间长度,枚举每一个左端点, ...

  7. IE下文件上传， SCRIPT5: 拒绝访问 问题

    最近遇到一个比较奇葩的问题,某些ie浏览器在页面中上传文件时,无法上传.查看控制台报错: SCRIPT5: 拒绝访问. jquery-3.2.1.min.js, 行4 字符5725 .并且我的最新版I ...

  8. centos8平台使用ab做压力测试

    一,安装ab [root@blog ~]# yum install httpd-tools 说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/archi ...

  9. 理解 PHP 依赖注入 和 控制反转

    理解 PHP 依赖注入 和 控制反转   要想理解 PHP 依赖注入 和 控制反转 两个概念,就必须搞清楚如下的两个问题: DI -- Dependency Injection 依赖注入 IoC -- ...

  10. 数组列表（ArrayList）

    2020-10-20        longzqa@163.com        stronglzq [摘要]针对数组容量固定无法扩展的问题,引入数组列表(ArrayList).主要对数组列表的声明及 ...