ASP.NET MVC学习笔记(一) 从路由开始创建mvc

摘要:
ASP。NETMVC将首先进入Controllers目录以查找主控制器,然后查找About公共方法。这个公共方法是MVC动作,它也是实际运行的web程序的公共入口。因此,网站将从Controllers目录中找到Home控制器,找到Index公共方法,然后运行ASP。NET MVC。3) 该类必须包含多个返回值为“ActionResult”的公共方法。这些方法在ASP中称为Action。NET MVC。

  之前一篇写一半发现版本太老了,是基于mvc2的。

  两本参考书编写的顺序各方面都不太一样。决定重新写一篇。

  我这篇文章基于mvc5,vs2015

参考书:Will保哥的ASP.NET MVC4开发指南

一、创建一个项目

   ASP.NET MVC学习笔记(一) 从路由开始创建mvc第1张ASP.NET MVC学习笔记(一) 从路由开始创建mvc第2张

目录图解

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第3张

1.从路由开始

  ASP.NET MVC学习笔记(一) 从路由开始创建mvc第4张

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第5张

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace MvcGuestbook
{
    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 }
            );
        }
    }
}

 IgnoreRoute:目的是设定 *.axd等格式的文件不要通过ASP.NET运行,意义在于让webform和mvc文件可以在同一个平台独立运行互不干扰。

 MapRoute:MapRoute方法是定义mvc网址路由的最主要方式。

                  这一条路由定义了三个参数:

                  name:路由名称

                  uri:设置网址路径如何对应到控制器、动作与路由值

                  default:设置了{Controller}{Action}{Id}这三个路由参数的默认值

如下图网址

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第6张

其中{controller}是home,{action}是About。ASP.NET MVC会先进入Controllers目录找home控制器(homeController.cs文档),再找About公开方法,这个公开方法就是MVC的action,也是实际运行网页程序的公开入口。

如在浏览器中输入 http://localhost/ 想取得首页,由于网址路径部分没有任何属性,就会使用MapRoute的第三个参数(defaults)所设置的默认值来代替。因此网站会从Controllers目录查找Home控制器再查找Index这个公开方法,再进一步运行ASP.NET MVC。

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第7张

我们来看一下HomeController的属性:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcGuestbook.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

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

            return View();
        }

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

            return View();
        }
    }
}

  顺带补充controller类的规范:

1)必须用“Controller”结尾。

2)继承Controller基类(或实现IController接口)。

3)类中必须包含数个返回值为“ActionResult”的公开方法,这些方法在ASP.NET MVC中被称为Action。

  可以看到,在上述代码Index行为中,第一行的ViewBag.Message是一个动态型(daynamic)的对象,因此可以放进任意型别的数据进去,这些属性和值都可以在ASP.NET MVC的View中读取。

  ViewBag.Message = "Your application description page.";

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第8张

我们查看HomeController中Index的视图

      ASP.NET MVC学习笔记(一) 从路由开始创建mvc第9张ASP.NET MVC学习笔记(一) 从路由开始创建mvc第10张ASP.NET MVC学习笔记(一) 从路由开始创建mvc第11张

我们会发现Index.cshtml并不是一个完整的HTML页面,我们来看看主版面设置在哪里。

打开项目目录,我们会发现Views目录下有一个_ViewStart.cshtml文件

                                   ASP.NET MVC学习笔记(一) 从路由开始创建mvc第12张ASP.NET MVC学习笔记(一) 从路由开始创建mvc第13张ASP.NET MVC学习笔记(一) 从路由开始创建mvc第14张

  打开这个文件后里面只有三行代码。其中定义了Layout属性,并指向了"~/Views/Shared/_Layout.cshtml",默认所有View文件都会被装入该主板页面。打开_Layout.cshtml文件,我们不难发现里面的代码才是完整的HTML结构。

  至于我们在之前的Controller中看到ViewBag.Message被设置了一串字符串,到了Index.cshtml检视(View)就可以通过以下语法读出并显示于网页属性中。

@ViewBag.message

另外Index.cshtml页最上方设置了一组ViewBag.Title属性,这里定义的属性值也会被自动传入同一个View和以及默认的_Layout.cshtml主版页面

 ASP.NET MVC学习笔记(一) 从路由开始创建mvc第15张        ASP.NET MVC学习笔记(一) 从路由开始创建mvc第16张

