技术文章

   本文开始通过http://ASP.NET MVC通过默认创建博客应用程序MVC模板被修改，因此创建的过程和代码与默认模板一致，然后将默认模板改为博客主页，并添加博客列表、内容等页面。

   本文主要内容如下：

   ●创建一个http://ASP.NET MVC应用程序 ●http://ASP.NET MVC默认代码介绍 ●修改http://ASP.NET MVC默认页面的模板 ●创建博客Controller ●创建博客页面 ●创建ViewModel表示文章数据

   在之前的文章中介绍http://ASP.NET它提供了三个开发动态网页的框架，即Web Form、MVC以及Web Pages，也大致介绍了它们的特点。 其中MVC另外两种框架更容易维护，更容易维护，MVC是一种开发模式MVC分别表示model(模型)-view(视图)-controller(控制器)。

   Controller：该类型用于处理浏览器的请求，并将数据发送给指定的数据View的类。 Model：它代表应用程序中数据模型的类别。 View：用于动态生产HTML模板文件。

   本章将开始介绍如何使用它http://ASP.NET MVC构建博客系统。 1. 使用VS2017创建一个MVC项目(注意不是http://ASP.NET Core)：

   2. 选择http://ASP.NET Web Application(.NET Framework)并输入项目名称：

   3. 选择MVC无身份验证模板(注:身份验证功能将在后续添加，此处无需添加此功能)。

   4. 完成后生成My Blog项目默认目录结构如下：

   以上三个红框的目录分别保存Controller、Mode、View其余内容Content、fonts、Scripts对应前端页面所需的样式表、字体和Javascript。暂时不需要了解其他目录和文件。

   5. 点击VS调试按钮调试程序：

   6. 运行结果：

   http://ASP.NET MVC默认模板已经为我们建立了三个页面Home、About以及Contact。

   从代码结构的角度来看，项目中有一个HomeController和ViewsHome目录下面的三个cshtml文件（注：Model在controller和view没有数据交换可以省略)。 这里需要说明的是_ViewStart.cshtml当存在全局时，是默认的布局文件_ViewStart.cshtml或者当文件存在于当前目录中时，它会自动引用文件（如果文件存在于不同层次，则使用离页面最近的文件）。具体内容后续说明仅需知道该文件默认引用了整个项目的布局文件。

   布局文件是Shared目录下的_Layout.cshtml：

   (在调试状态下)修改布局文件，或汉化，然后刷新:

   可以看到标题、导航和页脚的变化。

   到目前为止，它已经为博客系统创建了一个http://ASP.NET MVC项目。博客列表页和文章页面将根据博客系统的需要进行设计。

   1.将默认主页修改为列表页面：

   打开View目录下的Index，修改效果如下：

   部分代码如下：

   此处是主页banner，其中"@Html.ActionLink("关于我»", "Contact", "Home", new { @class = "btn btn-default" })"；该代码用于生成连接HomeController，Contact连接方法。

   上述代码为列表区域(连接仍为微软)。

   2. 最后，将关于和联系我们的页面修改为我们想要的内容(About和Contact页面)：

   注：到目前为止，可以在调试状态下修改页面修改操作，修改保存后刷新页面。 文章到这里可能会发现这还是静态的呀，和之前的有什么区别？都是修改HTML文件。 还缺乏文章查看页面，如何实现？ 接下来先分析一下Controller，看看现有的三页(主页，关于，联系我们)Controller如何处理默认创建的项目只有一个HomeController：

   文章开头是对的Controller说明:

   它用于处理浏览器的请求，上述方法只是表示页面上的主页--Index、关于--About、联系我们--Contact，也叫这些方法Action，在Controller中的Public方 ** 自动识别为Action。如果在调试状态下可以在上述三种方法中设置断点，然后再次访问相应的页面，则将命中相应的断点：

   我还记得最初关于页面的一个"Your application description page"；信息？这个信息来自这里，而不是直接记录在页面上。 最初的页面代码：

   你觉得网站已经移动了吗？它不再是了HTML的硬编码，设想一下如果这个Message从数据库或一些配置文件中，只需修改数据库或配置文件的值，页面就会发生变化。

   了解了View和Controller，然后你可以考虑博客的需求，文章列表和文章阅读，创建一个PostController：

   1. 右键Controllers目录--->Add--->Controller：

   2. 加空的MVC5 Controller(注Add Scaffold脚手架是根据添加脚手架翻译的T4模板动态生成代码，VS默认有两个脚手架，一个有read、write活动(action)的以及使用Entity Framework并且生成View的。更多可参考http://jingpin.jikexueyuan.com/article/9058.html):

   为Controller命名：

   PostController代码：

   同时也可以看到Views目录下创建了一个名字Post目前还没有空目录Post的View的。 现在为了实现需求，需要一种获取文章列表和查看文章内容的方法(注:一般使用Index作为默认页面，列表页面是文章功能的默认页面，因此可以添加文章获取方法）：

   为PostController的Index及Get Action添加页面的方法：

   使用默认设置(Action在调用return View()方法会被搜索和Action名称匹配的View)。此外，从使用布局文件的选项可以看出，如果使用默认文件_viewstart为了保持页面的一致性，默认使用之前的布局文件(如果使用布局文件被取消，则生成View它将是完整的HTML文件，包含head、body等标签)。

   页面代码：

   在导航上添加文章列表页面(布局文件)_Layout.cshtml)：

   运行结果：

   点击跳转到博客列表页面：

   1. 在Models在目录下添加一个Post类，并添加必要的属性：

   2. 在Controller准备数据： 首先定义静态Post列表并添加多个数据作为数据源：

   然后在获取列表的方法中，列表的数据"传到"；页面： 还记得以前的ViewBag.Message吗？

   这里要注意的是ViewBag它是一个动态对象，可以在运行过程中添加任何属性，并分析所有属性：

   如何直接修改页面代码？(Razor语法参考：http:// ** .cnblogs.com/dengxinglin/p/3352078.html)

   运行结果：

   同理修改文章查看action和页面：

   注：posts.where方法使用了.net提供的Linq根据文章使用功能ID在文章 ** 找到相应的文章对象，关于Linq可参考：https://baike.baidu.com/item/LINQ/4462670?fr=aladdin

   运行结果：

   功能完成，第一个http://ASP.NET MVC本文介绍了应用程序，实现了最初分析的读者查看目录和文章功能：

   在文章的最后，解释为什么localhost:52356/Post/Get可访问文章1： 在App_Start目录下RouteConfig.cs有这样一段代码：

   这个代码是为了MVC应用程序注册了一个路由，这个路由根据url匹配模板，然后映射到相应的模板Controller和Action而且默认Controller和Action是Home和Index，这就是为什么直接访问地址时会自动打开主页，而/Post/Get/1就代表了Controller是Post、Action是Get、参数id为1，以便找到上述定义Controller和Action如果Controller和Action如果不存在，就会抛出异常，后续会详细介绍更多关于路由的内容。

  小结： 本文主要简述http://ASP.NET MVC它演示了如何使用它VS2017创建一个http://ASP.NET MVC修改默认创建的应用程序，并添加自己的信息。另外创建了Post相关的Controller、View和Model，实现了文章列表的显示和查看功能。本应用程序将继续完善后续文章。

  若所思，欢迎添加个人微信号。

  欢迎关注我的微信官方账号，不仅给你推荐最新的博文，还有更多的惊喜和资源等着你！一起学习，一起进步！