0%

MVC5把bootstrap作为其中的一个组件,所以我们需要学习用它来做前台的开发。

引用

首先从bootstrap官方网站上下载它的发布包并解压到网站的根目录,然后在需要使用bootstrap的页面上添加样式表与javascript,如下面的代码所示:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="container-fluid">
               <h1>Hello world!</h1>
        </div>
        <script src="js/jquery-2.1.0.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

样式表添加<link rel="stylesheet" href="css/bootstrap.min.css" />,要放在head之间

javascript添加

<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>

最好放在页面内容后面,这里要注意的是bootstrap依赖于jquery,所以在引用bootstrap代码之前先添加jquery。

布局

container作为一个容器,它会设置一个合理的宽度,并把它包含的内容居中

row作为一行,col-md-4表示占据一行12列中的4列,根据屏幕大小的不同col-md-n中的md可以使xs(超小屏幕)、sm(小屏幕)、lg(大屏幕),md表示中等大小的屏幕。所以下面的代码可以在一些布局系统中看到:

<div class="container">
    <div class="row">
        <div class="col-md-4"></div>        
        <div class="col-md-4"></div>        
        <div class="col-md-4"></div>
    </div>
</div>

这里container是不能嵌套的,但是row这些都可以嵌套。

关于列,我们还可以做一下偏移,如<div class="col-md-4 col-md-offset-4"></div>表示一个四列的内容向右偏移4列。

css组件

javascript插件

实际上下面两个参考地址上的教程已经很详细了,我也就不写这个内容,等以后用多了再来写心得。

http://www.cnblogs.com/aehyok/p/3404867.html

http://v3.bootcss.com/getting-started/

有了孩子后,很多假期都跟着孩子的节奏了。早早地有幼儿园同学约着一起去绍兴玩,但是临时地又有班级同学过生日搞活动,所以,4月5日先是一大早去四顾屏(百度地图叫寺姑坪)爬山,期间有家长组织爬山比赛,下山跟同学们一起玩陀螺,钓鱼,烧烤,下午又驱车去绍兴跟另一拨同学会合。

小孩子有得玩是不怕累的,简单的追逐游戏就让他们满头大汗,乐此不疲。父母们对于二胎都是耿耿于怀,一个孩子的家庭几乎每个家庭都遇到小孩子没人玩的难题。此外,各行各业的父母在一起也算是一个小社会,聚会时也是神态各异,不过只有心态够开放,大家还是能够比较愉快地交流,大家的素质都还不错,唯一的问题就是都不是很熟而已。

清明的高速免费,所有有点忙。早上在广播上就听到杭金衢高速金华入口封闭的消息,有点担心下午路上会堵,但是下午3点多上去后发现还好,就是有一段似乎有多辆卡车低速占着道路,所以导致那段路有点慢,但是一过甬金高速入口就一马平川,杭金衢上似乎没什么人了,运气很好的是,伤心岭隧道刚好堵到诸永高速的入口,我们又愉快地走到诸永、绍诸,飞快地到了绍兴,居然吃晚饭的时间还绰绰有余。中间有个小插曲就是车开个120,发现方向有点发飘了,这是从来没有的现象,想起前几天前轮被钉子刺过,害怕前轮出问题,于是降速到90,车很好,这时候才想起刚才噪音很大,看看两边的毛竹也摇摆起伏,顿时明白,外面的风太大。

晚饭在同学的奶奶家吃的,非常丰盛,而且口味也是蛮绍兴的,几个爸爸喝了点小酒,一晚上妥了。会宾馆的路上发现了一个地方有人在唱歌,过去看看,唱的人蛮投入,下面还有观众,一曲唱完还有掌声,但是不太明白这是个什么东西,拍照来想仔细看,但是也看不出什么究竟,下次碰到绍兴的同学好好问问。

