MVC学习系列-HtmlHelper分析以及实例演示
来源:互联网 发布:淘宝网法院拍卖平台 编辑:程序博客网 时间:2024/05/16 08:23
在继续MVC的学习之前我们需要明白很重要的一点:MVC中不允许再使用服务器端控件了。也就是说不能再像WebForm时代,拖拉一个服务器控件,双击该控件就能添加后台响应代码的操作了(如果还能这样操作,岂不是又回到了WebForm时代?)。
那么,我们又该如何定义并操作控件呢?
微软为我们提供了两种方式:
(1)类似于WebForm时代的拖拉控件,但是这里的控件绝不是服务器控件
(2)使用页面的Html属性进行控件的动态添加
关于第一种方式我想就没有介绍的必要了吧,今天我们着重学习第二种方式。
1.HtmlHelper
在开始之前,我们先来看一下页面的Html属性。
上面的代码截图为大家标注出来了页面的几个重要的属性:ViewData、ViewBag、Url、Model、Html等属性,今天我们主要学习的是Html属性,其他属性的学习可以参考我其他的学习系列文章。
在这里我们看到Html属性的类型为HtmlHelper,那么这个HtmlHelper又是个什么类型呢?
从上面的类定义中我们看到,HtmlHelper类只是一个普通的类,它主要是微软定义用来帮助我们生成标签的类。
我们经常在页面中通过Html点出各种方法,可你有没有仔细想过原因呢?
看到上面的代码截图了吗?看懂扩展名那三个字了吗?看到下面的注释了吗?
HtmlHelper帮助我们开发人员创建控件的核心就是使用了扩展方法。
本来还想查找源码看在哪个静态类中对HtmlHelper类进行扩展的,无奈找不到,再次感觉到微软很不给力。
我们可以自己创建帮助器,也可以使用微软为我们封装好的,下面为大家讲解一下微软自带的HTML帮助器
2.实例演示
帮助器函数有多个重载,具体使用哪一个根据需要选用,在此只列出简单的几个
首先介绍一下对应于两种视图引擎HTML帮助器的两种写法:
<%:Html.ActionLink()%>
@Html.ActionLink()
ActionLink - 链接到操作方法
<%:Html.ActionLink("添加", "Index", "User")%>> <%:Html.ActionLink("修改", "Index", "User", new { page = 1 }, null)%>> <%:Html.ActionLink("删除", "Index", new { page = 1 })%>> <%:Html.ActionLink("查询", "Index", "User", new { id = "link1" })%>> <%:Html.ActionLink("链接", "Index", null, new { id = "link1" })%>> <%:Html.ActionLink("跳转", "Index", "User", new { page = 1 }, new { id = "link1" })%>>调试运行时生成的代码如下所示:
<a href="/">添加</a><a href="/?page=1">>修改</a><a href="/?page=1">删除</a><a href="/?Length=4" id="link1">查询</a><a href="/" id="link1">链接</a><a href="/?page=1" id="link1">跳转</a>
BeginForm - 开始表单元素的提交
EndForm - 结束表单元素的提交
@using(Html.BeginForm("Index","User",FormMethod.Post)){}@Html.BeginForm("Index", "User", FormMethod.Post)@Html.EndForm()
调试运行时生成的代码如下所示:
<form action="/User/Index" method="post"></form>
CheckBox - 呈现复选框
Hidden - 在窗体中嵌入未呈现的信息以供用户查看
@Html.CheckBox("chk1",true) @Html.CheckBox("chk1", new { @class="checkBox"}) @Html.CheckBoxFor(a =>a.IsVaild, new { @class = "checkBox" })调试运行时生成的代码如下所示:
<input checked="checked" id="chk1" name="chk1" type="checkbox" value="true" /><input name="chk1" type="hidden" value="false" /> <input class="checkBox" id="chk1" name="chk1" type="checkbox" value="true" /><input name="chk1" type="hidden" value="false" /> <input checked="checked" class="checkBox" id="IsVaild" name="IsVaild" type="checkbox" value="true" /><input name="IsVaild" type="hidden" value="false" />
ListBox - 呈现列表框
<%:Html.ListBox("lstBox1", (SelectList)ViewData["type"])%>>调试运行时生成的代码如下所示:
<select id="lstBox1" multiple="multiple" name="lstBox1"><option value="1">Teacher</option><option value="2">Studnet</option><option selected="selected" value="3">Master</option><option value="4">Manager</option></select>
TextArea - 呈现文本区域(多行文本框)
<%:Html.TextArea("input5", Model.UserInfo, 3, 9,null)%><%:Html.TextAreaFor(a => a.UserInfo, 3, 3, null)%>调试运行时生成的代码如下所示:
<textarea cols="9" id="input5" name="input5" rows="3">Beverages</textarea><textarea cols="3" id="UserInfo" name="UserInfo" rows="3">Beverages</textarea>在使用TextArea这个帮助器时一定要注意不能使用动态获取后台数据(貌似是不支持)
<%:Html.TextArea("input5",ViewData["Ssex"],3,9,new {id="link2"})%>>例如写成上面的形式会给出提示:HtmlHelper<dynamic>不包含"TextArea"的定义
TextBox - 呈现文本框
<%:Html.TextBox("txtName") %>> <%:Html.TextBox("txtSex", ViewData["Ssex"], new{style = "width:300px;" })%>> <%:Html.TextBox("txtSex", ViewData["Ssex"])%>>调试运行时生成的代码如下所示:
<input id="txtName" name="txtName" type="text" value=""><input id="txtSex" name="txtSex" style="width:300px;" type="text" value=""><input id="txtSex" name="txtSex" type="text" value="">
Password - 呈现用于输入密码的文本框
RadioButton - 呈现单选按钮
DropDownList - 呈现下拉列表
剩下的几种在此不再讲述,具体可参考MSDN:https://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper(v=vs.118).aspx
上面列举的都是微软帮我们封装好的扩展方法,当然我们还可以进行自己HtmlHelper方法的扩展。
下面的系列学习文章我会动手做一个分页的方法扩展,加深HtmlHelper扩展方法的使用,欢迎阅读、共同学习。
由于本人也是初学MVC,对上面的理解可能有不对之处,如果想看权威建议MSDN:https://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper(v=vs.118).aspx
MVC学习系列-了解Url的路由规则
MVC学习系列-表单的异步提交
MVC学习系列-表单数据提交
MVC学习系列-ViewData与ViewBag
MVC学习系列-表单数据的校验
- MVC学习系列-HtmlHelper分析以及实例演示
- Asp.net MVC HtmlHelper学习
- [读后感]spring Mvc 教程框架实例以及系统演示下载
- spring Mvc 教程框架实例以及系统演示下载
- spring Mvc 教程框架实例以及系统演示下载
- Spring Mvc 教程框架实例以及系统演示下载
- System.Web.Mvc.HtmlHelper学习及使用
- 通过一个MVC HtmlHelper扩展实例,简单说明扩展步骤
- HtmlHelper学习
- .net MVC HtmlHelper
- MVC HtmlHelper说明
- MVC HtmlHelper用法大全
- MVC htmlhelper大全
- ASP.net MVC--Htmlhelper
- MVC HtmlHelper用法大全
- ASP.NET MVC HtmlHelper
- MVC HtmlHelper guide
- MVC HtmlHelper用法大全
- Android官方入门文档[17]构建灵活的UI
- Android小记:之ADT插件的安装
- 两个链表的第一个公共结点
- android锁屏
- 杭电题目分类
- MVC学习系列-HtmlHelper分析以及实例演示
- C#判断上传文件是否是图片以防止木马上传的方法
- 精美手电筒间断闪烁实现
- AIX 常用命令汇总
- Redis学习1--字符串学习
- LeetCode 6.ZigZag Conversion
- android tab实现方式3 of 4,tabhost
- 将ppt转换成pdf格式的软件
- UIView属性分析