七、ASP.NET MVC入门到精通——第一个ASP.NET MVC程序

时间 2019-11-16

标签 asp.net asp mvc 入门精通第一个程序栏目 ASP 繁體版

原文原文链接

本系列目录：ASP.NET MVC4入门到精通系列目录汇总css

开发流程

新建Controller
建立Action
根据Action建立View
在Action获取数据并生产ActionResult传递给View。
View是显示数据的模板
Url请求→Controller.Action处理→View响应

url请求→Controller.Action处理→View响应html

开发环境：VS2012 、SQL Sserver2008jquery

一、打开VS，文件——新建项目Guestbook数据库

点击肯定后，会出现以下对话框，进行模版的选择，在这里你还能够选择是否建立单元测试，为了养成一个良好的习惯，这里我勾选了“建立单元测试项目”浏览器

这时会建立两个项目：Guestbook和Guestbook.Tests，将Guestbook设置为启动项目，而后，按Ctrl-F5或者调试——开始执行，运行程序，这时VS会自动启动ASP.NET开发者服务器，并随机分配一个端口，以便于咱们浏览ASP.NET程序。若是要指定这个项目端口，咱们能够进行以下设置：右击项目Guestbook——属性服务器

Ctrl-F5运行mvc

在解决方案资源管理器中，咱们能够看到这个默认应用程序为咱们自动新建了许多文件夹和文件，这是自动建立的项目模版，咱们能够参考这个模版进行开发，也能够把模版中一些没用的东西清理掉。app

接下来，我会一一解释下这个默认的项目模版的内容。asp.net

App_Data：用来存储数据库文件，xml文件或者应用程序须要的一些其它数据post

Content：用来存放应用程序中须要用到的一些静态资源文件，如图片和CSS样式文件。Content目录默认状况下包含了本项目中用到的css文件Site.css，以及一个文件夹themes ，themes 中主要存放jQuery UI组件中要用到的图片和css样式。

Controllers：用于存放全部控制器类，默认状况下该目录下面有两个控制器——HomeController（负责主页的请求处理），AccountController（身份证验证）。控制器负责处理请求，并决定哪个Action执行，充当一个协调者的角色。

Models：用于存放应用程序的核心类，数据持久化类，或者视图模型。若是项目比较大，能够把这些类单独放到一个项目中。目录中默认包含了一个AccountModels.cs.类，类中包含了一系列和身份验证相关的类，它是项目默认为咱们提供的一个模版。

Scripts：用于存放项目中用到的JavaScript文件，默认状况下，系统自动添加了一系列的js文件，包含jquery和jquery验证等js。

Views：包含了许多用于用户界面展现的模版，这些模版都是使用Rasor视图来展现的，子目录对应着控制器相关的视图。

Global.asax：存放在项目根目录下，代码中包含应用程序第一次启动时的初始化操做，诸如路由注册。

Web.config：一样存在于项目根目录，包含ASP.NET MVC正常运行所需的配置信息。

favicon.ico：存在于应用程序根目录，应用程序的图标文件，显示在浏览器，名称不能更改，可使用其它图片替换。

Controllers类和Action方法

咱们来看下默认的HomeController控制器

using System.Web.Mvc;

namespace Guestbook.Controllers
{
    public class HomeController : Controller //继承自Controller
    {
        /// <summary>
        /// Action方法，返回ActionResult
        /// </summary>
        /// <returns></returns>
        public ActionResult Index() 
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";//展示到视图中数据
            //~/Views/Home/Index.cshtml
            return View(); //展示指定的视图，当没有指定视图名称时，默认是指向根目录下Views文件夹中，子文件夹名称为当前控制器名称Home，视图名称和当前Action名称同样
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

HomeController经过继承Controller来表示它是一个控制器类，类名的后缀和Controller同样。控制器经过URL来识别执行的是哪个Action。

ViewBag本质上是一个字典，它提供了一种View能够访问的动态数据存储，这用到了.NET4.0的动态语言特性，你能够给ViewBag添加任意的属性，这个属性是动态建立的，你不须要修改类的定义，就能够从View中访问。

路由——映射URLS到Actions

在asp.net mvc中是如何将URLs映射到控制器中指定的Action的呢？

在Global.asax中 RouteConfig.RegisterRoutes(RouteTable.Routes);这里进行了路由规则的注册。

打开App_Start目录下面的RouteConfig.cs

using System.Web.Mvc;
using System.Web.Routing;

namespace Guestbook
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default", //路由名称
                url: "{controller}/{action}/{id}", //URL模版
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } //默认路由
            );
        }
    }
}

从这里能够看出应用程序启动的时候，默认是调用了HomeController控制器中的Index方法

因此咱们在地址栏输入http://localhost:8001/Home/Index 和 http://localhost:8001/访问的结果是同样的。

返回string的MVC方法

在Home控制器中，添加以下代码：

        public string Say()
        {
            return "Hello,World!";
        }

运行，在地址栏输入地址：http://localhost:8002/Home/Say，运行结果以下：

返回加载视图的方法

在Home控制器中，添加以下代码：

        /// <summary>
        /// 会 加载视图 的 Action方法，默认 加载 View文件夹中
        /// 与 控制器同名的 文件夹里的
        /// 与 Action方法同名的 视图
        /// </summary>
        /// <returns></returns>
        public ViewResult List()
        {
            return View();
        }

List视图

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>List</title>
</head>
<body>
    <div>
       <p>你好啊</p>
    </div>
</body>
</html>

简单了解Razor视图

咱们看到cshtml后缀的就是Razor视图了，在ASP.NET MVC中官方给出了两种默认视图，一种是ASPX（就是传统的WebForm），一种就是Razor了。

在视图中，咱们能够直接调用C#代码和代码块，只要在调用以前加一个@符号就能够了。代码块要用大括号括起来。

修改list视图代码

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>List</title>
</head>
<body>
    <div>
     @for (int i = 0; i < 100; i++)
     {
         <p>@i</p>
     }
    </div>
</body>
</html>

Razor引擎，会自动识别"<"符号，若是有“<"符号，就会当成html代码处理，若是是@符号就会当成C#代码处理。