.NET MVC 实例教程(二)
2013-07-22 14:16
225 查看
原创作品,允许转载,转载时请务必以超链接形式标明文章
原始出处 、作者信息和本人声明。否则将追究法律责任。
作者:永恒の_☆ 地址:http://blog.csdn.net/chenghui0317/article/details/9407847
一、MVC的route执行规则配置
打开之前创建好的mvc项目,在根目录找到Global.asax文件,这里面定义了我们整个项目如何根据接收到的请求 跳转到对应的控制器,执行对应的方法的规则。
如下:
其实,这里可以把它当成是javaee里面的核心控制器,所有的请求都要经过这个Routing 规则 指定 接下来怎么走。
二、创建MVC的Controller控制器
根据上面的配置,在浏览器输入:http://localhost:1950 ,那就默认调用Home控制器下(实际的controller是HomeController 统一约定去掉Controller这个后缀)的,Index 动作方法。
接下来看一下HomeController:
在Index()方法中看到ViewBag 这个类,鼠标悬浮看到的注释是dynamic ControllerBase.ViewBag ,即 动态控制器包里面的一个试图包,通过它可以自定义任何类型的变量,然后在view中取出来,这里定义变量名是Message
三、创建MVC的View视图
前台View中的Index页面可以看到:<h2>@ViewBag.Message</h2>这样取值,我们从后台取值都是通过@符号来取值的,同时这里的Message也是不区分大小写的。
在浏览器中中显示:
这样子传递参数给前台,省略了之前每次都要通过request session等内置作用域传递的麻烦方式。而且用起来非常方便,易于去维护。
这样子的话,一个mvc的简单实现算是实现了,但是如果在action方法中,没有找到对应的方法,怎么办呢?
我们试一下调用 NoView()这个方法,结果显示如下图:
由此可以看出,mvc控制器它执行完action方法之后,它最开始去Views下的Home去找 NoView.aspx文件,如果有就显示页面,反之去找Home下面的NoView.ascx页面,一直往下面去找,直到上面所有的页面都没有找到的时候就抛异常了。
四、MVC的布局方式
接下来 再说一下mvc的布局
在Views目录下的Shared中找到_Layout.cshtml ,这个可以看做是一个模板,在我们需要显示具体的页面的地方加上@RenderBody()就可以了,然后所有的页面默认都会套用该模板了,如下图:
另外的,这个是默认的模板,如果不想用这个模板,可以在顶部手动修改模板文件,比如:
五、view视图层的cshtml页面的简单语法
其实 这和java或.net的<%%>小脚本基本一样,只不过表示方式不一样罢了,MVC用的@{}这样子的语法。
@{这里面是小脚本}:
@* 这里面是多行注释*@
@变量名 直接输出自定义变量的值
等等 很多。
先来看一个简单的例子:
效果如下图:
六、服务器端的控件
接下来说下 服务器端的控件,这个和webform 里面不一样 ,不用每次需要一个控件就定义一个控件对象,在MVC视图的cshtml页面中直接使用@Html 后面加上控件的类别名称 以及参数就可以了。可以看一个例子来说明:
效果如下图:
ok,这样子 ,我们就可以完成一些简单的MVC功能的开发了。
原始出处 、作者信息和本人声明。否则将追究法律责任。
作者:永恒の_☆ 地址:http://blog.csdn.net/chenghui0317/article/details/9407847
一、MVC的route执行规则配置
打开之前创建好的mvc项目,在根目录找到Global.asax文件,这里面定义了我们整个项目如何根据接收到的请求 跳转到对应的控制器,执行对应的方法的规则。
如下:
public static void RegisterRoutes(RouteCollection routes) { //忽略对.axd文件的Route,也就是和WebForm一样直接去访问.axd文件 routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( "Default", // Route name 顾名思义,可以定义多个route规则,用name区分 //这里的url会根据参数跳转到对应的controller,访问对应的action方法,然后访问的页面,按照约定应该是在Views下面的{controller}下的{action}文件显示。 //最开始感觉这个id没什么用 并且后面随便输入任意字符后可以访问action,后来发现这里可以根据具体的参数返回不同的视图 //这里就和javaee的mvc不一样了,如果要做成一样也不是不可以,只不过核心控制器那里的逻辑判断要发生改变了 "{controller}/{action}/{id}", // URL with parameters //如果没有指定具体的url,比如http://localhost:1950 那么将进入home的控制器,处理index的请求 new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults ); } protected void Application_Start() { AreaRegistration.RegisterAllAreas(); RegisterGlobalFilters(GlobalFilters.Filters); //在程序启动的时候注册我们前面定义的route规则 RegisterRoutes(RouteTable.Routes); }
其实,这里可以把它当成是javaee里面的核心控制器,所有的请求都要经过这个Routing 规则 指定 接下来怎么走。
二、创建MVC的Controller控制器
根据上面的配置,在浏览器输入:http://localhost:1950 ,那就默认调用Home控制器下(实际的controller是HomeController 统一约定去掉Controller这个后缀)的,Index 动作方法。
接下来看一下HomeController:
public class HomeController : Controller { //Home控制器,根据请求的url跳转到对应的action中,执行方法, //比如:/Home/Index Home表示HomeController控制器,Index表示执行的方法。 //另外方法执行完毕之后return View() ,默认表示返回Views/Home/Index.cshtml,aspx等等一系列后缀的文件。 //如果加了参数,表示调用指定字符串的文件,并且参数不区分大小写,也就是说写index一样可以实现。如果不加参数,表示调用以Index action动作为名字的view //这里默认是get请求方式,加上[httpGet]更加明显。 public ActionResult Index() { ViewBag.Message = "Welcome to ASP.NET MVC!"; return View("Index"); } public ActionResult About() { return View(); } public ActionResult NoView() { return View(); } }
在Index()方法中看到ViewBag 这个类,鼠标悬浮看到的注释是dynamic ControllerBase.ViewBag ,即 动态控制器包里面的一个试图包,通过它可以自定义任何类型的变量,然后在view中取出来,这里定义变量名是Message
三、创建MVC的View视图
前台View中的Index页面可以看到:<h2>@ViewBag.Message</h2>这样取值,我们从后台取值都是通过@符号来取值的,同时这里的Message也是不区分大小写的。
在浏览器中中显示:
Welcome to ASP.NET MVC!
这样子传递参数给前台,省略了之前每次都要通过request session等内置作用域传递的麻烦方式。而且用起来非常方便,易于去维护。
这样子的话,一个mvc的简单实现算是实现了,但是如果在action方法中,没有找到对应的方法,怎么办呢?
我们试一下调用 NoView()这个方法,结果显示如下图:
由此可以看出,mvc控制器它执行完action方法之后,它最开始去Views下的Home去找 NoView.aspx文件,如果有就显示页面,反之去找Home下面的NoView.ascx页面,一直往下面去找,直到上面所有的页面都没有找到的时候就抛异常了。
四、MVC的布局方式
接下来 再说一下mvc的布局
在Views目录下的Shared中找到_Layout.cshtml ,这个可以看做是一个模板,在我们需要显示具体的页面的地方加上@RenderBody()就可以了,然后所有的页面默认都会套用该模板了,如下图:
<!-- 这是一个整体布局的页面,在div id为main的地方控制显示页面,另外如果这个页面被当成模板来使用,将不能被导入,否则违背了套用模板的原则 --> <!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> </head> <body> <div class="page"> <div id="header"> <div id="title"> <h1>My MVC Application</h1> </div> <div id="logindisplay"> @Html.Partial("_LogOnPartial") </div> <div id="menucontainer"> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("User", "Index", "User")</li> </ul> </div> </div> <div id="main"> @RenderBody() </div> <div id="footer"> </div> </div> </body> </html>
另外的,这个是默认的模板,如果不想用这个模板,可以在顶部手动修改模板文件,比如:
@{ ViewBag.Title = "Home Page"; Layout = "~/Views/Shared/_Layout.cshtml"; //默认路径,可以不用指定的 }
五、view视图层的cshtml页面的简单语法
其实 这和java或.net的<%%>小脚本基本一样,只不过表示方式不一样罢了,MVC用的@{}这样子的语法。
@{这里面是小脚本}:
@* 这里面是多行注释*@
@变量名 直接输出自定义变量的值
等等 很多。
先来看一个简单的例子:
@{ //当行注释 @* 多行注释 *@ //声明变量 区分大小写 int id = 100; var ID = 101; string Name = "大写名称"; string name = "变量区分大小写"; } <div>@id</div> <div>@ID</div> <div>@Name</div> <div>@name</div> <div>Hi@Name Hi @Name</div> <!-- 从显示的结果可以看出 @{}里面定义的变量是区分大小写的,并且在取值的@前面不能有字符。 --> <div>这里是字符串拼接开始@{@Name}E结束</div> <div>for循环: @{ for (int i = 0; i < 10; i++ ) { @:@i @*在这里会输出i的值,和在html标签中使用@i是一样的*@ } } </div> <div> 这里通过@可以声明特殊的字符串变量 输出双引号时,前面要多加一个双引号转义。 @{ var Password = @"""123456!@#$%^\"""; } </div> <div> @Password </div> <div> 这里是转义输入@@ ,和java的\异曲同工: @@ </div>
效果如下图:
六、服务器端的控件
接下来说下 服务器端的控件,这个和webform 里面不一样 ,不用每次需要一个控件就定义一个控件对象,在MVC视图的cshtml页面中直接使用@Html 后面加上控件的类别名称 以及参数就可以了。可以看一个例子来说明:
<div>服务器端TextBox: @Html.TextBox("txtUserName")</div> <div>服务器端Password: @Html.Password("txtUserName")</div> <div>服务器端Label: @Html.Label("txtUserName", "显示值")</div> <div>服务端SelectedListItem @{ //下拉列表的值 List<SelectListItem> selectList = new List<SelectListItem>(); selectList.Add(new SelectListItem { Value = "1", Text = "列表项一" }); selectList.Add(new SelectListItem { Value = "2", Text = "列表项二" }); } @Html.DropDownList("ddlList", (SelectList)new SelectList(selectList.AsEnumerable(), "Value", "Text")) </div> <div>服务器端ReadioButton: @Html.RadioButton("rdo", "男")</div> <div>服务器端CheckBox: @Html.CheckBox("chk")</div> <div>服务器端链接: @Html.ActionLink("链接","Index")</div> @* 导入页面,如果在layout为下面的路径,就是全局设置 并且一旦导入了,就不能作为 全局模板使用,即不能使用 *@ @Html.Partial("~/Views/Shared/Error.cshtml")
效果如下图:
ok,这样子 ,我们就可以完成一些简单的MVC功能的开发了。
相关文章推荐
- Asp.net实现MVC处理文件的上传下载功能实例教程
- .NET MVC 实例教程(一)
- Asp.net实现MVC处理文件的上传下载功能实例教程
- [翻译:ASP.NET MVC 教程]创建一个控制器
- [翻译:ASP.NET MVC 教程]创建一个动作
- asp.net MVC + linq to Entity简单教程(二)MVC的简单操作
- ASP.NET MVC案例教程(基于ASP.NET MVC beta)——第六篇:拦截器
- ASP.NET MVC案例教程(五)
- ASP.NET MVC 重点教程一周年版 第九回 HtmlHelper
- ASP.NET全栈开发教程之在MVC中使用服务端验证的方法
- ASP.NET MVC案例教程(基于ASP.NET MVC beta)——第五篇:MVC整合Ajax
- 自学MVC看这里——全网最全ASP.NET MVC 教程汇总
- [Net_Ghost] WPF实例教程(5)
- ASP.NET MVC案例教程(基于ASP.NET MVC beta)——第五篇:MVC整合Ajax
- ASP.NET MVC案例教程(三)
- 自学MVC看这里——全网最全ASP.NET MVC 教程汇总
- Asp.NET误人子弟教程:在MVC里面结合JQ实现AJAX
- ASP.NET MVC Music Store教程(4):模型和数据访问
- ASP.NET Web API教程 创建Admin控制器实例分享
- ASP.NET MVC 重点教程一周年版 第九回 HtmlHelper