ASP.NET MVC 视图()

前言

上篇讲解了视图中的分段概念、和分部视图的使用,本篇将会对Razor的基础语法简洁的说明一下,前面的很多篇幅中都有涉及到视图的调用,其中用了很多视图辅助器,也就是相当于传统webform中的服务器控件,它们都是给我们带来方便的。都是用于生成Html代码的。

ASP.NET MVC 视图

  • 自定义视图引擎
  • Razor视图引擎执行过程
  • Razor视图的依赖注入、自定义视图辅助器
  • 分段、分部视图的使用
  • Razor语法、视图辅助器

Razor语法-区分代码和标记语言

在视图中,我们可以体会得到Razor引擎给我们带来的便利,然后初学的时候总有一个写苦恼,因为在使用代码或者是标签的时候常常分不清在哪里使用”;”分号来结束代码,在Razor中提供了两种不同的方式来区分代码和标签,也就是代码段和代码块。

代码段

代码段就是一些视图辅助器或者是表达式,它们可以在一行中进行渲染,也可以与文本混合的,例如示例代码1-1.

代码1-1

<p>Action to Index:@Html.ActionLink("Index","Index")</p>

表达式跟在@之后,代码1-1将会渲染以下的输出结果:

<p>Action to Index: <a href="/home/Index">Index</a></p>

这里要说明就是这里的代码段必须是要返回标记代码给视图渲染,如果编写的代码段是返回void的,视图在执行的时候是会报错的。

代码块

代码块是一段包含代码的视图,它里面只包含代码,而不是代码和标记语言的混合,Razor中定义的代码块要求是使用”@{}”来包装,以”@{“开始,”}”结束。而且在代码块中的代码书写方式就和.cs文件中的C#类型代码一样,每行代码都必须以;结尾的。来看下示例代码1-2.

代码1-2

@{

    ViewBag.Title = "代码块";
}

视图辅助器

这些辅助器都是扩展了ASP.NET MVC视图对象的HtmlHelper对象,用扩展方法的技术来实现这些辅助器,对于扩展方法可以看我前面写的《ASP.NET MVC学前篇之扩展方法、链式编程》篇幅,而在视图系列前面的篇幅也说到过视图文件会编译成.cs类文件并且是编译成类型对象,而我们使用的就是这个类型对象中的Html属性,它的属性类型就是HtmlHelper类型,对于自定义辅助器可以看这个视图系列的《ASP.NET MVC 视图(三)》篇幅,这里不多说了下面我们来看一下关于Input类型的一些视图辅助器,都是些基础知识,了解的大神们可以直接忽略掉了。

我们先来看一下Checkbox的视图辅助器

对应的是HtmlHelper.CheckBox()和HtmlHelper. CheckBoxFor<TModel>(),第一个方法是个普通的类型,可自由的传递参数值,而第二种方法则是针对于强类型视图的辅助器方法,参数类型为lambda表达式,而表达式的参数类型就是强类型视图的Model类型了,以下所讲的这些视图辅助器几乎所有都是采用的这种编程模型,我们还是来看代码。

代码1-3ViewModel:

    public class CustomerInfo

    {

        public string ID { get; set; }

        public string Name { get; set; }

        public bool Check { get; set; }

    }

代码1-4View:

@model MvcApplication.Models.CustomerInfo

<h1>@Model.ID</h1>

<h2>@Model.Name</h2>

@Html.CheckBox("Check", Model.Check)

@Html.CheckBoxFor(model => model.Check) 

在示例中Check值是为true的,我们看一下渲染后的效果图,以及辅助器所返回的Html代码,图1、图2

图1

图2

这里要说明的一点是,因为是为了方便演示,所以这里的视图是强类型视图,所以可以使用强类型的视图辅助器。

从图2中我们就可以看到两者的使用效果是相同的,而且CheckBox类型的辅助器是唯一的一个生成两个input元素的辅助器。

下面我们再来看Radiobutton辅助器

我先来演示一下普通的方式,也就是RadioButton()方法。还是接着上面的示例来看,

代码1-5

@model MvcApplication.Models.CustomerInfo

<h1>@Model.ID</h1>

<h2>@Model.Name</h2>

@Html.CheckBox("Check", Model.Check)

@Html.CheckBoxFor(model => model.Check)

@Html.RadioButton("Check",Model.Check,Model.Check)

@Html.RadioButton("Check", !Model.Check, !Model.Check)

这里的视图还是强类型视图,只不过是借用一下Model,我们来看一下结果图,

图3

