首页 > 代码库 > mvc

mvc

2024-08-31 02:23:04   222人阅读

MVC4 razor与aspx的区别以及用法

--》

 在mvc中，空格还是有点区分的，比如  <input ....    如果写成 < input     则，是把他理解成文本的！！！切记！！！

Model要重，Controller要轻，View要够笨，mvc不希望在开发view时还需要判断过多的与view无关的技术，所以要尽可能的保持view逻辑简单。（以下中有出现代码的地方用了什么尖括号百分号标签这些字样是为了防止保存时被新浪博客给处理掉）

如果view选择aspx后缀的话
页面上都会出现很多夹杂后台代码与html的情况，而先前使用的“<尖括号%百分号%尖括号>”这种古老表示法会让html标签与.net代码区块混杂在一起，这样当页面变的复杂时，混合类代码的可读性就大大降低。

在mvc3之后view就引入了Razor语法，用俗称的小老鼠“@”符号来代表代码片段，搭配vs的语法高亮显示，razor语法也让整个view页面内的html标签与服务器代码结合的相当漂亮。
在mvc2.5当中如果要在页面上显示当前时间：
<尖括号%: DateTime.Now%百分号>

若使用razor语法，则是
@DateTime.Now

Razor并不是一个代码语言，只是一种用在view页面的代码区块撰写风格。
如果是c#来编写razor页面，后缀是cshtml
如果是vb.net来编写，后缀则是vbhtml

1，Razor基本语法
在页面上输出单一变量时，只要在c#语句前加上@符号
eg ：
<标签>
现在时间：@DateTime.Now
</标签>
注意：在输出单一变量时不需要加上分号结尾，但是如果再页面中输出一段空白子元或者运算子的结果时，则需要在前后加上一个小括号
eg:
<标签>
会员名称：@（user.Identity.Name+Model.MemberLevel）
状态：@(ViewBag.IsEnabled?"启用"：“停用”)
</标签>

在页面上执行多行代码时，必须在前后加上一个大括号
eg
@
{
var a=1;
var b="aaa"；
}
注意：@{}之间属于一个c#代码区段，在撰写代码时必须符合c#语言规范，也就是必须分号结尾。
如果要在多行后台代码的razor语法中插入html或者其他内容，必须在每一行最前面加上一个"@:"符号，在这个符号的这行代码里，也可以再加上其他razor变量
eg:
@
{
var name="aa";
@:您好， 我是@name
}

razar检视页面中表示注释，用“@*”与“*@”来当注释头尾，就不写范例了。
如果要在razor页面输出“@”符号，可以用@符号作为跳脱子元，比如@@aaa,输出@aaa

2,razor与html混合输出
if语句范例
@if(ViewBag.IsEnabled){
@:启用
}else{
@:停用
}
如果再if与else代码区块里放置大量的html标签，每行前面都要加"@:"有点麻烦,只要在代码区块的前后加上一组html标签就可以，（纯文字在razor的代码里会自动被视为c#语句，所以必须加标签）
@if(ViewBag.IsEnabled){
<标签>启用</标签>
}else{
<标签>停用</标签>
}

vs工具中的高亮提示，razor中c#代码是显示淡蓝色，如果是白底色的话就代表是razor意外的纯文字，razor会很智能的自动辨别是c#还是html，但是如果我们不想在这个区段出现任何的标签怎么办呢，在razor中使用特殊的<标签text>来代替这个html标签，最后输出到浏览器时就不会出现text标签，当然也可以在多行c#代码区段使用"@:" 或者text作为HTML与razor语法之间的切换


                         @{

                                if (string.IsNullOrEmpty(user.Gender))

                                {

                                    <input type="radio" name="gender" value="http://www.mamicode.com/男" /><text> 男13 </text><input type="radio" name="gender" value="http://www.mamicode.com/女" /> <text>女</text>

                                }

                                else if (user.Gender == "男")

                                {

                                    <input type="radio" name="gender" value="http://www.mamicode.com/男" checked="checked" /><text> 男13 </text><input type="radio" name="gender" value="http://www.mamicode.com/女" /> <text>女</text>

                                }

                                else

                                {

                                    <input type="radio" name="gender" value="http://www.mamicode.com/男" /><text> 男13 </text>

                                     <input type="radio" name="gender" value = "http://www.mamicode.com/女"  checked="checked"/><text>女</text>

 

 

    }

 

 

 

}












            @{

                                    string checkedIsxt = "";

                                    if (user.IsBackManager==1)

                                    {

                                        checkedIsxt = "checked=checked";

                                    }

                                    <input type="radio" name="isxt" value="http://www.mamicode.com/1" @checkedIsxt /><text>前台用户</text> 

                                    if (user.IsBackManager == 2)

                                    {

                                        checkedIsxt = "checked=checked";

                                    }

                                    <input type = "radio" name = "isxt" value = "http://www.mamicode.com/2"  @checkedIsxt  /><text>后台用户</text>  

 

                                    if (user.IsBackManager ==3)

                                    {

                                        checkedIsxt = "checked=checked";

                                    }

                                    <input type="radio" name="isxt" value="http://www.mamicode.com/3"  @checkedIsxt  /> <text> 前后台用户 </text>  <span id="genderSpan"></span>

                                } 

 

 

mvc布局页和分部页的简单使用--》

布局页

模板页结构 （添加--新建项--布局页）

<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>

@RenderSection("bottom",false) 
</body>
</html>
 
 
@ViewBag.Title 模板页的标题，在使用母版页的视图页可以设置标题；
@RenderBody() 母版页有且只能有一个RenderBody，引用页的 主体，就放在母版页的 这个位置；
@RenderSection 参数，false， 使用页面没有此section页不会报错；
总体上说：@RenderBody() 是一个特殊的占位符，引用页面的主体就放在这里；@RenderSection是一个灵活的占位符，放在母版页的需要位置，使用页面，使用@section 即可；




引用母版页的视图页结构
 
 
@{
    ViewBag.Title = "WelCome";
    Layout = "~/Views/parmodel/topDiv.cshtml";
}
 
<h2>热烈欢迎！</h2>
 
@section bottom{
    <script>
        function bottomMethod() {
            alert("test");
        }
    </script>
    }


========================================================================


 分部页

分部页结构（新建--新建项--分部页）

空的


使用的页面
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>WelCome3</title>
</head>
<body>
    <div> 
        真实的WelCome3页面。mvc添加的 【视图页】
        @Html.Partial("~/Views/parmodel/_PartialPage1.cshtml")
        @Html.Action("topdiv","system");
    </div>
</body>
</html>

 一般的视图，对应的有控制器，可以听过 viewdata 或者 viewbag传递数据。 母版页和分部页则可以通过，

@html.partial()

@html.action()


结合 后天actino 的  return view("viewname")可以动态使用公共页面和数据。 

mvc


联系
我们