MVC5使用单选按钮与下拉框【转】
某人认为下拉列表的呈现形式不如单选按钮漂亮,我只好去测试一下单选按钮与下拉框了。测试代码如下:
1.model类Blog.cs(类型使用枚举类型,自动生成的视图会以下拉列表形式显示):
using System.ComponentModel;
using System.ComponentModel.DataAnnotations; namespace WebTest.Models
{
public enum B_Type
{
原创,转载,翻译
}
public class Blog
{
[Key]
public int B_Id { get; set; } [DisplayName("标题")]
public string B_Title { get; set; } [DisplayName("内容")]
public string B_Content { get; set; } [DisplayName("类型")]
public B_Type B_Type { get; set; } [DisplayName("标签")]
public string B_Tag { get; set; }
}
}
2.在web.config添加连接数据库的字符串(推荐使用sql server数据库,或者使用vs自带的localdb。这一步不会就乖乖去看入门教程,懒得写步骤),然后快捷键ctrl+shift+B 生成解决方案,然后新建带视图的控制器。
3.修改自动生成的Create.cshtml视图代码如下(仔细看一下更改部分):
<div class="form-group">
@Html.LabelFor(model => model.B_Type, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EnumDropDownListFor(model => model.B_Type, htmlAttributes: new { @class = "form-control" })</span>
@Html.ValidationMessageFor(model => model.B_Type, "", new { @class = "text-danger" })
</div>
</div> <div class="form-group">
@Html.LabelFor(model => model.B_Tag, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@*@Html.EditorFor(model => model.B_Tag, new { htmlAttributes = new { @class = "form-control" } })*@
@Html.RadioButtonFor(model=>model.B_Tag, "c#",new { htmlAttributes = new { @class = "form-control" } })C#
@Html.RadioButtonFor(model => model.B_Tag, "java", new { htmlAttributes = new { @class = "form-control" } })Java
@Html.RadioButtonFor(model => model.B_Tag, "python", new { htmlAttributes = new { @class = "form-control" } })Python</span>
@Html.ValidationMessageFor(model => model.B_Tag, "", new { @class = "text-danger" })
</div>
</div>
4.在浏览器打开Create.cshtml视图,新建一条数据,系统在自动创建数据库时会往数据库添加你新建的数据内容
5.修改Edit.cshtml视图代码如下(注意观察不同,视图呈现时会自动选中数据库存储的内容的):
<div class="form-group">
@Html.LabelFor(model => model.B_Tag, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@*@Html.EditorFor(model => model.B_Tag, new { htmlAttributes = new { @class = "form-control" } })*@
@Html.RadioButtonFor(model => model.B_Tag, "c#", new { htmlAttributes = new { @class = "form-control" } })C#
@Html.RadioButtonFor(model => model.B_Tag, "java", new { htmlAttributes = new { @class = "form-control" } })Java</span>
@Html.RadioButtonFor(model => model.B_Tag, "python", new { htmlAttributes = new { @class = "form-control" } })Python
@Html.ValidationMessageFor(model => model.B_Tag, "", new { @class = "text-danger" })
</div>
</div>
6.如果你做了一遍,就会对流程比较清楚了,对应着改自己的项目即可。现在我还是分不清哪个漂亮,不过从实现上讲,下拉列表更易实现,只需将model类中的某一字段定义为枚举类型,就不必你改代码了呀。
MVC5使用单选按钮与下拉框【转】的更多相关文章
- spring mvc:常用标签库(文本框,密码框,文本域,复选框,单选按钮,下拉框隐藏于,上传文件等)
在jsp页面需要引入:<%@taglib uri="http://www.springframework.org/tags/form" prefix="form&q ...
- [ PyQt入门教程 ] PyQt5基本控件使用:单选按钮、复选框、下拉框
本文主要介绍PyQt5界面最基本使用的单选按钮.复选框.下拉框三种控件的使用方法进行介绍. 1.RadioButton单选按钮/CheckBox复选框.需要知道如何判断单选按钮是否被选中. 2.Com ...
- MVC5 下拉框绑定(单选)
1.Model [Display(Name = "学历")] public ICollection<System.Web.Mvc.SelectListItem> asd ...
- jquery实现下拉框多选
一.说明 本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下 二.代码 <!DOCTYPE html PUBLIC & ...
- 利用js取到下拉框中选择的值
现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </ ...
- jquery禁用下拉框
禁用下拉框 //下拉框禁用 $("select").each(function () { $("#" + this.id).attr("disable ...
- [原创]自己动手实现React-Native下拉框控件
因项目需要,自己动手实现了一个下拉框组件,最近得空将控件独立出来开源上传到了Github和npm. Github地址(求Star 求Star 求Star
- ajax 多级联动 下拉框 Demo
写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...
- jquery Combo Select 下拉框可选可输入插件
Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...
随机推荐
- Docker镜像提交命令commit的工作原理和使用方法
在本地创建一个容器后,可以依据这个容器创建本地镜像,并可把这个镜像推送到Docker hub中,以便在网络上下载使用. 下面我们来动手实践. docker pull nginx:1.15.3 用命令行 ...
- 因子和&&因子数
给定一数n,求n的因子数目和因子之和 上述求因子和式子等于 ∏{(piei+1 - 1) / (pi - 1)} (∏就是连乘) 模板: +; int prime[maxn]; bool is_pr ...
- Android(java)学习笔记21:Java异常处理机制
1. try....catch / try...catch...finally package cn.itcast_02; /* * 我们自己如何处理异常呢? * A:try...catch... ...
- 将psd格式批量转换成jpg或png格式(C#自制软件)
此项目基于.net framework 4.0 将psd格式批量转换成jpg或png格式. 链接:https://pan.baidu.com/s/16IEjX0sHaY9H3Ah7mv6IPQ 提取码 ...
- SpringMVC学习记录六——异常定义和上传图片
19 异常处理 19.1 异常处理思路 系统中异常包括两类:预期异常和运行时异常RuntimeException,前者通过捕获异常从而获取异常信息,后者主要通过规范代码开发.测试 ...
- Android学习笔记_79_ Android 使用 搜索框
1.在资源文件夹下创建xml文件夹,并创建一个searchable.xml: android:searchSuggestAuthorityshux属性的值跟实现SearchRecentSuggesti ...
- SqlSugar批量添加修改问题
直接InsertRange空集合会报错,如果我们是同时执行多个添加或修改,不要共用一个上下文,最好是在方法里面声明上下文进行区分,不然容易报错 //如果同时执行多个添加,更新 操作不要共用一个上下文, ...
- Golang 字符串转URLCode
Golang 字符串转URLCode 最近因调用gitlab API,在生成某些字符串的时候直接请求 gitlab API 失败, url如下: keysURL := "http://192 ...
- Vue+node.js+express+mysql实例---对图书信息进行管理
一个简单的 CURD 实例 ---对图书信息进行管理 目录 1 开发环境 1.1 前端开发环境 1.2 后端开发环境 2 数据库设计和创建 2.1 数据库和表设计 2.2 book 表设计 2.3 s ...
- Mac上从gitlab上拉项目实战总结
建立公钥,私钥 https://blog.csdn.net/jigongdajiang/article/details/65441923 2019-01-03 比较喜欢使用图形化界面