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的样式
mvc SelectList 给下拉框 @Html.DropDownList绑定值的更多相关文章
- MVC controller序列化下拉框给view
在开发中遇到的小问题,一个下拉框,一个文本域 ,文本域根据下拉框变化: 由于是一次全部取出的值,下拉框变化不想再去取值: 在后台把值先序列化给前台用 controller: List<Lesso ...
- C# MVC LayUI实现下拉框二级联动
一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...
- MVC下拉框Html.DropDownList 和DropDownListFor 的常用方法
一.非强类型:Controller:ViewData["AreId"] = from a in Table select ...
- 下拉框Html.DropDownList 和DropDownListFor 的经常用法
一.非强类型: Controller: ViewData["AreId"] = from a in rp.GetArea() ...
- mvc视图双下拉框联动
html部分的代码 <tr class="trs"> <td class="item1"><div class="ite ...
- MVC 中的@Html.DropDownList下拉框的使用
MVC 中的下拉框 实现方式,下面为大家介绍一个我自己认为比较好用的实现方式,而二话不说直接上代码: 第一步: 后台代码 //公共的方法 //在每次需要展示下拉框的时候,需要调用一下这个方法 [数据源 ...
- MVC 实现下拉框
MVC动态实现下拉框的方式有很多种,但是方便快捷的却是很少,现在记录一种常用的下拉框实现方式: 1.先看看视图代码是怎么写的 <div class="form-group col-xs ...
- javascript遍历select下拉框判断其中值是否与指定值相等
用jquery多了,就忘了原生的js是如何写的了,还需要多加巩固. 需求:jsp回显一select下拉框.选中指定值. 用户点击修改 该select进行已有值回显.有两种解决方法 一.js中获取用户的 ...
- jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...
随机推荐
- 硬盘安装Linux
准备材料:U盘.Linux镜像.UltraISO 1.下载安装UltraISO, 2.打开系统镜像 打开后我们就可以在左边侧栏看到镜像的内容 3.插入U盘,点击:启动->写入光盘映像->选 ...
- 主厨(第4部分)- ASP. netNET Core和Angular 2 CRUD SPA
下载source - 79.7 KB 介绍 在Master Chef(第1部分)和Master Chef(第2部分)中,我介绍了如何使用ASP.Net Core和Angular JS.在Master ...
- springboot1.5和jpa利用HikariCP实现多数据源的使用
背景 现在已有一个完整的项目,需要引入一个新的数据源,其实也就是分一些请求到从库上去 技术栈 springboot1.5 (哎,升不动啊) 思路 两个数据源,其中一个设置为主数据源 两个事物管理器,其 ...
- Vue 学习 二 路由详解
1 roter-link 和roter-view组件 2路由配置 a.动态路由 b.嵌套路由 c.别名路由 d.命名路由 3 Js操作路由 4 重定向和别名 1为路由默认绑定 2 使用组件 根据 路由 ...
- 解决：npm install ERR! Unexpected end of JSON input
npm ERR! Unexpected end of JSON input npm i -g npm@5 npm install --registry=https://registry.npm.tao ...
- 试用 Azure Sql 数据库
我们的12月试用账号的免费服务里有一个Azure Sql服务,最近正好自己做一个小工具需要一个数据库,正好可以把它当测试库顺便体验一把Azure Sql. 概述 Azure SQL 数据库 Azure ...
- 加密sqlite3数据库文件
目录 EncryptSqlite3 实现原理 使用方法 不足之处 GitHub地址 EncryptSqlite3 加密sqlite3数据库,产生的数据库文件别人打不开. 实现原理 在写入文件前对每个字 ...
- 51Nod 最大M子段和系列 V1 V2 V3
前言 \(HE\)沾\(BJ\)的光成功滚回家里了...这堆最大子段和的题抠了半天,然而各位\(dalao\)们都已经去做概率了...先%为敬. 引流之主:老姚的博客 最大M子段和 V1 思路 最简单 ...
- 最大子段和之M子段和
最大M子段和 题目模型 N个整数组成的序列 \(a_1,a_2,a_3,-,a_n\) ,将这N个数划分为互不相交的M个子段,并且这M个子段的和是最大的. 问题分析 方法一: 看到序列,我们首先要尝试 ...
- S10 TES的八强赛，创造了奇迹，看看比赛时网友们怎么说的
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理 我相信很多观众会和我一样吧,当TES赢下第一局后开始心怀侥幸,赢下第二局后觉 ...