初步接触.net MVC的视图语法,很多东西都不太熟悉,感觉跟之前的aspx以及html都有一些区别,最近看别人的代码,一边看一边研究,现把学到的东西在这里记录一下,以便日后翻阅。

第一部分:基础知识

1.视图,英文叫做razor,在.net MVC项目中,它是以.cshtml后缀名来结束的。

2.一个很直观的发现,就是这种文件里面有很多用@开头或者以@{代码体},这种形式的代码是razor特有的一种策略,所有这类代码都会被asp.NET引擎进行处理。

3.在@{代码体}这种形式中的{}里面的各条语句之间需要用;进行分隔,而如果只是单单的一个@后接代码,则不需要用;分割。如

[html] view plain copy

 
  1. <span style="font-size:14px;">@{
  2. ViewBag.Title = "用户注册";
  3. Layout = "~/Views/Shared/_Layout.cshtml";
  4. }</span>

[html] view plain copy

 
  1. <span style="font-size:14px;"> @Html.EditorFor(model => model.UserName)
  2. @Html.ValidationMessageFor(model => model.UserName)
  3. @Html.DisplayDescriptionFor(model => model.UserName)</span>

4.定义变量,可采用如下的方法定义变量。

[html] view plain copy

 
  1. <span style="font-size:14px;">@{
  2. var greeting = "Welcome to our site!"; </span>
[html] view plain copy

 
  1. <span style="font-size:14px;">    var weekDay = DateTime.Now.DayOfWeek;
  2. var greetingMessage = greeting + " Today is: " + weekDay; }</span>

有点类似于javascript,当然也可以在页面中使用这个变量,但是必须要有@这个符号。

[html] view plain copy

 
  1. <span style="font-size:14px;"><p>hello, @greeting</p></span>

需要注意的是,@前面需要有空格,asp.net才能够识别。

如@var i=10;

<p>text @i text</p>将输出text 10 text有空格,如果我们不想要这个空格怎么办呢,可以这样<p>text@{@i}text</p>,这样将输出text10text。此外

[html] view plain copy

 
  1. <span style="font-size:14px;"><p>text@i text</p> 将输出 text@i text </span>
[html] view plain copy

 
  1. <span style="font-size:14px;"><p>text@itext</p> 将输出 text@itext </span>
[html] view plain copy

 
  1. <span style="font-size:14px;"><p>text @itext</p> 将报错 </span>

如果是输出的是变量的方法名则不需要用@{}括住也可生效,但注意在@字符前记得加空格。如: <p>text @i.ToString()text</p> 
使用变量对象可直接写: @var1 @var2 @myObject.xx

5.在@{}中还可以写逻辑代码如:

[html] view plain copy

 
  1. <span style="font-size:14px;">@{
  2. if(){}
  3. <span style="white-space:pre">    </span>else{}
  4. }</span>

6.还可以在@{}中使用html的元素,如:

[html] view plain copy

 
  1. <span style="font-size:14px;">@{</span>
[html] view plain copy

 
  1. <span style="font-size:14px;">  <p>text</p>      </span>
[html] view plain copy

 
  1. <span style="font-size:14px;">  <div>div1</div>
  2. }</span>

7.可以再@{}使用@:或者<text></text>标签输出文本。如

[html] view plain copy

 
  1. <span style="font-size:14px;">@
  2. {
  3. @:this is  a text
  4. @:this is another text
  5. }</span>

注意,此处不需要用到;来结束一条语句,若加了分号,输出的结果为this is a text; this is another text。我们发现这两条语句是并排的,要换行的话只需要在第一条语句的末尾加上<br/>即可。

使用<text></text>在@{}内部输出文本与上面的类似

[html] view plain copy

 
  1. <span style="font-size:14px;">@{
  2. <text>
  3. this is a text
  4. this is another text
  5. </text>
  6. }</span>

跟上面的结果是一样的,也是默认没有换行的。

8.使用注释

有下面几种方法可以再@{}中使用注释。

单行注释使用// 如:

[html] view plain copy

 
  1. <span style="font-size:14px;">  @
  2. {
  3. //这是一条注释
  4. }</span>

多行注释使用@* *@或者/*  */如:

[html] view plain copy

 
  1. <span style="font-size:14px;">@{
  2. @*注释
  3. 注释
  4. 注释*@
  5. /*注释
  6. 注释
  7. 注释*/
  8. }</span>

若在@{ ... }内部使用<!-- -->注释,则会输出到页面之中,如果在<!-- -->内部使用@变量,则会被处理

[html] view plain copy

 
  1. <span style="font-size:14px;"> @{
  2. <!-- time now: @DateTime.Now.ToString() --> </span>
[html] view plain copy

 
  1. <span style="font-size:14px;">} </span>

输出: <!-- time now: 4/9/2011 12:01 -->>

也就是说不能使用<!-->来注释。

