MVC5 + EF6 + Bootstrap3 (8) HtmlHelper用法大全(上)

上一节:MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统

源码下载:点我下载

目录:

HtmlHelper简介

在ASP.NET MVC5的View页面中,HtmlHelper被用来输出HTML代码。更官方点的描述,System.Web.Mvc.HtmlHelper对象,该对象用于呈现HTML元素。如下图所示。

HtmlHelper中的每一个函数都对应生成一种标签,后面会逐一详细介绍给大家。

很多人会问为什么要用HtmlHelper而不直接写html?

我觉得有下面几个原因:

  • 直接写HTML的话如果语句有语法错误,如缺少结尾标记</b>,编译器不会报错,出来的页面可能会很乱且难以查出错误在哪。如果用HtmlHelper在编译的时候就会指出错误,可以及时修改。
  • View中的页面一般都是动态页面,也就是说如果没有HtmlHelper,我们经常会写如<input type="text" value="@id">这样的服务器端代码和HTML代码的混合代码。这样写不仅形式混乱、执行顺序不好判断,而且出错也不容易发现,不如全部用HtmlHelper写成服务器端代码。而且用HtmlHelper做数据绑定更方便。
  • HtmlHelper和HTML语言的关系,我觉得跟Linq和SQL语言的关系差不多。就是说微软给你提供了一种方式让你在不熟悉HTML或SQL这种非.NET语言的时候,使用.NET框架内的与之等价的类来帮助你更好的解决问题。

准备工作

为了更好的演示HtmlHelper,我们在项目中新建一个默认Controller和默认Action。

在解决方案资源管理器中右键点击Controllers文件夹选择添加->控制器。在弹出的窗口中选择MVC 5 控制器 - 空,点确定。输入默认控制器名,DefaultControllerController。将下面代码写入DefaultControllerController.cs文件。

using System.Web.Mvc;

namespace SlarkInc.Controllers
{
public class DefaultControllerController : Controller
{
//
// GET: /DefaultController/
public ActionResult DefaultAction()
{
return View();
}
}
}

从上面代码可以看出在名为DefaultController的Controller中我们创建了一个名为DefaultAction的的Action。

然后我们来创建对应的View。在Views文件夹下的DefaultController文件夹里删除已有的View添加一个名为DefaultAction的View。打开这个DefaultAction.cshtml文件,删除掉所有代码。这样我们的准备工作就完成了。下面开始添加HtmlHelper代码。

链接

ActionLink

ActionLink用来生成HTML中的<a>标签,在页面中生成一个超链接下面给出ActionLink的三个常用重载:

@Html.ActionLink("LinkText", "ActionName")
@Html.ActionLink("LinkText", "ActionName", "ControllerName")
@Html.ActionLink("LinkText", "ActionName", new { id = 1 })

点击在浏览器中查看。运行结果:

<a href="/DefaultController/ActionName">LinkText</a>
<a href="/ControllerName/ActionName">LinkText</a>
<a href="/DefaultController/ActionName/1">LinkText</a>

LinkText是链接显示出的文字,如果ActionLink的参数中给出Controller则链接指向对应的Controller下的Action。如果没有给出Controller则指向当前页面对应的Controller下的Action。如果ActionLink的参数中给出要传递的参数,如id,则在链接的最后写出id值。

RouteLink

RouteLink同样是用来生成HTML中的<a>标签的,但是其参数和ActionLink不同。我们这里给出能实现上面三行HTML代码的RouteLink代码:

@Html.RouteLink("LinkText", new { action = "ActionName" })
@Html.RouteLink("LinkText", new { action = "ActionName", controller = "ControllerName" })
@Html.RouteLink("LinkText", new { action = "ActionName", id = 1 })

从上面代码可以看出LinkText依然是链接显示的文字,而链接的其他信息则包含在RouteLink的第二个参数中。这个参数是个Object,它的action属性表示指向的Action而controller属性表示指向的Controller。如果没有controller属性则指向当前Controller。id属性则为要传递的参数。

Input控件

TextBox

TextBox用来生成HTML中的<input type="text">标签,常用重载有下面两种:

@Html.TextBox("NameId")
@Html.TextBox("NameId","Value")

生成标签如下:

<input id="NameId" name="NameId" type="text" value="" />
<input id="NameId" name="NameId" type="text" value="Value" />

可见TextBox的第一个参数被赋值给input标签的id和name属性,如果没有value参数则value为空,如果有则赋值给value属性。

Hidden

Hidden用来在页面中写入<input type="hidden">标签,其用法和TextBox类似。代码如下:

