博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
MVC - 12.HtmlHelper
阅读量:6296 次
发布时间:2019-06-22

本文共 3752 字,大约阅读时间需要 12 分钟。

1.动态生成URL

  • @Url.Action("Index3","Stu3")
  • @Url.RouteUrl("Default2", new { controller = "Stu3", action = "Index3", id = UrlParameter.Optional })

2.在视图上直接请求其他action
    • @Html.Action("actionName")

3.生成超链接
    • @Html.ActionLink("我是超链接~", "Party", "Home", new { id = "newId", style = "color:red" })

4.表单Form
  • 4.1.@using (Html.BeginForm())
  • 4.2.Begin End

5.弱类型和强类型方法
  • 5.1.弱类型方法:@Html.TextBox("Title",model.Title);
  • 5.2.强类型方法:@Html.TextBoxFor(s=>s.Name)

6.LabelFor & 模型元数据
    • @Html.LabelFor(s=>s.Name)

7.Display / Editor 模型元数据
  • [DataType(DataType.Password)]
  • @Html.EditorFor(s=>s.Name)

 

1.动态生成URL

image

 

RouteConfig.cs

routes.MapRoute(                name: "Default",                url: "{controller}/{action}/{id}",                defaults: new { controller = "Stu", action = "Index", id = UrlParameter.Optional }            );            routes.MapRoute(                name: "Default2",                url: "{action}/{controller}/{id}",//{action}/{controller}位置改编                defaults: new { controller = "Stu", action = "Index", id = UrlParameter.Optional }            );

 

Html/index.cshtml

直接编写 url 造成格式固定,不灵活
1.去玩
Url.Action 方法 根据 路由规则生成 url 地址
2.去玩Url.Action
Url.RouteUrl 方法 根据 路由 name 生成 url 地址,更灵活
3.去玩 Url.RouteUrl

 

2.在视图上直接请求其他action

@Html.Action("actionName")

参考:8.4

 

3.生成超链接

@Html.ActionLink("我是超链接~", "Party", "Home", new { id = "newId", style = "color:red" })

html源代码

我是超链接~

 

4.表单Form

image

 

4.1.强烈推荐第一种用法

@using (Html.BeginForm("HandleForm", "Home", FormMethod.Post, new { id = "form1" })){    }

4.2.Begin End

@Html.BeginForm("HandleForm", "Home", FormMethod.Post, new { id = "form2" })@{
Html.EndForm();}

 

5.弱类型和强类型方法

5.1.弱类型方法:

指定 name value

@Html.TextBox("Title",model.Title);

@Html.RadioButton("chkHabit","篮球",true)

等其他控件方法也一样

 

5.2.强类型方法:

强类型方法名有"For"后缀

 

image

因为在Razor引擎内部,<> 尖括号在这里被识别为html标签

通过lambda表达式指定模型属性(@model)

@model _06MVCAjax_CodeFirst.Models.Student

image

@Html.TextBoxFor(s=>s.Name)
@Html.DropDownListFor(s => s.Cid, ViewBag.seList as IEnumerable
)

特殊案例:

单选按钮:性别

@*保密                女*@@Html.RadioButtonFor(s => s.Gender, "保密", new { id = "GenderFF" })保密                @Html.RadioButtonFor(s => s.Gender, "男", new { id = "GenderM" })男                @Html.RadioButtonFor(s => s.Gender, "女", new { id = "GenderW" })女

js

//性别                    if (jsonObj.Data.Gender=="男") {                        $("#GenderFF").removeAttr("Checked");                        $("#GenderW").removeAttr("Checked");                        $("#GenderM").attr("Checked","Checked");                    }else if (jsonObj.Data.Gender=="女") {                        $("#GenderFF").removeAttr("Checked");                        $("#GenderM").removeAttr("Checked");                        $("#GenderW").attr("Checked","Checked");                    }else {                        $("#GenderM").removeAttr("Checked");                        $("#GenderW").removeAttr("Checked");                        $("#GenderFF").attr("Checked","Checked");                    }

6.LabelFor & 模型元数据

把姓名,班级,性别改为lable标签

@Html.LabelFor(s=>s.Name)

@Html.LabelFor(s => s.Cid)

@Html.LabelFor(s => s.Gender)

效果如下:

image

<label for="Name">Name</label>

<label for="Cid">Cid</label>

<label for="Gender">Gender</label>

 

解决方案:

模型类的元数据包括:属性(名称和类型) 与特性包含的值。

为实体类属性设置 DisplayName 特性:

[DisplayName("班级名")]        public Nullable
Cid { get; set; }

注意:DisplayName需要命名空间

using System.ComponentModel;

生成的html代码:

<label for="Name">姓名</label>

 

7.Display / Editor 模型元数据

/ @Html.Display 可以通过读取特性值生成HTML:

[DataType(DataType.Password)]        public string Name { get; set; }

注意:DataType需要命名空间:

using System.ComponentModel.DataAnnotations;

在 新增/修改 页面上显示某个属性的input标签:

@**@@Html.EditorFor(s=>s.Name)

生成的html代码:

<input type="password" value="" name="Name" id="Name" class="text-box single-line password">

转载地址:http://wblta.baihongyu.com/

你可能感兴趣的文章
Hadoop文件系统详解-----(一)
查看>>
《面向模式的软件体系结构2-用于并发和网络化对象模式》读书笔记(8)--- 主动器...
查看>>
状态码
查看>>
我的友情链接
查看>>
用sqlplus远程连接oracle命令
查看>>
多年一直想完善的自由行政审批流程组件【2002年PHP,2008年.NET,2010年完善数据设计、代码实现】...
查看>>
自动生成四则运算题目
查看>>
【翻译】使用新的Sencha Cmd 4命令app watch
查看>>
【前台】【单页跳转】整个项目实现单页面跳转,抛弃iframe
查看>>
因为你是前端程序员!
查看>>
数据库设计中的14个技巧
查看>>
Android学习系列(5)--App布局初探之简单模型
查看>>
git回退到某个历史版本
查看>>
ecshop
查看>>
HTML5基础(二)
查看>>
在GCE上安装Apache、tomcat等
查看>>
在Mac 系统下进行文件的显示和隐藏
查看>>
ue4(c++) 按钮中的文字居中的问题
查看>>
技能点
查看>>
读书笔记《乌合之众》
查看>>