9.类型转换:有以下几种类型转换方法

AsInt(), IsInt() AsBool(),IsBool() AsFloat(),IsFloat() 
AsDecimal(),IsDecimal() AsDateTime(),IsDateTime() ToString()

例子如下:

@{ 
    var i = “10”; }   
<p> i = @i.AsInt() </p> <!-- 输出 i = 10 -->

}

10.还可以用循环,如下例子

[html] view plain copy

 
  1. <span style="font-size:14px;">@for(int i=1;i<4;i++)
  2. {
  3. @:@i
  4. }</span>

当然这样也可以:

[html] view plain copy

 
  1. <span style="font-size:14px;">@
  2. {
  3. for(int i=1;i<4;i++)
  4. {
  5. @:@i
  6. }
  7. }</span>

第二部分:htmlhelper

第二个从MVC视图代码中发现的是这类标记,以@html开头的,如

[html] view plain copy

 
  1. @Html.TextBoxFor(model => model.VerificationCode)
  2. @Html.ValidationMessageFor(model => model.VerificationCode)</span>

这类代码。后面查了查,这类代码均叫做htmlhelper,是MVC中的视图中为了呈现HTML控件。以下介绍一些常用的htmlhelper。

ActionLink - 链接到操作方法。 
BeginForm * - 标记窗体的开头并链接到呈现该窗体的操作方法。

CheckBox * - 呈现复选框。

DropDownList * - 呈现下拉列表。 
Hidden - 在窗体中嵌入未呈现的信息以供用户查看。

ListBox * - 呈现列表框。 
Password - 呈现用于输入密码的文本框。

RadioButton * - 呈现单选按钮。 
TextArea - 呈现文本区域(多行文本框)。

 TextBox * - 呈现文本框
此外,还有如@Html.LabelFor,@Html.ValidationMessageFor,@Html.EditorFor,@Html.PasswordFor,@Html.DisplayDescriptionFor等等,主要针对强类型的html控件来使用的。

1.ActionLink,介绍几种写法以及其所生成的源码。

一 Html.ActionLink("linkText","actionName")

该重载的第一个参数是该链接要显示的文字,第二个参数是对应的控制器的方法,

默认控制器为当前页面的控制器,如果当前页面的控制器为Products,则 Html.ActionLink("detail","Detail")

则会生成 <a href="/Products/Detail">detail</a>

二 Html.ActionLink("linkText","actionName","controlName")

该重载比第一个重载多了一个参数,他指定了控制器的名称,

如Html.ActionLink("detail","Detail","Products")则会生成

<a href="Products/Detail">detail</a>

三 Html.ActionLik("linkText","actionName",routeValues)

routeValue可以向action传递参数,如Html.ActionLink("detail","Detail",new { id=1})

会生成 <a href="Products/Detail/1">detail</a>,

此处假设当前的控制器是Products.

四 Html.ActionLink("linkText","actionName",routeValues,htmlAttributes)

htmlAttribute可以设置<a>标签的属性,

如 Html.ActionLink("detail","Detail",new{id=1},new{ target="_blank"})

会生成 <a href="Products/Detail/1" target="_blank">detail</a>,

需要注意的是如果写成 new{ target="_blank",class="className"}则会报错,

因为class是关键字,此处应该写成 @class="className"。

五 Html.ActionLink("linkText","actionName","controlName",routeValues,htmlAttributes)

该重载包含了上面提到的所有参数类型

RouteLink和ActionLink类似,此处稍作说明。

[html] view plain copy

 
  1. <span style="font-size:14px;">@Html.RouteLink("关于","about")</span>
[html] view plain copy

 
  1. <span style="font-size:14px;">@Html.RouteLink("关于","about",new{page=1})</span>
[html] view plain copy

 
  1. <span style="font-size:14px;">@Html.RouteLink("关于","about",new{page=1},new{id=1})</span>
[html] view plain copy

 
  1. <span style="font-size:14px;">分别生成的是</span>
[html] view plain copy

 
  1. <span style="font-size:14px;"><a href="当前控制页/about">关于</a></span>
[html] view plain copy

 
  1. <span style="font-size:14px;"><a href="当前控制页/about?page=1">关于</a></span>
[html] view plain copy

 
  1. <span style="font-size:14px;"><a href="当前控制页/about?page=1" id="link1">关于</a></span><pre name="code" class="html">="当前控制页/about?page=1">关于</a>
[html] view plain copy

 
  1. ="当前控制页/about?page=1">关于</a><pre name="code" class="html">="当前控制页/about?page=1">关于</a>


2.Form的2种用法

第一种:

[html] view plain copy

 
  1. @using(Html.BeginForm("Actionname","Controlername",Formmethod)){}

比如

[html] view plain copy

 
  1. @using(Html.BeingForm("Index","Home",FormMethod.Post)){
  2. }

