后台代码：
public class DropController : Controller
{
// GET: Drop
public ActionResult Index()
{
List
{
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;
}
主页
@Html.DropDownList("province", ViewBag.dropDownList as SelectList, "请选择省份", new { @class = "form-control input-small" })
这里在后台代码中
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的样式