MVC5使用单选按钮与下拉框
来源:互联网 发布:sql server导出数据库 编辑:程序博客网 时间:2024/05/21 10:19
某人认为下拉列表的呈现形式不如单选按钮漂亮,我只好去测试一下单选按钮与下拉框了。测试代码如下:
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类中的某一字段定义为枚举类型,就不必你改代码了呀。
0 0
- MVC5使用单选按钮与下拉框
- 下拉框 单选按钮
- jquery中 val()操作 与 复选框、下拉列表、单选按钮的设置
- Java 下拉框JComboBox和单选按钮JRadioButton简单举例使用
- 单选按钮 、 下拉框 、 复选框 选中问题
- HTML单选、多选、按钮、下拉框、文本输入框
- JavaScript操作文本框、单选按钮、下拉框、复选框
- 获取下拉框和单选按钮组的值
- 一些单选按钮和下拉列表框的操作
- 下拉框和单选按钮到赋值
- Smarty模版中的单选按钮 复选框 下拉菜单
- 下拉列表、单选按钮、复选框常用用法总结
- js前台页面定位选择下拉框,单选按钮
- yii下拉列表 单选按钮用法
- JS实现单选按钮与下拉列表的值的选择,使与数据库保持一致
- 复选框与单选按钮
- 复选框当单选按钮使用
- 下拉列表(Spinner),多选框(CheckBox),单选按钮(RadioButton)的使用
- iOS开发拓展篇—音效的播放
- 文章标题
- 弱智的题
- 编写各种OutOfMemory & StackOverflow程序
- 双向广搜 八数码
- MVC5使用单选按钮与下拉框
- iOS8开发~UI布局(二)storyboard中autolayout和size class的使用详解
- ubuntu下 vi输入方向键会变成ABCD的解决方法
- docker配置mongodb副本集
- windows server 2008创建FTP服务器
- Ubuntu14.04安装OpenCV
- AJAX 请求返回存放list的map
- Maven开发环境安装配置
- ubuntu玩android的hello world