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 能够对选项进行 ...
随机推荐
- May 23rd 2017 Week 21st Tuesday
Winners are not those who never fail but those who never quit. 成功者不是从不失败,而是从不放弃. Nothing is impossib ...
- OO思想举例,控制翻转,依赖注入
(转自kumaws,原帖地址:http://www.cnblogs.com/kumaws/archive/2009/04/06/from_interface_to_DependencyInjectio ...
- 如何使用Kubernetes里的NetworkPolicy
创建一个类型为NetworkPolicy的Kubernetes对象的yaml文件. 第九行的podSelector指定这个NetworkPolicy施加在哪些pod上,通过label来做pod的过滤. ...
- Ubuntu 配置java环境变量
1.使用如下命令,打开/etc/profile: $sudo vi /etc/profile 2.进入编辑模式,在末尾添加: #developer enviroment, add by myself ...
- Python:运算与循环
1.格式化输出 name = input("请输入你的名字:") age =input("请输入你的年龄:") job =input("请输入你的工作 ...
- luogu P1768 天路
嘟嘟嘟 01分数规划之最优比率环. 主要是发一下基于dfs的spfa.跑的贼快,原来总用时2000多ms还TLE了两个点,改成dfs后总用时直降43ms! #include<cstdio> ...
- 【转】JS gzip加密字符串并base64输出
http://blog.csdn.net/zunwei/article/details/49886115 最近开发中遇到一些问题,关于js怎么给一个字符串进行字节流加密.下面就详细说下做法. 首先引入 ...
- 【luogu P3469 [POI2008]BLO-Blockade】 题解
题目链接:https://www.luogu.org/problemnew/show/P3469 #include <cstdio> #include <cstring> #i ...
- Android学习笔记_79_ Android 使用 搜索框
1.在资源文件夹下创建xml文件夹,并创建一个searchable.xml: android:searchSuggestAuthorityshux属性的值跟实现SearchRecentSuggesti ...
- 论坛数据转换discuz论坛?
http://www.bbstobbs.com/thread-397-1-1.html