2.创建数据模型

step1

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第17张

step2

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第18张

step3 定义出一个留言板所需的数据模型

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcGuestbook.Models
{
    public class Guestbook
    {
        public int Id { get; set; }
        public string 姓名 { get; set; }
        public string Email { get; set; }
        public string 内容 { get; set; }
    }
}

step4 生成一次解决方案确定没有问题

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第19张

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第20张

3.创建控制器、动作与检视

step1 我们这里不选择直接建空的控制器,我们选择利用基架(Scaffold)

 ASP.NET MVC学习笔记(一) 从路由开始创建mvc第21张       ASP.NET MVC学习笔记(一) 从路由开始创建mvc第22张

 

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第23张

step2

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第24张ASP.NET MVC学习笔记(一) 从路由开始创建mvc第25张

 

 ASP.NET MVC学习笔记(一) 从路由开始创建mvc第26张

step3

其实此时已经完成,我们只需要按f5开始调试就可以了。

输入网址,进行试验

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第27张

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第28张

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第29张

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第30张

  我们这个网站的页面功能还请大佬们自行测试一下,虽然我们没自行写代码但是程序确实已经完成了,mvc5的功能很是强大。

4.查看数据库属性

  上述网站调试中我输入过一组数据,这组数据肯定是被存到哪里了,那么我们来看下这些数据被放到哪里去了。

  我们点击解决方案资源管理器下面的显示所有文件按钮,就会显示出隐藏的文件,如下图。

                                                ASP.NET MVC学习笔记(一) 从路由开始创建mvc第31张

  我们点击那个按键后,App_Data下出现了一个 .mdf文件,这是一个数据库文档。

  其中,项目模板会先在web.config文档中创建一个DefaultConnection连接字符串。

  能在web.config中看到连接字符串演示

  <connectionStrings>
    <add name="DefaultConnection" connectionString="Data Source=(LocalDb)MSSQLLocalDB;AttachDbFilename=|DataDirectory|aspnet-MvcGuestbook-20170327110627.mdf;Initial Catalog=aspnet-MvcGuestbook-20170327110627;Integrated Security=True"
      providerName="System.Data.SqlClient" />
    <add name="MvcGuestbookContext" connectionString="Data Source=(localdb)MSSQLLocalDB; Initial Catalog=MvcGuestbookContext-20170327151548; Integrated Security=True; MultipleActiveResultSets=True; AttachDbFilename=|DataDirectory|MvcGuestbookContext-20170327151548.mdf"
      providerName="System.Data.SqlClient" />
  </connectionStrings>

  vs2015中,我们可以直接选择 MvcGuestbookContext-(日期).mdf 个文档,打开后可以自由的浏览或变更数据库架构。

 二、认识自动生成的代码

   之前代码均由mvc5自动生成,接下来让我们来了解下这些通过工具自动帮我们逐步生成的代码。

  1.了解列表Index()动作

  打开Controller目录下的GuestbookController.cs。

  其中第一行定义了MvcGuestbookContext类的私有变量,也就是我们的数据内容类。这整个Controller类都会用db这个变量对数据库进行访问

 private MvcGuestbookContext db = new MvcGuestbookContext();

  Index的公开程序代码很简单,只有一行。

  其中View()是来自Controller基类的一个辅助方法,该辅助方法有8个重载,其中第3个多载是传入一个model参数,此参数的对象数据会传给View使用。

                            ASP.NET MVC学习笔记(一) 从路由开始创建mvc第32张

  这里我们传入了db.Guestbooks.ToList(),代表着把所有Guestbooks回传的所有数据全部传入View中,让View里的程序去使用。接着,我们切换到Index动作方法(Action Method)对应的视图的检视页面(View Page)。

                            ASP.NET MVC学习笔记(一) 从路由开始创建mvc第33张

2.了解列表页面的Index检视

  在Views/Guestbook/Index.cshtml 检视页面的第一行,里面有一个@model声明,后面便是一个IEnumerable类,IEnumerable是Guestbook的集合对象。表示View会以用@model声明的类别为“主要模板”,在View里面的程序代码也会参考到该类别使用

@model IEnumerable<MvcGuestbook.Models.Guestbook>

 ASP.NET MVC学习笔记(一) 从路由开始创建mvc第34张

  接下来这段 ViewBag.Title的设置在本页中没有用到,而是要传给主版页面(Layout Page)用的,显示在HTML的Title卷标中