@Html.Hidden("NameId")
@Html.Hidden("NameId", "Value")

结果如下:

<input id="NameId" name="NameId" type="hidden" value="" />
<input id="NameId" name="NameId" type="hidden" value="Value" />

Password

Password用来写入<input type="password">标签,其用法和TextBox类似。代码如下:

@Html.Password("NameId")
@Html.Password("NameId", "Value")

结果如下:

<input id="NameId" name="NameId" type="password" value="" />
<input id="NameId" name="NameId" type="password" value="Value" />

CheckBox

CheckBox这个函数比较特殊,先看代码和运行结果:

@Html.CheckBox("NameId", true)
@Html.CheckBox("NameId", false)
<input checked="checked" id="NameId" name="NameId" type="checkbox" value="true" /><input name="NameId" type="hidden" value="false" />
<input id="NameId" name="NameId" type="checkbox" value="true" /><input name="NameId" type="hidden" value="false" />

本来,正常情况下它应该只生成一个<input type="checkbox">的标签,如果CheckBox第二个参数是true则有checked="checked"属性,表示这个框打勾。但是为什么这个标签有value="true"而且后面还有个尾巴<input name="NameId" type="hidden" value="false" />呢?

因为在我们ASP.NET MVC中这样子写的效果就是:如果这个CheckBox打勾了,那么提交之后就会传给目标页面一个NameId="true"的值,如果没打勾就会传一个NameId="false"的值。这个值就是由<input name="NameId" type="hidden" value="false" />传递的。若是没有<input name="NameId" type="hidden" value="false" />这一段,则提交之后如果打勾了,仍然会传给目标页面一个NameId="true"的值,而不打勾则不会传NameId的值过去。

RadioButton

RadioButton会生成一个<input type="radio">标签,代码如下:

@Html.RadioButton("NameId","Value", true)
@Html.RadioButton("NameId", "Value", false)

生成代码如下:

<input checked="checked" id="NameId" name="NameId" type="radio" value="Value" />
<input id="NameId" name="NameId" type="radio" value="Value" />

可以看出RadioButton和CheckBox一样都有checked参数,而RadioButton多了一个Value参数可以设置。

列表框

DropDownList

DropDownList函数可以创建<select>标签表示的下拉菜单。在创建下拉菜单之前我们需要创建用<option>标签表示的菜单选项列表,创建方法如下:

@{
SelectListItem item;
List<SelectListItem> list = new List<SelectListItem>();
for(int i=1;i<5;i++)
{
item = new SelectListItem();
item.Text = "Text" + i;
item.Value = "Value" + i;
item.Selected = (i==2);
list.Add(item);
}
}

SelectListItem类会生成一个菜单项,其Text属性表示其显示的文字,Value属性表示其对应的值,Selected属性表示其是否被选中。上面代码生成了若干个<option>标签并且当i为2时,标签被选中。

通过下面代码可以生成包含上面选项列表的下拉菜单:

@Html.DropDownList("Id", list)

生成的结果如下:

<select id="NameId" name="NameId">
<option value="Value1">Text1</option>
<option selected="selected" value="Value2">Text2</option>
<option value="Value3">Text3</option>
<option value="Value4">Text4</option>
</select>

可见DropDownList函数的第一个参数是其id和name,第二个参数就是其四个选项组成的List。每一个选项都有各自的Text、Value,并且第二个选项被选中。

ListBox

ListBox可以生成一个多选列表框,对应HTML里的<select multiple="multiple">标签,ListBox的结构和DropdownList的结构基本一样,只是多了multiple="multiple"属性。我们这里依然使用上面创建的选项列表来创建我们的ListBox,代码如下:

@Html.ListBox("NameId", list)

生成的结果如下:

<select id="NameId" multiple="multiple" name="NameId">
<option value="Value1">Text1</option>
<option selected="selected" value="Value2">Text2</option>
<option value="Value3">Text3</option>
<option value="Value4">Text4</option>
</select>

添加属性

例如想给一个标签添加class和style可以用下面办法:

@Html.TextBox("NameId", "Value", new { @class = "classText",@style="width:200px" })

得到结果如下:

<input class="classText" id="NameId" name="NameId" style="width:200px" type="text" value="Value" />

上面黄色标记部分即为添加的属性。其实你可以以同样的方式添加任意的属性名和属性值,都会生效。

结尾

这个主题未完待续,由于小弟实在精力有限,且写作时字斟句酌、精心选例、深入分析、亲自实践,希望大家谅解。