在这里要说一下,Model里的Check属性值是为true的,所以在显示的时候第一个单选框被设置为了选中状态了。

图4

图4所示的就是辅助器生成返回的Html代码

下面我们再来看一下单选框强类型版本的辅助器,也就是对应着RadioButtonFor()扩展方法。

代码1-6

<div class=@Model.ID>

    <p>

        @Html.RadioButtonFor(model => model.Check, Model.Check, new { id = "radio1" })</p>

    <p>

        @Html.RadioButtonFor(model => model.Check, !Model.Check, new { id = "radio2" })</p>

</div>

在代码1-6中我们可以看到RadioButtonFor()方法中有三个参数,第一个为lambda表达式类型,这个参数表示着RadioButtonFor()扩展方法内部绑定值的类型,这里这样说可能有点不清楚后面我会给大家再演示一个示例,这样才会更清晰。

第二个参数则为对应第一个参数类型当中的值,如果此时的Model当中的值跟当前的参数匹配则会设置当前的单选框为选中状态。

第三个参数则是为了修改RadioButtonFor()扩展方法生成的Input元素中的属性值,示例中我们是修改了Input元素的Id的值。我们看一下渲染后的视图和Input元素代码。

图5

图6

下面我修改一下ViewModel,示例代码1-7.

代码1-7

public class CustomerInfo

    {

        public string ID { get; set; }

        public string Name { get; set; }

        public bool Check { get; set; }

        public EnumCase EnumCase { get; set; }

    }

    public enum EnumCase

    {

        EnumOne=,

        EnumTwo=,

        EnumThree=

    }

看到代码1-7中的定义了吧,我在ViewModel中添置了一个示例的枚举类型,这样更直观,现在我们看一下视图中的代码,示例代码1-8

代码1-8

@model MvcApplication.Models.CustomerInfo

@using MvcApplication.Models

<h1>@Model.ID</h1>

<h2>@Model.Name</h2>

@Html.CheckBox("Check", Model.Check)

@Html.CheckBoxFor(model => model.Check)

<div class=@Model.ID>

    <p>

        @Html.RadioButtonFor(model => model.EnumCase, EnumCase.EnumOne, new { id = "radio1" })</p>

    <p>

        @Html.RadioButtonFor(model => model.EnumCase, EnumCase.EnumTwo, new { id = "radio2" })</p>

    <p>

        @Html.RadioButtonFor(model => model.EnumCase, EnumCase.EnumThree, new { id = "radio3" })</p>

</div>

传入到视图的ViewModel值如下代码1-9所示:

代码1-9

new CustomerInfo(){ ID="",Name="张三", Check=true, EnumCase= EnumCase.EnumThree};

下面我们代码1-8视图渲染呈现后的页面,图7.

图7

最后附上Input类型的表格,用法上面所演示的都一样,唯一缺少的就是对于强类型的演示;不过不复杂了自己捣鼓一下也就行了,带点难度的上面都说明了。

Html元素

示例

Checkbox

(复选框)

Html.CheckBox(“myCheckBox”,false)

输出:

<input id=”myCheckBox” name=”myCheckBox” type=”checkbox” value=”true” />

<input name=”myCheckBox” type=”hidden” value=”false”/>

Hidden field

(隐藏字段)

Html.Hidden(“mHidden”,”val”)

输出:

<input id=”myHidden” name=”myHidden” type=”hidden” value=”val” />

Radio button

单选框

Html.RadioButton(“myRadiobutton”,”val”,true)

输出:

<input checked=”checked” id=”myRadiobutton” name=”myRadiobutton” type=”radio” value=”val” />

Password

密令字符

Html.Password(“myPassword”,”val”)

输出:

<input id=”myPassword” name=”myPassword” type=”password” value=”val” />

TextBox

文本框

Html.TextBox(“myTextbox”,”val”)

输出:

<input id=”myTextbox” name=”myTextbox” type=”text” value=”val” />

作者:金源

出处:http://www.cnblogs.com/jin-yuan/

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面