@{
    ViewBag.Title = "Index";
}

  下面一段代码是用来创建ASP.NET MVC链接的,链接显示为"Create New",而该链接将会链接到这页控制器的Create动作(Action),超链接的输出则由ASP.NET MVC负责。

<p>
    @Html.ActionLink("Create New", "Create")
</p>

   由于是列表页面,有<table>标签,会将页面输出成表格

    <tr>
        <th>
            @Html.DisplayNameFor(model => model.姓名)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Email)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.内容)
        </th>
        <th></th>
    </tr>

  @Html.DisplayNameFor()的主要用途是输出特定字段的显示名称,传入的参数是一个Lambda Expression表示法,该表示法里传入的model变量代表的正是我们在View里第一页设置的@model型别,所以我们可以在挑选字段的时候利用vs的Intellisense来帮助选择。@Html.DisplayNameFor()会默认直接输出属性名称。最后输出html页面如下:

<tr>
  <th>
       姓名
  </th>
  <th>
       Email
  </th>
  <th>
       内容
  </th>
  <th></th>
</tr>

  若要输出的显示名称和属性名称不同,则必须更改Guestbook模型类别的定义,在特定一个属性(Property)上加上一个System.ComponentModel命名空间下的DisplayName属性(Attribute),在我们这里将Email字段显示名称更改成“电子邮件地址”,如下:

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第35张

  修改完就可以直接f5运行网站。可以看到Email字段所输出的域名直接变成了“电子邮件地址”。显示的html代码如下:

<tr>
  <th>
       姓名
  </th>
  <th>
       Email
  </th>
  <th>
       电子邮件地址
  </th>
  <th></th>
</tr>

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第36张

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第37张

  View最后一段Code是一个数据来自Model对象的foreach循环。这里的Model对象是每个View都有的属性,代表的就是从Controller传过来的数据,而这个Model对象本身就是泛型类,也就是说这个Model对象的类会完全等同于你在View最上方用@model声明的类。

  代码如下,我们通过循环取出Model里的每条数据,每条数据的类型刚好是MvcGuestbook.Models.Guestbook的模型类型。

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.姓名)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Email)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.内容)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}

  刚刚是@Html.DisplayNameFor辅助方法,现在看到的是@Html.DisplayFor辅助方法,这段code被包含在@foreach循环中,所以传入@Html.DisplayFor的模型数据将会是循环内单条MvcGuestbook.Models.Guestbook模型的数据。

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第38张

  上述代码最后三行是edit,details,delete的链接,@Html.ActionLink()的用途是用来输出超链接的。

  @Html.ActionLink("Edit", "Edit", new { id=item.Id }),第一个"Edit"是链接显示的文字,第二个"Edit"是链接的目的Action名称,第三个是代表路由参数名称id。第三个代表路由参数名称的id会在mvc在输出超链接时,加上要传给下一页的路由参数,方便ASP.NET MVC知道你除了传入{Controller},与{Action}路由参数外,顺便给予{id}路由值。这里的{id}稍后将提及,在Edit动作时会提及。

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第39张

ASP.NET MVC学习笔记(一) 从路由开始创建mvc第40张

  我们来了解下创建窗体窗口的Create动作。

  切回到GuestbookControllers类里观察创建信息功能的动作的Action。控制器里有两个同名的Create方法,一个是给Http Get用的一个是给Http Post用的。

  值得一提的是,第二个Create有特别套用的一个HttpPost属性(Attribute),该属性告知ASP.NET框架此Action只接受Http Post过来的信息,这个属性又有另一个专有名词叫动作过滤器(Action Filter)或者动作选择器(Action Selector)

// GET: Guestbooks/Create
        public ActionResult Create()
        {
            return View();
        }
