第006课：ASP.NET MVC4 View层_Razor操作Html元素 - 三岛杰克 - 推酷
第006课：ASP.NET MVC4 View层_Razor操作Html元素 - 三岛杰克
：&label for=&UserName&&用户名&/label&
Razor语法：@Html.LabelFor(m =& m.UserName)
1.2 &input type=&text& /&
&input& id=&
& value=&& /&
Razor语法：
@Html.TextBoxFor(m =& m.UserName)
1.3 &input type=&hidden& /&
&input id=&
& type=&hidden& value=&& /&
Razor语法：
@Html.TextBoxFor(m =& m.UserName)
1.4 &input type=&password& /&标签
&input id=&UserPass& name=&UserPass& type=&PasswordFor& value=&& /&
Razor语法：
@Html.PasswordFor(m =& m.UserPass)
1.5 &input type=&radio& /&标签
&input id=&Sex0& name=&Sex& type=&radio& value=&0& /& 男
&input id=&Sex1& name=&Sex& type=&radio& value=&1& /& 女
&input id=&Sex2& name=&Sex& type=&radio& value=&2& /& 保密
Razor语法：
.RadioButtonFor(m=& m.Sex, 0, new { @id = &Sex0&}) 男
.RadioButtonFor(m=& m.Sex, 1, new { @id = &Sex1&}) 女
.RadioButtonFor(m=& m.Sex, 2, new { @id = &Sex2&}) 保密
1.6 &input type=&checkbox& /&标签
&input id=&RememberMe& name=&RememberMe& type=&checkbox& value=&true& /&
Razor语法：
@Html.PasswordFor(m =& m.UserPass)
2 链接地址
@Url.Content()
@Url.Action
2.1 引用CSS样式文件
&link href=&/Content/style.css& /&
Razor语法：
&link href=&@Url.Content(&~/Content/style.css&)& /&
2.2 引用Javascript文件
&script src=&/Content/jquery.js&&&/script&
Razor语法：
&script src=&@Url.Content(&~/Content/jquery.js&)&&&/script&
2.3 Image引用图片文件
&img src=&/Content/images/1.jpg& /&
Razor语法：
&script src=&@Url.Content(&~/Content/images/1.jpg&)&&&/script&
2.4 超链接
&a href=&&&注册&/a&
Razor语法：
@Html.ActionLink(&注册&, &Register&)
注：@Html.ActionLink有多个重载，具体参照MSDN API文档
3.1 正常提交表单
.BeginForm()){
//默认提交到本页面
&input type=&submit& value=&Button&/&
3.2 Ajax提交表单
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId=&txtResult& }))
&&&&&&& &input type=&submit& value=&Button&/&&&&&&&&&&&&&
&&&&&&& &span id=&txtResult&/&
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)
& & 在越来越重视用户体验的今天，换肤功能也慢慢被重视起来。一个web系统用户可以选择一个自己喜欢的系统主题，在用户眼里还是会多少加点分的。我们很开心的是easyui v1.3.4有自带default gray black bootstrap metro五款皮肤，但是它并不像bootsrap提供了很完整的css框架，不能提供项目需要的所有的css，所以还需要自己编写控件之外的一些css。给系统换肤时，easyui控件都没问题，问题就在于自己编写的这部分css怎么实现换肤，当然，最简单的办法就是为每一款主题都写对应的一份自定义css然后在项目中加载，这样是可以实现。&
& & 但是我觉得这样有点罗嗦了，当你添加新的css或修改css时，你要同时修改N份css,每一个主题对应一份，而且easyui除了这5款默认的主题还有其它主题或者我们还可以自定义主题，那这样修改css就更不现实了。所以我们就想到的动态css,也就是css预处理技术。
二、CSS预处理技术
CSS 预处理器技术已经非常的成熟，常用的预处理器框架有：&
1、Less 官网：http://lesscss.org/&
2、Sass 官网：/&
3、Stylus 官网：http://learnboost.github.io/stylus/
我研究比较多的只有less,后两者也只是了解了下，所以这里我还是选用less来实现
我们先来看看用less带来了哪些方便&
1、用Less我们可以实现用变量去写css,可以很方便的实现换肤功能（只要改变变量的值即可）
@the-border: 1
@base-color: #111;
@red: & & & 󍧢
& color: (@base-color * 3);
& border-left: @the-
& border-right: (@the-border * 2);
& color: (@base-color + #003300);
& border-color: desaturate(@red, 10%);
2、Less提供了很多很有用的函数比如lighten darken fadein fadeout&等等，比如把字体A颜色设置为#1382CE，字体B跟A同一颜色，只是比较淡:
@fontcolor:#1382CE;
& & color: @
& & color: lighten(@fontcolor,30%);
3、我们也可以自己定义自己的less函数，比如我们写一个背景渐变的css,我们可以定义一个渐变的函数，如下：
.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
& background: @
& background: -webkit-gradient(linear,
& & & & & & & & & & & & & & & &left bottom,
& & & & & & & & & & & & & & & &left top,
& & & & & & & & & & & & & & & &color-stop(0, @start),
& & & & & & & & & & & & & & & &color-stop(1, @stop));
& background: -ms-linear-gradient(bottom,
& & & & & & & & & & & & & & & & & @start,
& & & & & & & & & & & & & & & & & @stop);
& background: -moz-linear-gradient(center bottom,
& & & & & & & & & & & & & & & & & &@start 0%,
& & & & & & & & & & & & & & & & & &@stop 100%);
& background: -o-linear-gradient(@stop,
& & & & & & & & & & & & & & & & &@start);
& filter: e(%(&progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)&,@stop,@start));
然后我们只需要这样用：
.head-north
& & .gradient(colorDefault,colorFrom, colorTo);
我就简单介绍这些，less还有很多用法，大家自己去探究。
三、系统换肤实现思路
当然不光是引入less就完了，事情远没有这么简单，我们知道既然是dynamic css那么一定是需要编译的，less最终也是只是编译生成css代码，那么就有一个问题，什么时候编译&
1、使用编译工具比如koala、SimpleLess等，在项目发布前编译好放在项目中&
2、前端解析编译，需要在项目中引入less.js&
3、后台动态解析，在java环境下的编译引擎比较多，.net下好像我就找到一个dotless，而且实现的还不是很完整，只能说是less v1.5的部分实现。
先分析下这三种方式，第一种用编译工具，就是我发布项目要做的事情变多了，我一向比较懒，喜欢简单的，万一我忘记了怎么办，总觉得是多了一趟事情。&
第二种前端实时解析，这种其实是很理想的一种方便，也很方便，但是带来的一个问题就是前端的效率，如果css少还好说，多了肯定会影响效率的。&
第三种呢，后台动态编译，后台只编译一次后缓存起来，对服务器基本没有影响，这样很好，问题是我这个框架是.net的，是dotless实现不完整,但是我们不一定会用到less所有的功能，有基本功能就够用了，比如条件判断等更高级的使用，我们可以在处理前自己先预处理一下，再给less类库去解析。
好吧，那么我就选择第三种在后台动态解析了。&
具体思路：&
1、根据当前用户选择的theme取得easyui.css文件并根据特征获得主题的相关变量@body-background-color或@body-text-color等等，这些变量我在我自定义的css中会常用到，取得这些变量是很容易做到的。&
2、利用这些变量，我们可以theme.less中编写自定义的css&
3、利用.net m4.0中的bundle中来处理less&
4、页面引用输出css
四、具体实现
1、引入dotless类库&
2、定义easyui中的变量，应该包括以下变量
/*common*/
@border-color
@border-radius
@font-size
@shadow-background-color
@mask-background-color
@toolbar-background-color
@toolbar-border-color
@split-color
@split-proxy-color
/*Header*/
@header-background-color
@header-text-color
@header-gradient-used
@header-gradient-from
@header-gradient-to
@body-background-color
@body-text-color
@grid-header-background-color
@grid-header-gradient-from
@grid-header-gradient-to
@cell-border-color
@alt-background-color
@selected-background-color
@selected-text-color
@selected-border-color
@hover-background-color
@hover-text-color
@hover-border-color
@invalid-background-color
@invalid-border-color
@invalid-text-color
@menu-background-color
@menu-text-color
@menu-border-color
/*button*/
@button-background-color
@button-selected-color
@button-text-color
@button-gradient-used
@button-gradient-from
@button-gradient-to
@button-radius
@button-split-color1
@button-split-color2
这些变量要通过用户的theme取得easyui.css文件并解析这个文件去给这些less变量赋值
3、自定义自己的动态css，下面是我的项目中theme.less文件的片段
& & background:@body-background-
.z-toolbar,.z-toolbar-dialog{
& & border-color:@border-
& & background:@header-background-
& & border-color:@border-
& & background:
.head-left, .head-right, .head-right a
& & color: $when(@theme=gray,default,black,bootstrap| #fff | #000);&
.head-north
& & .gradient(@selected-background-color,@header-background-color, @selected-background-color);
.head-south,.head-south a
& & background:@header-background-
& & color: lighten(@body-text-color,30%);
4、在项目中的BundleConfig.cs中的RegisterBundles中注册bundles
using System.IO;
using System.W
using System.Web.H
using System.Web.M
using System.Web.O
using Zephyr.U
namespace Zephyr.Web.Mvc
& & public class BundleConfig
& & & & public static void RegisterBundles(BundleCollection bundles)
& & & & & & var dirBase = new DirectoryInfo(HttpContext.Current.Server.MapPath(
& & & & & & & & string.Format(&~/Content/js/easyui/{0}/themes&,AppSettings.EasyuiVersion)));
& & & & & & var dirs = dirBase.GetDirectories();
& & & & & & foreach (var dir in dirs)
& & & & & & {
& & & & & & & & if (dir.Name == &icons&)
& & & & & & & & var theme = dir.N
& & & & & & & & var themeBundle = new Bundle(string.Format(&~/Content/css/theme/{0}&, theme)).Include(
& & & & & & & & & & &~/Content/css/less/elements.less&,&
& & & & & & & & & & &~/Content/css/less/theme.less&);
& & & & & & & & themeBundle.Transforms.Add(new EasyuiLessTransform(theme));
& & & & & & & & themeBundle.Transforms.Add(new LessTransform());
& & & & & & & & themeBundle.Transforms.Add(new CssMinify());
& & & & & & & & bundles.Add(themeBundle);
& & & & & & }
这里在bundle的Transforms中添加了三个BundleTransform处理，&
其中EasyuiLessTransform是我对easyui变量及自定义条件判断$when的处理&
LessTransform则是调用dotless库解析less代码
using System.Web.O
using dotless.C
namespace Zephyr.Web.Mvc
& & public class LessTransform : IBundleTransform
& & & & public void Process(BundleContext context, BundleResponse response)
& & & & & & var compiled = Less.Parse(response.Content);
& & & & & & if (string.IsNullOrEmpty(compiled))
& & & & & & & & throw new Exception(&less文件中语法有错误！&);
& & & & & & response.Content =
& & & & & & response.ContentType = &text/css&;
第三个CssMinify则是System.Web.Optimization下面的对css混淆压缩处理。
5、在页面中引用,razor页面中只需要以下代码即可
@Styles.Render(&~/Content/css/theme/& + AppLoginer.Theme)
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'如何设置使用MVC4用razorJavaScript变量_百度知道
如何设置使用MVC4用razorJavaScript变量
我有更好的答案
这是你的项目珐场粹渡诔盗达醛惮互采用代码语法设置问题，vs初始设置为c#是编程语言不是开发模式，你设置之后也可以使用vb.net，你添加文件的时候没有cshtml是因为你选择的代码模式不是razor语法，当然不能建立这个文件了，你要么使用razor语言，要么采用aspx模式
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁ASP.NET 教程
ASP.NET Razor - C# 变量
变量是用来存储数据的命名实体。
变量 变量是用来存储数据的。 一个变量的名称必须以字母字符开头，并且不能包含空格或者保留字符。一个变量可以是一个指定的类型，表示它所存储的数据类型。string 变量存储字符串值（"Welcome to W3CSchool.cc"），integer 变量存储数字值（103），date 变量存储日期值，等等。变量使用 var 关键字声明，或通过使用类型（如果您想声明类型）声明，但是 ASP.NET 通常能自动确定数据类型。
// Using the var keyword:var greeting = "Welcome to W3CSchool.cc";var counter = 103;var today = DateTime.T// Using data types: string greeting = "Welcome to W3CSchool.cc";int counter = 103;DateTime today = DateTime.T
数据类型 下面列出了常用的数据类型：
类型 描述 实例
int 整数（全数字） 103, 12, 5168
float 浮点数 3.14, 3.4e38
decimal 十进制数字（高精度）
bool 布尔值 true, false
string 字符串 "Hello W3CSchool.cc", "John"
运算符 运算符告诉 ASP.NET 在表达式中执行什么样的命令。 C# 语言支持多种运算符。下面列出了常用的运算符：
运算符 描述 实例
= 给一个变量赋值。 i=6
加上一个值或者一个变量。减去一个值或者一个变量。乘以一个值或者一个变量。除以一个值或者一个变量。 i=5+5i=5-5i=5*5i=5/5
+=-= 变量递增。变量递减。 i += 1i -= 1
== 相等。如果值相等则返回 true。 if (i==10)
!= 不等。如果值不等则返回 true。 if (i!=10)
&&&=&= 小于。大于。小于等于。大于等于。 if (i&10)if (i&10)if (i&=10)if (i&=10)
+ 连接字符串（一系列互相关联的事物）。 "w3" + "schools"
. 点号。分隔对象和方法。 DateTime.Hour
() 圆括号。将值进行分组。 (i+5)
() 圆括号。传递参数。 x=Add(i,5)
[] 中括号。访问数组或者集合的值。 name[3]
! 非。真/假取反。 if (!ready)
&&|| 逻辑与。逻辑或。 if (ready && clear)if (ready || clear)
转换数据类型 从一种数据类型转换到另一种数据类型，有时候是很有用的。最常见的例子是将字符串输入转换为另一种类型，如整数或者日期。 一般规则下，都是将用户输入看做字符串处理，即使用户输入了数字。因此数值输入必须被转换成数字，然后才能将其用于计算。 下面列出了常用的转换方法：
方法 描述 实例
AsInt()IsInt() 转换字符串为整数。 if (myString.IsInt()) {myInt=myString.AsInt();}
AsFloat()IsFloat() 转换字符串为浮点数。 if (myString.IsFloat()) {myFloat=myString.AsFloat();}
AsDecimal()IsDecimal() 转换字符串为十进制数。 if (myString.IsDecimal()) {myDec=myString.AsDecimal();}
AsDateTime()IsDateTime() 转换字符串为 ASP.NET DateTime 类型。 myString="10/10/2012";myDate=myString.AsDateTime();
AsBool()IsBool() 转换字符串为布尔值。 myString="True";myBool=myString.AsBool();
ToString() 转换任何数据类型为字符串。 myInt=1234;myString=myInt.ToString();