【MVC 4】1.第一个 MVC 应用程序
作者：[美]Adam Freeman 来源：《精通ASP.NET MVC 4》
ASP.NET MVC 是微软的一个 Web开发框架，它整合了“模型—视图—控制器（MVC）”架构的高效与整洁、敏捷开发的最新的思想与技术以及当前ASP.NET 平台的精华部分。ASP.NET MVC 可以完全替代传统的 ASP.NET Form，除了一些微不足道的 Web 小项目之外，在各种 Web 开发项目中都有明显的优势。
废话不多说，开始第一个MVC应用程序吧。
1.准备工作站：
Visual Studio 2012，初学的话也可以使用微软提供的免费版 Visual Studio Express 2012 For Web 。
2.创建 ASP.NET MVC 新项目
(1)创建 ASP.NET MVC 新项目 PartyInvites,模板为 Empty 。【 New(新建) -> Project(项目) -> New Project(新项目)】
(2).添加第一个控制器，命名为 HomeController 【右击Controller文件夹 -> Add(添加) -> Controller(控制器)】
(3). VS 会在Controller 文件夹中创建一个 HomeController.cs 文件
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace PartyInvites.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
(4).修改代码代码如下：
public class HomeController : Controller
{
public string Index()
{
return "Hello,MVC";
}
}
(5).按 F5 调试，显示效果如下：
3.渲染 Web 页面
上面输出的只是一个字符串"Hello,MVC"。为了产生一个队浏览器请求进行相应的HTML，需要创建一个视图（View）。
(1)首先修改 Index 动作方法
public class HomeController : Controller
{
/*在MVC体系架构中，传入的请求是由控制器（Controller）处理的。
在控制器中的每一个 public 方法都称为一个动作方法 （Action Method），即可以用某个 URL 通过 Web 来调用它，以执行一个动作*/
public ViewResult Index()
{
//这里返回一个视图。
//视图是通过命名约定与动作方法相关联的。这个动作叫做"Index"，控制器叫做"Home"。
return View();
}
}
(2)这时运行调试，MVC会视图在"Views"文件夹中查找有这个名字的不同文件。
(3)创建视图文件 Index.cshtml 【右击 Index 动作方法(在方法名上或者方法体内) -> 添加视图】
(4)简单修改视图文件，显示文字 "Hello,MVC (Form the view)"
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
Hello,MVC (Form the view)
</div>
</body>
</html>
(5)运行效果如下
(6)添加动态输出，修改HomeController.cs 文件 Index 方法
public ViewResult Index()
{
int hour = DateTime.Now.Hour;
//ViewBag 是一种动态对象，Greeting 属性知道给其赋值的那一刻才会存在，其属性名 Greeting 可以用任意属性名来替代它，它会一样工作
//这里将一个值给 ViewBag.Greeting 属性时，便是为视图提供数据。
ViewBag.Greeting = hour < ? "Good morning" : "Good afternoon";
return View();
}
(7)修改 Index.cshtml 文件
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
Hello,MVC @ViewBag.Greeting (Form the view)
</div>
</body>
</html>
(8)运行效果如下
PS:Web 页面从服务器到浏览器的整个呈现的过程分为三步：
4. 创建一个简单的数据录入应用程序
(1)设置场景如下：
(2)添加模型类 GuestResponse 【右击 Models 文件夹 -> "添加" -> "类"】
public class GuestResponse
{
public string Name { get; set; }
public string Email { get; set; }
public string Phone { get; set; }
//这里设置WillAttend为一个 可空的的bool类型，意味着它可以是 true、false、null
public bool? WillAttend { get; set; }
}
(3)链接动作方法
a.添加一个指向 RSVP 表单的链接
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
Hello,MVC @ViewBag.Greeting (Form the view)
<p>We're going to have an exciting party.<br />
You can letter us by clicking the link @Html.ActionLink("RSVP Now","RsvpForm")</p>
</div>
</body>
</html>
PS:Html.ActionLink 是一个 HTML 辅助器方法，其作用是渲染一个超链接的 HTML 标记
b.如果现在点击这个链接，会看到404错误，这是因为还没有创建与这个/Home/RsvpForm 地址所对应的方法。可以把一个名为"RsvpForm"的方法加到 HomeController 类。
public class HomeController : Controller
{
public ViewResult Index()
{
int hour = DateTime.Now.Hour;
ViewBag.Greeting = hour < ? "Good morning" : "Good afternoon";
return View();
} public ViewResult RsvpForm()
{
return View();
}
}
c.添加一个强类型视图 RsvpForm 【右击方法名 -> 添加视图】
@model PartyInvites.Models.GuestResponse
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>RsvpForm</title>
</head>
<body>
<div>
</div>
</body>
</html>
PS: 强类型视图意在渲染一个特定的域类型，如果指定了想使用的类型，MVC将能够创建便于使用这个类型的便捷手段。
(4)建立表单，修改 RsvpForm.cshtml 视图文件如下
@model PartyInvites.Models.GuestResponse
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>RsvpForm</title>
</head>
<body>
@using (Html.BeginForm())
{
<p>Your name:@Html.TextBoxFor(x => x.Name)</p>
<p>Your email:@Html.TextBoxFor(x => x.Email)</p>
<p>Your phone:@Html.TextBoxFor(x => x.Phone)</p>
<p>
Will you attend?
@Html.DropDownListFor(x => x.WillAttend, new[] {
new SelectListItem() { Text = "Yes, I'll be there", Value = bool.TrueString },
new SelectListItem() { Text = "No, I can't come", Value = bool.FalseString } },
"Choose an option")
</p>
<input type="submit" value="Submit RSVP" />
}
</body>
</html>
(5)处理表单
a.在 HomeController 控制器类中添加一个支持POST请求的动作方法
using PartyInvites.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace PartyInvites.Controllers
{
public class HomeController : Controller
{
public ViewResult Index()
{
int hour = DateTime.Now.Hour;
ViewBag.Greeting = hour < ? "Good morning" : "Good afternoon";
return View();
} [HttpGet]
//GET 请求是某人点击一个链接时浏览器正常发出的请求。
//当有人第一次访问/Home/RsvpForm 时，这个动作版本负责显示最初的空白表单
public ViewResult RsvpForm()
{
return View();
} [HttpPost]
//默认情况下，用 Html.BeginForm() 渲染的表单是由浏览器作为一个 POST 请求递交的。
//这个动作版本负责接受所递交的数据，并决定用它做什么。
public ViewResult RsvpForm(GuestResponse guestResponse)
{
//TODO:对晚会的组织者发送 Email 响应
//这个View 方法的调用告诉MVC，查找一个名为"Thanks"的视图，并把GuestResponse 对象传递给这个视图
return View("Thanks",guestResponse);
}
}
}
b.右击方法名创建强类型视图 Thanks
c.修改视图文件Thanks.cshtml
@model PartyInvites.Models.GuestResponse
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Thanks</title>
</head>
<body>
<div>
<h1>Thank you, @Model.Name!</h1>
@if (Model.WillAttend == true)
{
@:It's great that you're coming. The drinks are already in the fridge!
}
else
{
@:Sorry to hear that you can't make it, but thanks for letting us know.
}
</div>
</body>
</html>
d.运行程序，效果如下：
(6)添加验证。现在，到了对应用程序添加验证的时候了。如果不做此事，用户可能会输入无意义的数据，甚至递交一个空白表单。
ASP.NET MVC 支持验证规则声明，验证规则是以 System.ComponentModel.DataAnnotations 命名空间中的注解属性进行定义的。
a.修改 GuestResponse 模型类如下：
using System.ComponentModel.DataAnnotations; namespace PartyInvites.Models
{
public class GuestResponse
{
[Required(ErrorMessage="Please enter your name")]
public string Name { get; set; } [Required(ErrorMessage="Please enter your email address")]
[RegularExpression(".+\\@.+\\..+",ErrorMessage="Please enter a valid email address")]
public string Email { get; set; } [Required(ErrorMessage = "Please enter your phone number")]
public string Phone { get; set; } [Required(ErrorMessage = "Please specify whether you'll attend")]
//WillAttend 属性使用了一个可空的 bool 类型就是为了可以运用 Required 验证注解属性
public bool? WillAttend { get; set; }
}
}
b.修改 RsvpForm 的POST 方法
[HttpPost]
public ViewResult RsvpForm(GuestResponse guestResponse)
{
if (ModelState.IsValid)
{
return View("Thanks", guestResponse);
}
else
{
//有验证错误
return View();
}
}
c.在 RsvpForm 视图中使用 Html.ValidationSummary （验证摘要）辅助器方法可以完成这种工作。
<body>
@using (Html.BeginForm())
{
@Html.ValidationSummary()
<p>Your name: @Html.TextBoxFor(x => x.Name)</p>
<p>Your email: @Html.TextBoxFor(x => x.Email)</p>
<p>Your phone: @Html.TextBoxFor(x => x.Phone)</p>
<p>
Will you attend?
@Html.DropDownListFor(x => x.WillAttend, new[] {
new SelectListItem() { Text = "Yes, I'll be there", Value = bool.TrueString },
new SelectListItem() { Text = "No, I can't come", Value = bool.FalseString } },
"Choose an option")
</p>
<input type="submit" value="Submit RSVP" />
}
</body>
d.运行效果如下：
e.一般我们需要高亮无效字段，这里用CSS文件实现，新建文件夹 Content ，并在文件夹中新建样式文件 Site.css 如下，并引用
field-summary-error {
color: #f00;
}
field-summary-valid {
display: none;
}
.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}
.validation-summary-errors {
font-weight: bold;
color: #f00;
}
validation-summary-valid {
display: none;
}
(7)完成示例
这个示例应用程序的最后需求是，将完成了的 RSVP 用电子邮件发给邀请的宾客和晚会的组织者。可以添加一个动作方法，使用.NET 框架的 E-mail 类来创建并发送一份邮件消息，以完成这一任务。
a.这里使用 WebMail 辅助器，修改 thanks.cshtml 视图文件如下：
@model PartyInvites.Models.GuestResponse
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Thanks</title>
</head>
<body>
<div>
@{
try
{
WebMail.SmtpServer = "smtp.example.com";//传送电子邮件的 STMP 服务器的名称
WebMail.SmtpPort = 587; //SMTP 事务的端口
WebMail.EnableSsl = true;//设置在发送电子邮件时使用安全套接字层（SSL）来加密链接
WebMail.UserName = "mySmtpUsername";//用于发送电子邮件的电子邮件账户名
WebMail.Password = "mySmtpPassword";//设置发件人电子邮件账户的密码
WebMail.From = "rsvps@example.com";//设置发件人的电子邮件地址
WebMail.Send("party-host@example.com","RSVP Notification",Model.Name+" is "+((Model.WillAttend??false)?"":"not")+" attending");
}
catch (Exception)
{
@:<b> Sorry - We couldn't send the email to confire your RSVP.</b>
}
}
<h1>Thank you, @Model.Name!</h1>
@if (Model.WillAttend == true)
{
@:It's great that you're coming. The drinks are already in the fridge!
}
else
{
@:Sorry to hear that you can't make it, but thanks for letting us know.
}
</div>
</body>
</html>
b.运行程序，收到消息邮件如下
(8) 源代码：PartyInvites.zip
【MVC 4】1.第一个 MVC 应用程序的更多相关文章
- Pro ASP.NET MVC –第二章 第一个MVC程序
学习一个软件开发框架的最有效的方式就是了解并使用它.在本章,你将会创建一个简单基于ASP.NET MVC Framework的数据-实体应用程序.我们会该程序划分成若干小块,每次介绍一个部分,以便你能 ...
- 【转载】ASP.NET MVC Web API 学习笔记---第一个Web API程序
1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过 ...
- ASP.NET MVC Web API 学习笔记---第一个Web API程序
http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...
- 创建一个MVC解决方案，添加一个控制器后，运行程序报错：”/"未找到服务器
1.创建一个MVC项目,如图
- 002.Create a web API with ASP.NET Core MVC and Visual Studio for Windows -- 【在windows上用vs与asp.net core mvc 创建一个 web api 程序】
Create a web API with ASP.NET Core MVC and Visual Studio for Windows 在windows上用vs与asp.net core mvc 创 ...
- Spring MVC框架下的第一个Hello World程序
本程序是一个maven程序,使用maven方便管理jar包和程序,简化了操作步骤.本程序的目的是通过一个简单的程序,了解Spring MVC框架的基本工作流程,由简入繁的学习Spring MVC框架, ...
- 创建第一个MVC应用程序
整个国庆期假,Insus.NET没有出门,在家静心修炼MVC.这意味着Insus.NET将来的日子里会以MVC为学习,开发,应用作为重点,不过现在才开始踏出第一步...... 路慢慢...... 下载 ...
- 第一个 MVC 应用程序（上半部分）（《精通 ASP.NET MVC5》 的第二章）
本章将使用 ASP.NET MVC 框架创建一个简单的数据录入应用程序. 笔者会将过程分解成一个个的步骤,以便能够看出如何构造 ASP.NET MVC 应用程序.(对于一些未进行解释的内容,笔者提供了 ...
- ASP.NET MVC 小牛之旅2：体验第一个MVC程序
了解了什么是MVC之后,接下来用一个非常简单的留言板程序概要的了解MVC网站开发的过程,对MVC开发有个大致的轮廓.第一个项目将不会提到过多与数据库相关的技术,因此将以Framework Code F ...
随机推荐
- [javaSE] java获取文件列表
递归测试 import java.io.File; import java.util.ArrayList; import java.util.HashMap; import java.util.Lis ...
- CSS应用内容补充及小实例
一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 收集oracle统计信息
优化器统计范围: 表统计: --行数,块数,行平均长度:all_tables:NUM_ROWS,BLOCKS,AVG_ROW_LEN:列统计: --列中唯一值的数量(NDV),NULL值的数量,数据分 ...
- Step by step configuration of Outgoing Emails from SharePoint to Microsoft Online
First of all your SharePoint server should be added to Microsoft online safe sender list, so that Sh ...
- 2014年听写VOA50篇
在沪江英语的VOA听写栏目上听写完成50篇,听写笔记PDF. 103.VOASP.2014奥巴马国情咨文(1-3).mp3 104.VOASP.2014奥巴马国情咨文(2-3).mp3 105.VOA ...
- [Android]Android Debug key 的制作
Android Debug key 的制作 背景 在Android App 开发过程中,我们经常会使用一些第三方的服务,但是很多的第三方服务都会要求我们提供包名,签名安装包,这时候,我们在日常调试时, ...
- Android 在外部存储读写文件
本文主要介绍android中如何在外部存储读写数据 sd卡的路径 sdcard:2.3之前的sd卡路径 mnt/sdcard:4.3之前的sd卡路径 storage/sdcard:4.3之后的sd卡路 ...
- iOS阅读器实践系列（一）coretext纯文本排版基础
前言:之前做了公司阅读类的App,最近有时间来写一下阅读部分的实现过程,供梳理逻辑,计划会写一个系列希望能涉及到尽量多的方面与细节,欢迎大家交流.吐槽.拍砖,共同进步. 阅读的排版用的是coretex ...
- CAS实现单点登入（sso）经典教程
本教程我已按照步骤实现,不过要深入了解单点登入还需要进一步的学习,掌握其中的精髓. 一.简介 1.cas是有耶鲁大学研发的单点登录服务器 2.本教材所用环境 Tomcat7.2 JDK6 CAS Se ...
- JAVA EE(简述)
一.平台概述 JavaEE的全称是Java Enterprise Edition,它是一个开发分布式企业级应用的规范和标准 Java 平台三个版本: Java ME(Java Micro Edit ...