// POST: Guestbooks/Create
        // 为了防止“过多发布”攻击,请启用要绑定到的特定属性,有关 
        // 详细信息,请参阅 http://go.microsoft.com/fwlink/?LinkId=317598
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "Id,姓名,Email,内容")] Guestbook guestbook)
        {
            if (ModelState.IsValid)
            {
                db.Guestbooks.Add(guestbook);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(guestbook);
        }

  首先我们进入http://localhost:63471/Guestbooks/Index页面之后首先Http执行的方法一定是Get,因此第一个Create()动作会首先被ASP.NET MVC选中运行,并显示默认的Create检视页面(View Page)。

  切换至Create检视页面。

  了解创建窗体的Create 检视页面

@model MvcGuestbook.Models.Guestbook

  开头依旧来了个@model声明,声明此页面以MvcGuestbook.Models.Guestbook为主要模型

  接着出现了一个ASP.NET MVC的窗体声明与窗体内Html声明,代码如下:

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <h4>Guestbook</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.姓名, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.姓名, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.姓名, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.内容, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.内容, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.内容, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

  这里我们使用的是Html.BeginForm()辅助方法,该方法会输出<form>标签,而且用using包裹起来,如此便可以在using代码结束时让ASP.NET帮你补上<form>标签,而且必须以using包起来,这样就可以在using结束代码最后退出的时候让ASP.NET MVC帮补上</form>,以本页为例,最后输出的代码就是:

<form action="/Guestbook/Create" method="post">
  ...

</form>

 @Html.ValidationSummary(true, "", new { @ })是用来显示表单域发生验证失败时,显示的错误消息。

在这个创建信息的窗体中一共有三个字段,你会发现这三个字段的定义都差不多。

<div class="form-group">
            @Html.LabelFor(model => model.姓名, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.姓名, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.姓名, "", new { @class = "text-danger" })
            </div>
        </div>

@Html.LabelFor()用来显示特定字段的显示名称。和@Html.DisplayNameFor()类似,而用@Html.DisplayNameFor()只会输出域名,使用@Html.LabelFor()会输出包含<label>标签的域名。

@Html.LabelFor()和@Html.DisplayNameFor()的输出比较

Razor语法Html显示结果
@Html.DisplayNameFor(Model=>model.Email)电子邮件地址
@Html.LabelFor(Model=>model.Email)<Label for="Email">电子邮件地址<Label>

  ASP.NET中主要使用@Html.EditorFor来输出表单域,以此字段为例,输出的Html代码如下,这里出现的class属性是默认输出的,可以设计css样式来改变该输出字段的样式:

<input class="text-box single-line" name="姓名" type="text" value="" />

  最后一个@Html.ValidationMessageFor是用来显示字段验证的错误消息,不过到目前为止我们没有对Create页面进行任何字段验证的设置。

  

免责声明:文章转载自《ASP.NET MVC学习笔记(一) 从路由开始创建mvc》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇常用DOS命令Unity3D 游戏开发应用篇——每日登陆(持久化类实现)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Oracle EBS Form开发小技巧汇总

本文记录了一些在Form开发过程中积累下来的技巧: Form中提交并发请求 非数据库字段查询处理 控制Form为只查询 控制Item的属性 Trigger的执行层次 按钮处理逻辑 日历相关 1,Form中提交并发请求 在提交请求之前,首先需要验证块,如果某些必填项没有填的话当然不能提交请求。 [c-sharp]view plaincopyprint...

laravel框架使用生涯

手工安装laravel http://laravelacademy.org/resources-download 1、将下载的文件复制到虚拟主机目录 2、在Apache的配置文件配置一个虚拟主机【注意,需要指向 public目录下】 <VirtualHost *:80> DocumentRoot "C:phpStudyWWWlarav...

Java大文件分片上传/多线程上传组件

javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求     1. 通过form表单向后端发送请求          <form id="postForm" action="${pageContext.request.contextPath}/UploadServlet" m...

基于Python的Web应用开发实战——3 Web表单

第2章中介绍的 请求对象 包含客户端发出的所有请求信息。 其中, request.form 能获取 POST请求 中提交的表单数据。 尽管Flask的请求对象提供的信息足够用于处理Web表单,但有些任务很单调,而且要重复操作。 比如,生成表单的HTML代码和验证提交的表单数据。 Flask-WTF(https://flask-wtf.readthedocs...

spring mvc实现新增用户

spring mvc实现新增用户 1、先在展示页面(查询出来的结果页)添加一个连接<a href="http://t.zoukankan.com/add">添加</a> 2、在后台添加一个添加的方法,点击添加,是跳转到add.jsp页面,刚过去没数据,应该是get方法请求 @RequestMapping(value="/add",...

ant-design-vue 之form表单中label-col和wrapper-col使用

ant-design-vue 之form表单中label-col和wrapper-col使用 主要代码: :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }" demo: <template> <div> <a-form :form="form" &g...