第二种:

[html] view plain copy

 
  1. @Html.BeginForm("Index","Home",FormMethod.Post)
  2. /*此处书写代码*/
  3. @Html.EndForm()

这两种方法生成的结果都是一样的,都是:

[html] view plain copy

 
  1. </pre><pre name="code" class="html"><form action="/home/index" method="post"></form>

【ASP.NET基础--MVC】MVC视图基础语法学习的更多相关文章

  1. Razor视图引擎 语法学习(二)

    下面就和大家分享下我在asp.net官网看到的资料,学习到的点语法.1.通过使用@符号,可以直接在html页面中写C#或者VB代码:运行后: 2.页面中的C#或者VB代码都放在大括号中.运行后: 3. ...

  2. Razor视图引擎 语法学习

    下面就和大家分享下我在asp.net官网看到的资料,学习到的点语法.1.通过使用@符号,可以直接在html页面中写C#或者VB代码:运行后: 2.页面中的C#或者VB代码都放在大括号中.运行后: 3. ...

  3. Razor视图引擎 语法学习(一)

    ASP.NET MVC是一种构建web应用程序的框架,它将一般的MVC(Model-View-Controller)模式应用于ASP.NET框架: ASP.NET约定优于配置:基本分为模型(对实体数据 ...

  4. MVC入门之.Net语法学习

    本节中主要学习.Net框架性语法.开发者可以使用新语法提高编程的效率以及代码的运行效率:其本质都是“语法糖”,由编译器在编译时转成原始语法. u  自动属性 Auto-Implemented Prop ...

  5. ASP.NET Core 配置 MVC - ASP.NET Core 基础教程 - 简单教程,简单编程

    原文:ASP.NET Core 配置 MVC - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 配置 MVC 前面几章节中,我们都是基于 ASP.NET 空项目 ...

  6. [Asp.net MVC]Asp.net MVC5系列——布局视图

    目录 系列文章 概述 布局视图 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列——添加视图 [Asp.net M ...

  7. ASP.NET MVC——Razor视图引擎

    Razor是MVC框架视图引擎,我们今天就来说一说Razor视图引擎. 首先还是来创建一个基础项目叫Razor来演示. 先来定义一个Model叫Product public class Product ...

  8. ASP.NET Core 入门教程 7、ASP.NET Core MVC 分部视图入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)分部视图简介 ASP.NET Core MVC (Razor)分部视图基础教程 ASP.NET Core MVC (Raz ...

  9. ASP.NET Core Razor 布局视图 - ASP.NET Core 基础教程 - 简单教程,简单编程

    原文:ASP.NET Core Razor 布局视图 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Razor 布局视图 上一章节中我们学习了如何使用 EF ...

随机推荐

  1. c# webapi结合swagger的使用

    一.使用nuget下载swagger包 Install-Package Swashbuckle 二.配置swagger 1. 安装完Swashbuckle后,nuget会将相关引用添加至WebApi项 ...

  2. codeforces 459 D. Pashmak and Parmida's problem(思维+线段树)

    题目链接:http://codeforces.com/contest/459/problem/D 题意:给出数组a,定义f(l,r,x)为a[]的下标l到r之间,等于x的元素数.i和j符合f(1,i, ...

  3. 【Offer】[27]【二叉树的镜像】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 请完成一个函数,输入一颗二叉树,该函数输出它的镜像. 二叉树的镜像定义:源二叉树 8 / \ 6 10 / \ / \ 5 7 9 11 ...

  4. (六十五)c#Winform自定义控件-思维导图/组织架构图(工业)

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...

  5. Visual Studio 调试 —— 附加到进程(远程服务器)

    一般在部署环境下不会有 Visual Studio 开发工具的,所以需要有 Remote Debugger(远程调试器) 才可以进行远程调试. Remote Debugger 获取 方法一:Visua ...

  6. docker 搭建小型的node开发环境。

    选择daocloud的镜像源----快.不多说 镜像的准备: docker pull docker.io/node 下载node镜像 docker pull daocloud.io/nginx 下载n ...

  7. EditPlus5.0破解激活

    永久激活用户名激活码: 用户名:Vovan注册码:3AG46-JJ48E-CEACC-8E6EW-ECUAW 然后重启软件即可

  8. elk安装和使用

    elk安装和使用 使用的版本都是5.2.0 elasticsearch-5.2.0安装 在官网 下载 elasticsearch tar包 解压安装 tar zxf elasticsearch-5.2 ...

  9. (六十八)c#Winform自定义控件-DEMO整理

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...

  10. hadoop 通过distcp进行并行复制

    通过distcp进行并行复制 前面的HDFS访问模型都集中于单线程的访问.例如通过指定文件通配,我们可以对一部分文件进行处理,但是为了高效,对这些文件的并行处理需要新写一个程序.Hadoop有一个叫d ...