zoukankan      html  css  js  c++  java
  • ASP.NET开发实战——(三)第一个ASP.NET应用《MyBlog》

      本文开始通过ASP.NET MVC创建一个博客应用,该应用是通过默认的MVC模板修改而来,所以创建的过程和代码都与默认模板一致,然后通过修改的方式将默认模板改为博客的主页,并添加博客列表、内容等页面。

      本文主要内容有:

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

    创建一个ASP.NET MVC应用程序

      在之前文章中介绍了ASP.NET中提供了3个开发动态网页的框架,分别是Web Form、MVC以及Web Pages,也大概介绍了它们的特点。
      其中MVC对于其它两种框来来说更容易测试并且也更容易维护,MVC是一种开发模式MVC分别表示model(模型)-view(视图)-controller(控制器)。

      Controller:这个类型用于处理来自浏览器的请求,获取数据发送给指定的View的类。
      Model:它代表应用程序里的数据模型的类。
      View:它是一个用于动态生产HTML的模板文件。

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

      

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

      

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

      

      4. 完成后将生成My Blog项目,以下是项目的默认目录结构:

      

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

      5. 点击VS2017的调试按钮调试程序:

      

      6. 运行结果:

      

    ASP.NET MVC默认代码介绍

      ASP.NET MVC已经为我们搭建了一个默认模板,提供了三个页面分别是Home、About以及Contact。

       

      从代码结构来看,项目中存在一个HomeController和ViewsHome目录下面的三个cshtml文件(注:Model在controller和view之间没有任何数据交换的情况下是可以省略的)。
      这里需要说明的是_ViewStart.cshtml是默认的布局文件,当存在全局_ViewStart.cshtml或者当前目录下存在该文件的时候会自动引用该文件(如果不同层级都存在该文件,那么使用离该页面最近的一个),具体内容后续说明,这里仅需要知道该文件为整个项目默认引用了一个布局文件。

      

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

      

      (在调试状态下)修改一下这个布局文件,或者说汉化一下,然后刷新:

      

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

      到此为止,已经为博客系统创建了一个ASP.NET MVC的项目。接下来将根据博客系统的需求来设计博客的列表页和文章页面。

    修改ASP.NET MVC模板的默认页面

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

      打开View目录下的Index,对其进行修改,修改效果如下:

      

       部分代码如下:

      

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

      

      上面代码是一个列表区域(连接仍然是微软的)。

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

      

      

       

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

      

      文章最开始的时候对Controller进行了说明:

      

      它用于处理来自浏览器的请求,上面上个方法刚好表示了之前页面上的主页--Index、关于--About、联系我们--Contact,这些方法也叫Action,在Controller中的Public方法会被自动识别为Action。如果在调试状态下可以在上面三个方法中设置断点、然后再次访问相应页面,相应的断点就会被命中:

      

      

      还记得最开始的关于页面有一个"Your application description page"的信息吗?这个信息就来自于这里,而不是直接录在页面上的。
      最初的页面代码:

      

      是不是感觉网站已经“动”起来了,它不再是HTML的硬编码,设想一下如果这个Message来自数据库或者一些配置文件,那么只需要修改数据库或者配置文件的值,那么页面也就随之而变了。

    创建博客Controller

      了解了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):

      

      运行结果:

      

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

      

    创建View Model来表示文章数据

      1. 在Models目录下添加一个Post类,并为其添加必要的属性:

      

      

      2. 在Controller中准备数据:
      首先定义一个静态Post列表,并往里添加多条数据作为数据源:

      

      然后在获取列表的方法中,将该列表的数据"传到"页面上:
      还记得之前的ViewBag.Message吗?

      

      这里要注意的是ViewBag是一个动态对象,可以对它添加任何的属性,所有属性在运行时解析:

      

      

      页面如何修改呢,直接上代码?(Razor语法参考:http://www.cnblogs.com/dengxinglin/p/3352078.html)

       

      运行结果:

      

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

      

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

      运行结果:

      

      功能完成,第一个ASP.NET MVC应用程序也就介绍到这里,这里实现最初分析的“读者”的查看目录和查看文章功能:

      

      文章的最后来解释一下为什么“localhost:52356/Post/Get/1”能够访问到文章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不存在则会抛出异常,更多关于路由的内容后续会详细介绍。

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

     

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

    欢迎关注我的公众号,不仅为你推荐最新的博文,还有更多惊喜和资源在等着你!一起学习共同进步!

  • 相关阅读:
    HDU 1863 畅通工程(Kruskal)
    HDU 1879 继续畅通工程(Kruskra)
    HDU 1102 Constructing Roads(Kruskal)
    POJ 3150 Cellular Automaton(矩阵快速幂)
    POJ 3070 Fibonacci(矩阵快速幂)
    ZOJ 1648 Circuit Board(计算几何)
    ZOJ 3498 Javabeans
    ZOJ 3490 String Successor(模拟)
    Java实现 LeetCode 749 隔离病毒(DFS嵌套)
    Java实现 LeetCode 749 隔离病毒(DFS嵌套)
  • 原文地址:https://www.cnblogs.com/cool2feel/p/11544449.html
Copyright © 2011-2022 走看看