第二天去东湖玩,那个地方一进去才知道原来以前是来玩过的,大概刚工作那会。这次选择了乌篷船,也就这么地,小孩子坐坐玩的。午饭是在附近完成的,用的是百度地图的那个“附近”,还不错。回来过中兴路,好堵,苦于不认路一直听导航。终于憋不住,右转了,没想到发现了解放路,不就是昨天来的那条路嘛。于是很顺利地出城上高速。

绍诸、诸永、甬金然后来到外婆家,表姐也要过来。对木木来说,这个是最亲的姐姐了,而且姐姐也很照顾弟弟,所以能碰到姐姐也是件愉快的事情。果然,姐姐来了还热情地邀请木木去她家,并设想了n多的招待方案,不过最后木木妈妈没同意,也就作罢了。

明天,清明节就要结束了,多休息吧。

在上一篇我罗列了razor模板中四种替换方法,分别是RenderBody,RenderSection,RenderPage与Html.Partial,但是这看起来实现了相似功能的东西,其区别在哪里?今天这篇就以这个主题来讲讲。

  • RenderBody

RenderBody主要是实现模版页面也内容页面的合体,所以不用任何参数,就这个用。如我们访问index页面,那么就把index.cshtml与_ViewStart.cshtml合起来,用index.cshtml里面的内容来替代@RenderBody的部分。

  • RenderSection