喜欢的话就点个赞吧,或者哪里有疑问留言讨论讨论。

上一节:MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统

 
分类: MVC
标签: MVCASP.NET
 
 

MVC5 + EF6 + Bootstrap3 (8) HtmlHelper的更多相关文章

  1. MVC5 + EF6 + Bootstrap3 (9) HtmlHelper用法大全(下)

    文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-httphelper-part2.html 上一节 ...

  2. MVC5 + EF6 + Bootstrap3 (8) HtmlHelper用法大全(上)

    文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-httphelper-part1.html 上一节 ...

  3. MVC5 EF6 Bootstrap3 HtmlHelper

    MVC5 + EF6 + Bootstrap3 (9) HtmlHelper用法大全(下) 上一节:MVC5 + EF6 + Bootstrap3 (8) HtmlHelper用法大全(上) 源码下载 ...

  4. MVC5 + EF6 + Bootstrap3 (10) 数据查询页面

    文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-search-page.html 系列教程:MVC ...

  5. MVC5 + EF6 + Bootstrap3系列教程

    本系列教程以ASP.NET MVC5为核心框架,使用Entity Framewok6访问数据,并使用Bootstrap3作为前端UI框架.帮助大家开发出一套高效.美观.稳定.实用的软件系统. MVC5 ...

  6. MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统

    文章来源: Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html 上一节:ASP.NET MVC ...

  7. MVC5 + EF6 + Bootstrap3 (16) 客户端验证

    Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-client-side-validation.html 系列 ...

  8. MVC5 + EF6 + Bootstrap3 (15) 应用ModelState和Data Annotation做服务器端数据验证

    Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-server-side-validation.html 系列 ...

  9. MVC5 + EF6 + Bootstrap3 (11) 排序、搜索、分页

    系列教程:MVC5 + EF6 + Bootstrap3 上一节:MVC5 + EF6 + Bootstrap3 (10) 数据查询页面 源码下载:点我下载 我工作的源码:http://www.jin ...

随机推荐

  1. 读改善c#代码157个建议:建议7~9

    目录: 建议7:将0值作为枚举的默认值 建议8:避免给枚举类型的元素提供显示的值 建议9:习惯运算符重载 一.建议7:将0值作为枚举的默认值 允许使用的枚举类型有:byte.sbyte.short.u ...

  2. MEF初体验之四:Imports声明

    组合部件使用[System.ComponentModel.Composition.ImportAttribute]特性声明导入.与导出类似,也有几种成员支持,即为字段.属性和构造器参数.同样,我们也来 ...

  3. iOS开发- 隐藏状态栏(电池栏)

    分为两种情况: 1. 想要隐藏某个视图的状态栏, 比方说, 从界面A, push 到界面B的时候, 界面A原本显示状态栏, 然而我们须要界面B不显示状态栏. 这时候, 能够这样做: 在B中实现: - ...

  4. 【iOS开展-50】使用它来创建一个新的类的实现代码包,因此,不自觉地练习简单MVC实验,附带动画

    接下来说说代码封装最后一个个案. 最后一种情况看:[iOS开展-48]九宫格案例:自己主动布局.字典转模型运用.id和instancetype差别.xib反复视图运用及与nib关系 (1)代码封装的原 ...

  5. BMP文件格式及读写

    转 http://blog.csdn.net/pkueecser/article/details/5579604 http://blog.csdn.net/pkueecser/article/deta ...

  6. 【SSH三框架】Hibernate基金会七:许多附属业务

    相对于上述一关系,在这里,下一个一对多关系说明. 另外,在上述.我们描述了许多人描述的一一对应关系.在关系数据库是多对一的关系.但也有许多关系. 但,只知道它是不够的,Hibernate它是一种面向对 ...

  7. 嘿嘿。今天学习了AJAX的几个方法

    原文:嘿嘿.今天学习了AJAX的几个方法 今天学习了AJAX的几个方法,其实我很早在公司实习的时间就认识了它,但是对它一无所知,也并没有去学习它,今天学习它让我感到很兴奋因为重新了解了它,嘿嘿,下面就 ...

  8. 实现 mouse-drag 的图标拖动

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  9. [cocos2dx注意事项009]试用quick-cocos2dx-2.2.4

    quick-cocos2d-x 在中国站http://quick.cocoachina.com/?page_id=40,用他们自己的话说:quick-cocos2d-x(后文简称 quick)与 co ...

  10. uva 1500 - Alice and Bob(论证)

    option=com_onlinejudge&Itemid=8&page=show_problem&problem=4246" target="_blank ...