某人认为下拉列表的呈现形式不如单选按钮漂亮,我只好去测试一下单选按钮与下拉框了。测试代码如下:

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使用单选按钮与下拉框【转】的更多相关文章

  1. spring mvc:常用标签库(文本框,密码框,文本域,复选框,单选按钮,下拉框隐藏于,上传文件等)

    在jsp页面需要引入:<%@taglib uri="http://www.springframework.org/tags/form" prefix="form&q ...

  2. [ PyQt入门教程 ] PyQt5基本控件使用:单选按钮、复选框、下拉框

    本文主要介绍PyQt5界面最基本使用的单选按钮.复选框.下拉框三种控件的使用方法进行介绍. 1.RadioButton单选按钮/CheckBox复选框.需要知道如何判断单选按钮是否被选中. 2.Com ...

  3. MVC5 下拉框绑定(单选)

    1.Model [Display(Name = "学历")] public ICollection<System.Web.Mvc.SelectListItem> asd ...

  4. jquery实现下拉框多选

    一.说明 本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下 二.代码 <!DOCTYPE html PUBLIC & ...

  5. 利用js取到下拉框中选择的值

    现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </ ...

  6. jquery禁用下拉框

    禁用下拉框 //下拉框禁用 $("select").each(function () { $("#" + this.id).attr("disable ...

  7. [原创]自己动手实现React-Native下拉框控件

    因项目需要,自己动手实现了一个下拉框组件,最近得空将控件独立出来开源上传到了Github和npm. Github地址(求Star 求Star 求Star 

  8. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  9. jquery Combo Select 下拉框可选可输入插件

    Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...

随机推荐

  1. Python3条件控制语句

    Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. if语句 if 条件: 代码块 elif 条件: 代码块 else: 代码块 python中用elif ...

  2. ACM/ICPC 2018亚洲区预选赛北京赛站网络赛 B Tomb Raider 【二进制枚举】

    任意门:http://hihocoder.com/problemset/problem/1829 Tomb Raider 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 L ...

  3. Maven 搭建spring boot多模块项目

    Maven 搭建spring boot多模块项目 备注:所有项目都在idea中创建 1.idea创建maven项目 1-1: 删除src,target目录,只保留pom.xml 1-2: 根目录pom ...

  4. mysql五种日期函数

    create table timess( id int primary key auto_increment, YEARs ——” DATEs DATE ——” TIMEs TIME ::——::” ...

  5. notepad++括号自动补全插件: XBracket Lite

    1.4.5.1. 通过XBracket Lite实现括号的自动补全 先去打开相应的设置: 再根据自己的需要去设置: 其中解释一下相应的选项的含义: Treat'' as brackets 把单引号', ...

  6. ES6 基础概念汇总

    let const命令 声明变量 let 声明的变量  没有变量提升的效果 1  let声明的变量只在代码块内有效 for循环的计数器 2  不存在变量提升 要在声明后使用 let bar = 2 3 ...

  7. mycat常用的分片规则

    一.枚举法<tableRule name="sharding-by-intfile">    <rule>      <columns>user ...

  8. SpringBoot非官方教程 | 终章:文章汇总

    转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springboot-all/ 本文出自方志朋的博客 SpringBo ...

  9. 关于利用HashSet,split,deleteCharAt等方法详解

    1.首先了解一下HashSet的原理: Set接口  Set是对数学上集的抽象,Set中不包含重复的元素.如何界定是否是重复元素?Set最多可含一个null元素;对于任意的非null元素e1和e2,都 ...

  10. HTTP缓存初探

    缓存的作用 用户访问一个web页面的频率远高于web页面更新的频率,因此多数时候用户从服务器获取的html.js.css以及图片等内容都是相同的,如果每次访问都从服务器获取这些静态内容即降低了页面加载 ...