RenderBody在一个布局页面里只能出现一次,所以有很多时候都是不过瘾的,因为我们有更多的内容需要替换,就出现了RenderSection。具体的用法就不说了,但是要注意一旦定义了Section,那么在内容页面就要有这么一个节@section SectionName { //todo },否则在RenderSection的时候要增加一个参数,表示不一定要有这个section,具体上一篇中已经提到过了。

  • RenderPage

RenderBody与RenderSection里面的内容都是放在内容页面里面的,也就是他们都在同一个cshtml中,但是有时候我们需要引入第三个文件,甚至这第三个文件还可以根据调用的参数的不同呈现出不同的形态,这个时候RenderPage就出现了。简单点的就这么用@RenderPage(“~/Views/Shared/_Header.cshtml”) ,复杂点的带参数的用法@RenderPage(“~/Views/Shared/_Header.cshtml”,new{parm="my",parm2="you") ,在接受页面里可以这样来接受参数@PageData["param"]

  • Html.Partial

在我写这一段的时候,我发现了Html下面还有很多类似的方法,如RenderPartial,RenderAction。这里有Render与没有Render的区别大概在于没有Render的一般用于静态的东西,它会把内容在内存中做一下缓存。

RenderPage与RenderPartial的区别大概在于RenderPage调用的页面只能使用其传递过去的数据。而RenderPartial是可以使用viewdata、model等数据的。

Html.RenderPartial和Html.RenderAction的区别在于:Html.RenderPartial适合用在重复使用的UserControl,并且只需要透过Model来呈现内容。Html.RenderAction则会先去呼叫Controller的Action方法,如果此UserControl是需要透过资料库取得资料来呈现(透过Action来读取资料库),此时会比较适合使用此方式。

通过这上下两篇,我们主要是把razor里面模板替换的各种方法解析了一下,但是对于razor的整体的语法还是没有提到,这里就简单地抄一下w3chtml上的内容。

C# 的主要 Razor 语法规则:

  • Razor 代码封装于 @{ ... } 中
    
  • 行内表达式(变量和函数)以 @ 开头
    
  • 代码语句以分号结尾
    
  • 字符串由引号包围
    
  • C# 代码对大小写敏感
    
  • C# 文件的扩展名是 .cshtml
    

例子:

单行代码块:@{ var myMessage = "Hello World"; }

行内表达式或变量:<p>The value of myMessage is: @myMessage</p>

多行语句代码块:

@{
var greeting = "Welcome to our site!";
var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Here in Huston it is: " + weekDay;
}
<p>The greeting is: @greetingMessage</p>

上述网站对razor的用法什么的还是讲得很详细,所以关于razor的其他内容就不在赘述了。下一步是进入到MVC的内部的时候了,不过MVC5里用了bootstrap,如果不了解好像也不够意思,有时间也讲讲。

现在的asp.net网站开发中用master模板还是比较多的,毕竟它跟原来的asp.net用法接近,学习成本很低,而且作为页面布局也够了。它最大的问题可能就是灵活性了,随着MVC的流行,razor模板大有取代master的趋势。razor提供了更灵活的写法,也使一般前端页面有更方便的调用后台代码的功能,大有超越code behind,回归asp时代的感觉,是微软网站开发技术的否定之否定。

razor页面的调用逻辑

在采用razor作为模板技术的网页中,默认的在View文件夹内有一个_ViewStart.cshtml文件(这个cshtml扩展名非常有意思,“c sharp html”可以使用c#编程语言的html文档,这个html绝对牛b),这个文件就是网页的默认模版,在这个网站的所有页面不用任何声明就是以该文件作为模版而创建的。顺便说一下,如果不希望用默认的模板怎么办呢?在页面上写上以下类似语句:Layout = "~/Views/Shared/_GreenLayout.cshtml"

模版是作为公共部分而存在的,那么特殊部分是如何引入的呢?

  • RenderBody

在_ViewStart.cshtml中有个@RenderBody(),这个代码的意思,该网页的主体部分就由这个语句引入,在模版页面里该代码只能使用一次,并且不用参数。但是一个模板只能有一个部分可以由外部引入,那太不灵活了,估计就没人会有兴趣用,master模板都比它强多了,所以@RenderSection就出来补充它了。

  • RenderSection

RenderSection是_ViewStart.cshtml模版中的占位符,哪里需要内容,就在哪里出现,跟RenderBody不同的是,它是需要参数的如@RenderSection("Menu")——在这个地方插入一个菜单,而且是必须的(默认是必须的),引用该模版的页面如果没有的话就会报错。当然如果不是必须的,那就应该这样写@RenderSection("Menu",false),意思就是说,你看着办吧。

  • RenderPage

RenderPage顾名思义是引入一个页面,使用的方式如@RenderPage(“~/Views/Shared/_Header.cshtml”),看起来没什么难度。

  • Html.Partial

三个看起来很像的Render兄弟之外,razor还提供了另一个引入其他页面的方法Html.Partial,如 @Html.Partial("_ExternalLoginsListPartial", new { Action = "ExternalLogin", ReturnUrl = ViewBag.ReturnUrl })这样的存在,看起来很高大上。

看完了这四个类似的方法确实解决了页面特殊部分的引入问题,但是这四者的区别在哪里呢?且听下回分解。

无意中发现一个网页幻灯片框架,根据他的介绍,比prezi还牛,因为prezi是基于flash的,而它是基于html的。

顾名思义,他是一个用html来实现幻灯片效果的东东,这类产品以前也接触过一些,还是蛮好玩的,但是他们的代价就是需要自己写代码,因而是Geek的玩物。不过这款产品有更加高端的特性——手势识别。kinect大家用过的,它的识别主要是通过多个摄像头得到3d数据来识别人体的活动的。REVEAL.JS牛逼的地方就在于他用普通电脑自带的摄像头,实现通过手势来实现幻灯片的上下左右的翻动。这里是它的地址,注意要用chrome浏览器。

下午要给学生讲网页程序的各种验证,顺便就把自己的机器弄了个花生壳解析出去。奇怪的事情就是用apache、ror、nodejs都可以解析出去,iis的网站却不能解析。而且我还用apache程序试了试80端口,没有问题,所以我丝毫不怀疑是防火墙的问题。实在没办法在防火墙里添加了一个规则,让80端口开放,iis网站居然ok了。

今天开始把www.wanglianghui.cn这个姓名域名用起来了,原来的wanglh.cn想想还是不要用算了。不过还有两年到期,到时候也做个转向到这个网站吧。