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

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. May 23rd 2017 Week 21st Tuesday

    Winners are not those who never fail but those who never quit. 成功者不是从不失败,而是从不放弃. Nothing is impossib ...

  2. OO思想举例,控制翻转,依赖注入

    (转自kumaws,原帖地址:http://www.cnblogs.com/kumaws/archive/2009/04/06/from_interface_to_DependencyInjectio ...

  3. 如何使用Kubernetes里的NetworkPolicy

    创建一个类型为NetworkPolicy的Kubernetes对象的yaml文件. 第九行的podSelector指定这个NetworkPolicy施加在哪些pod上,通过label来做pod的过滤. ...

  4. Ubuntu 配置java环境变量

    1.使用如下命令,打开/etc/profile: $sudo vi /etc/profile 2.进入编辑模式,在末尾添加: #developer enviroment, add by myself ...

  5. Python:运算与循环

    1.格式化输出 name = input("请输入你的名字:") age =input("请输入你的年龄:") job =input("请输入你的工作 ...

  6. luogu P1768 天路

    嘟嘟嘟 01分数规划之最优比率环. 主要是发一下基于dfs的spfa.跑的贼快,原来总用时2000多ms还TLE了两个点,改成dfs后总用时直降43ms! #include<cstdio> ...

  7. 【转】JS gzip加密字符串并base64输出

    http://blog.csdn.net/zunwei/article/details/49886115 最近开发中遇到一些问题,关于js怎么给一个字符串进行字节流加密.下面就详细说下做法. 首先引入 ...

  8. 【luogu P3469 [POI2008]BLO-Blockade】 题解

    题目链接:https://www.luogu.org/problemnew/show/P3469 #include <cstdio> #include <cstring> #i ...

  9. Android学习笔记_79_ Android 使用 搜索框

    1.在资源文件夹下创建xml文件夹,并创建一个searchable.xml: android:searchSuggestAuthorityshux属性的值跟实现SearchRecentSuggesti ...

  10. 论坛数据转换discuz论坛?

    http://www.bbstobbs.com/thread-397-1-1.html