ASP.NET MVC5入门之项目创建

1.创建项目

文件 --> 新建 --> 项目

ASP.NET MVC5入门之项目创建

Visual C# --> Web --> ASP.NET Web应用程序

ASP.NET MVC5入门之项目创建

      MVC此时处于选中状态,勾选“添加单元测试”(可选择)。

ASP.NET MVC5入门之项目创建

      完成以上步骤,基本的项目创建完成,此时点击“F5”可运行项目,如下图所示。(为方便标识,此后用url代替“localhost:20391”

ASP.NET MVC5入门之项目创建

 

 

MVC代表:模型-视图-控制器。

Models:标识该应用程序的数据并使用验证逻辑来强制实施业务规则的数据类

Views  :应用程序动态生成HTML所使用的模版文件

Controllers:处理浏览器的请求,取得数据模型,然后指定要响应浏览器请求的视图模版

 

2. 添加一个控制器类

(右击)Controllers文件夹 --> 添加 --> 控制器

ASP.NET MVC5入门之项目创建

选择“MVC 5 控制器-空”

ASP.NET MVC5入门之项目创建

为控制器添加名称

ASP.NET MVC5入门之项目创建

      添加后在Controllers文件夹中会多出文件“MvcMusicStoreController.cs”,并且在文件夹Views下会多出“MvcMusicStore”文件夹

目录结构如下所示:

ASP.NET MVC5入门之项目创建

 

      修改控制器“MvcMusicStoreController.cs”文件中的代码为:

      public class MvcMusicStoreController : Controller
      {
          public string Index()
          {
              return "This is my <b>default</b> action";
          }
  
          public string Welcome()
          {
             return "This is Welcome action method...";
         }
     }

      此时重新运行程序,地址栏输入“url/MvcMusicStore

ASP.NET MVC5入门之项目创建

 

3.数据路由

      ASP.NET MVC会调用不同的控制器类(和其内部不同的操作方法)这取决于传入URL。所使用的ASP.NET MVC的默认URL路由逻辑使用这样的格式来判定哪些代码以便调用:

      可在App_Start/RouteConfig.cs文件内通过配置URL路由解析规则:

     public class RouteConfig
     {
          public static void RegisterRoutes(RouteCollection routes)
          {
              routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  
              routes.MapRoute(
                  name: "Default",
                  url: "{controller}/{action}/{id}",
                 defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
             );
          }
     }

如果运行程序且不提供任何URL段,默认为“Home”的控制器和Index的操作方法,在上面的代码中的defaults部分指定

  •  第一部分的URL确定哪个控制器类会被执行。因此 /MvcMusicStore 映射到MvcMusicStoreController控制器类
  •  第二部分的URL确定要执行控制器类中的那个操作方法。因此 /HelloWorld/Index,会使得 MvcMusicStoreController控制器类的Index方法被执行。请注意,只需要浏览 /MvcMusicStore路径,默认情况下会调用Index方法。如果没有明确的指定操作方法,Index方法会默认的被控制器类调用。
  • 第三部分的URL段(Parameters参数)是路由数据

      浏览 url/MvcMusicStore/Welcome 。Welcome方法会被运行并返回字符串“this is the welcome action method...”。

      默认的MVC映射为 /[Controller]/[ActionName]/[Parameter]对于这个URL,控制器类是MvcMusicStore,操作方法是Welcome,此处并未用到[Parameters]部分。

 

此处对Welcome方法进行修改,并使用了C#语言的可选参数功能,numTimes参数在不传值时,默认值为1。

         public string Welcome(string name,int numTimes =1)
         {
             //return "This is Welcome action method...";
             return HttpUtility.HtmlEncode("Hello " + name + ",NumTimes is :" + numTimes);
         }

      此时运行应用程序并浏览次URL(url/MvcMusicStore/Welcome?name=Long&numtimes=4)

ASP.NET MVC5入门之项目创建

上面的例子,没有用到URL段参数的部分(Parameters)。通过query strings传递name和numTimes的参数

用下面的代码替换“Welcome”的方法:

    public string Welcome(string name,int ID =1)
    {
        //return "This is Welcome action method...";
        //return HttpUtility.HtmlEncode("Hello " + name + ",NumTimes is :" + numTimes);
        return HttpUtility.HtmlEncode("Hello " + name + ",ID:" + ID);
    }

ASP.NET MVC5入门之项目创建

这次URL第三部分的参数匹配了参数ID。

  

4.添加一个视图

      控制器的默认程序是:

    public ActionResult Index()
    {
        return View();
    }

      上面的Index方法使用一个视图模版来生成一个HTML返回给浏览器。控制器的方法(也被称为action method(操作方法)),如上面的Index方法,一般返回一个ActionResult(或从ActionResult所继承的类型),而不是原始的类型,如字符串。

      如果想使用控制器中默认的Index方法,则需要在对应的Views中添加视图文件。

      在Views/MvcMusicStore -->添加 -->“MVC5 View Page with(Layout Razor)”

ASP.NET MVC5入门之项目创建

      在指定项名称中,输入“Index”

ASP.NET MVC5入门之项目创建

 

      “选择布局页(select layout page)”-->"_Layout.cshtml"-->"确定",然后在解决方案资源管理器中看到View/MvcMusicStore/Index.cshtml文件。

ASP.NET MVC5入门之项目创建

ASP.NET MVC5入门之项目创建

      在Index.cshtml文件中添加以下代码

 @{
     ViewBag.Title = "Index";   
 }
 
 <h2>Index</h2>
 
 <p>Hello from our View Template!</p>

      运行并调试程序,得到界面:

ASP.NET MVC5入门之项目创建

 

5.修改视图和布局页

      首先,想要修改页面顶部的链接“Application name”。这段文字是每个页面的公用文字,即使这段文字出现在每个页面上,但是实际上它仅保存在工程里的一个地方。

      在解决方案资源管理器里找到 Views/Shared文件夹,打开_Layout.cshtml文件。此文件称为布局页面(Layout page),并且其他所有的子页面,都共享使用这个布局页面。

 

6.将数据从控制器传递给视图

      控制器响应请求来的URL。控制器类是写代码来处理传入请求的地方,并从数据库中检索数据,并最终决定什么类型的返回结果会发送回浏览器。视图模版可以被控制器用来产生格式化过的HTML从而返回给浏览器。

      控制器负责给任何数据或者对象提供一个必须的视图模版,用这个视图模版来Render返回给浏览器的HTML。最佳的做法是:一个视图模版应该永远不会执行业务逻辑或者直接和数据库进行交互。相应的,一个视图模版应该只和控制器所提供的数据进行交互。维持这种“隔离关系”。  

 public ActionResult Index()
 {
      return View("NotIndex");  
 }

对于这样的编码,操作方法依然在/Views/Home目录中查找视图,但选择的不再是Index.cshtml,而是NotIndex.cshtml。

如果需要制定完全位于不同目录结构中的视图,编码如下:

 public ActionResult Index()
 {
      return View("~/Views/Example/Index.cshtml");  
 }

 

7.添加一个模型

      Entity Framework(通常称为EF)是支持代码优先(Code First)的开发模式。代码优先允许通过编写简单的类来创建对象模型。

      在解决方案资源管理器,(右键单击)模型文件夹 --> 添加 --> 类

ASP.NET MVC5入门之项目创建

输入类名“MusicStore”,并为类添加属性: 

     public class MusicStore
     {
         public int ID { get; set; }
         public string SongName { get; set; }
         public string SingerName { get; set; }
         public DateTime PublishDate { get; set; }
         public decimal Price { get; set; }
     }
 

类中的每一个属性对应表中的每一列。在这个类中,添加下面的MusicStoreDBContext类:

     using System.Data.Entity;
 
     public class MusicStoreDBContext : DbContext
     {
         public DbSet<MusicStore> Movies { get; set; }
     }

      MusicStoreDBContext类代表Entity Framework的音乐数据库类,这个类负责在数据库中获取、存储、更新、处理MusicStore类的实例。MusicStoreDBContext继承自Entity Framework的DbContext基类。

 

8.SQL Server Express LocalDB

      LocalDB是一个SQL Server Express轻量级版本的数据库引擎。它在用户模式下启动、执行。LocalDB运行在一个特殊的SQL Server Express的执行模式,即允许能够使用MDF文件数据库。通常情况下,LocalDB的数据库文件都保存在web项目的App_Data文件夹下面。

      注:在生产环境的Web应用程序中,不推荐使用SQL Server Express。尤其是LocalDB不应该用于Web应用程序的生产环境,因为它没有被设计要使用IIS,但是LocalDB的数据库能很容易的迁移到SQL Server或SQL Azure。

      打开应用程序根目录的Web.config文件

ASP.NET MVC5入门之项目创建

找到数据库的连接设置代码:

   <connectionStrings>
     <add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;AttachDbFilename=|DataDirectory|\aspnet-MvcMusicStore-20170228045043.mdf;Initial Catalog=aspnet-MvcMusicStore-20170228045043;Integrated Security=True"
       providerName="System.Data.SqlClient" />
   </connectionStrings>

做如下修改:

   <connectionStrings>
     <add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;AttachDbFilename=|DataDirectory|\aspnet-MvcMusicStore-20170228045043.mdf;Initial Catalog=aspnet-MvcMusicStore-20170228045043;Integrated Security=True"
       providerName="System.Data.SqlClient" />
     <add  name="MusicStoreDBContext" connectionString="Data Source=(LocalDb)\v11.0;AttachDbFilename=|DataDirectory|\MusicStore.mdf;Integrated Security=True" providerName="System.Data.SqlClient"/>
   </connectionStrings>

 

 

9.从控制器访问数据模型

注:进行该步骤之前,应先编译程序,这样才可以使用之前的模型类及上下文类。

Controllers文件夹 --> 新增 --> Controller --> 选择控制器

ASP.NET MVC5入门之项目创建

设置模型类、数据上下文类并设置控制器名称。

ASP.NET MVC5入门之项目创建

完成以上步骤,Visual Studio会创建以下文件和文件夹:

  • 控制器文件夹中的MusicStoreController.cs文件
  • 项目视图文件夹下的MusicStore文件夹
  • 在新的Views/MusicStore文件夹中创建Create.cshtml、Delete.cshtml、Details.cshtml、Edit.cshtml和Index.cshtml文件。

 运行程序,url输入“url/MusicStore”

ASP.NET MVC5入门之项目创建