ASP.NET MVC 视图(五)的更多相关文章

  1. ASP.NET MVC 路由(五)

    ASP.NET MVC 路由(五) 前言 前面的篇幅讲解了MVC中的路由系统,只是大概的一个实现流程,让大家更清晰路由系统在MVC中所做的以及所在的位置,通过模糊的概念描述.思维导图没法让您看到路由的 ...

  2. ASP.NET MVC 过滤器(五)

    ASP.NET MVC 过滤器(五) 前言 上篇对了行为过滤器的使用做了讲解,如果在控制器行为的执行中遇到了异常怎么办呢?没关系,还好框架给我们提供了异常过滤器,在本篇中将会对异常过滤器的使用做一个大 ...

  3. 【ASP.NET MVC系列】浅谈ASP.NET MVC 视图

    ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...

  4. (转)ASP.NET MVC 第五个预览版和表单提交场景

    转自:http://ourlife.blog.51cto.com/708821/296171 上个星期四,ASP.NET MVC开发团队发布了ASP.NET MVC框架的“第五个预览版”.你可以在这里 ...

  5. ASP.NET MVC 视图(四)

    ASP.NET MVC 视图(四) 前言 上篇对于利用IoC框架对视图的实现进行依赖注入,最后还简单的介绍一下自定义的视图辅助器是怎么定义和使用的,对于Razor语法的细节和辅助器的使用下篇会说讲到, ...

  6. ASP.NET MVC 视图(三)

    ASP.NET MVC 视图(三) 前言 上篇对于Razor视图引擎和视图的类型做了大概的讲解,想必大家对视图的本身也有所了解,本篇将利用IoC框架对视图的实现进行依赖注入,在此过程过会让大家更了解的 ...

  7. ASP.NET MVC 视图(二)

    ASP.NET MVC 视图(二) 前言 上篇中对于视图引擎只是做了简单的演示,对于真正的理解视图引擎的工作过程可能还有点模糊,本篇将会对由MVC框架提供给我们的Razor视图引擎的整个执行过程做一个 ...

  8. ASP.NET MVC 视图(一)

    ASP.NET MVC 视图(一) 前言 从本篇开始就进入到了MVC中的视图部分,在前面的一些篇幅中或多或少的对视图和视图中的一些对象的运用进行了描述,不过毕竟不是视图篇幅说的不全面,本篇首先为大家讲 ...

  9. 为ASP.NET MVC视图输出json

    做个小小练习,为asp.net mvc视图输出json字符串: 创建JsonResult操作: 创建此视图: 浏览结果:

随机推荐

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. Sql Server系列:分区表操作

    1. 分区表简介 分区表在逻辑上是一个表,而物理上是多个表.从用户角度来看,分区表和普通表是一样的.使用分区表的主要目的是为改善大型表以及具有多个访问模式的表的可伸缩性和可管理性. 分区表是把数据按设 ...

  3. 探索C#之6.0语法糖剖析

    阅读目录: 自动属性默认初始化 自动只读属性默认初始化 表达式为主体的函数 表达式为主体的属性(赋值) 静态类导入 Null条件运算符 字符串格式化 索引初始化 异常过滤器when catch和fin ...

  4. 关于面试题 Array.indexof() 方法的实现及思考

    这是我在面试大公司时碰到的一个笔试题,当时自己云里雾里的胡写了一番,回头也曾思考过,最终没实现也就不了了之了. 昨天看到有网友说面试中也碰到过这个问题,我就重新思考了这个问题的实现方法. 对于想进大公 ...

  5. Android Studio —— 重装 HAXM

    Android Studio -- 重装 HAXM 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 文中如有纰漏,欢迎大家留言指出. Android SDK 自带模拟器一直以慢.卡 ...

  6. Consul 服务注册与服务发现

    上一篇:Mac OS.Ubuntu 安装及使用 Consul 1. 服务注册 对 Consul 进行服务注册之前,需要先部署一个服务站点,我们可以使用 ASP.NET Core 创建 Web 应用程序 ...

  7. input标签中button在iPhone中圆角的问题

    1.问题 使用H5编写微信页面时,使用<input type="button"/>时,在Android手机中显示正常,但是在iPhone手机中则显示不正常,显示为圆角样 ...

  8. 【Java学习系列】第3课--Java 高级教程

    本文地址 可以拜读: 从零开始学 Java 分享提纲: 1. Java数据结构 2. Java 集合框架 3. Java泛型 4. Java序列化 5. Java网络编程 6. Java发送Email ...

  9. H3 BPM让天下没有难用的流程之技术特性

    一.集成性  H3 BPM可以与其它系统进行多个层面的集成,满足企业的针对不同系统的集成需求. 图:多种集成维度 Ø  用户集成 可与企业现有系统进行组织架构同步或调用,也可以直接与AD 进行集成. ...

  10. Supermap iCloudManager -负载均衡

    Supermap icm负载均衡理解: 应用场景:地图出图 子节点1和子节点2中的服务保持一致,一般情况下设置的是匿名用户通过nginx访问服务信息,所以不需要登录. 1.通过nginx分发请求,(轮 ...