ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

https://blog.csdn.net/qq_21419015/article/details/80420815

第一个MVC应用程序

1创建MVC项目

打开VS ，File--新建--项目，选择ASP Web项目，命名后确认。选择（Empty）空模板，

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

项目创建完成，会看到解决方案管理器窗口显示一些文件夹，如图，这是一个MVC的默认结构

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

2 添加第一个控制器

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

右键解决方案中的“Controllers”文件夹，从弹出菜单选择 “添加”->“控制器”如上图所示；

添加后出现下图，单击“Add（添加）”按钮

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

这是打开控制器对话框，命名为“Home Controller”，点击添加。

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

VS会在Controllers文件夹下创建一个新的C#文件，名称为"Home Controller.cs"，这个类如下图所示；

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

3 创建Web界面

创建web界面，在Index界面任意地方右键，从弹出菜单选择“Add View(添加视图)”，如下图：

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

Index.cshtml 基本内容如下所示：

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

其中：

@{
Layout = null;
}

这是一个将由Razor视图引擎进行解释的表达式，Razor引擎处理视图内容并生成发送给浏览器的HTML。这是一个简单的Razor表达式，他告诉Razor未选用布局，以后在详细介绍。对该页面添加内容。

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

调试后出现界面如下

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

4 添加显示内容

渲染：视图引擎解释视图文件，转化为html文件；

传递：将渲染后的html标记传给客户端；

呈现：浏览器将html标识显示为web页面。

将数据从控制器传递给视图的一种方法是使用 ViewBag （视图包）对象，ViewBag 是Controller基类的一个成员。

public ViewResult Index()

{
　　int Hour = DateTime.Now.Hour;
　　ViewBag.Greeting = Hour < 12 ? "Good Morning" : "Good afternoon";
　　return View();
}

Greeting属性直到对其赋值的那一刻才会形成。

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>Index</title>

</head>

<body>

<div>

@ViewBag.Greeting World(From the view)

</div>

</body>

</html>

注意：Greeting 可以是任意名称，你也可以写成 @ViewBag.name 只要和Index界面对应就可以实现值传递。

效果如下：

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

5 创建一个简单的数据录入程序

场景设置：假设朋友准备举办一场聚会，设计一个Web应用程序，对受邀人进行电子回复（RSVP）；

一个显示晚会信息首页
一个用来回复(PVSP)的表单
对RVSP表单验证，显示一个感谢画面
界面 Views/Home/Index.cshtml 文件添加内容：

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>Index</title>

<link href="~/Content/Style.css" rel="stylesheet" />

<link href="~/Content/bootstrap.css" rel="stylesheet" />

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

</head>

<body>

<div class="text-center">

@ViewBag.Greeting World(From the view)

<h2>

我们将会有一个愉悦的party

</h2>

<h3>您是否参加？</h3>

<div class="btn btn-success">

@Html.ActionLink("PVSP Now", "RvspForm")

</div>

</div>

</body>

</html>

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

设计一个数据模型：

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

添加模型类：

MVC 约定是将建立模型的类放在“Models”文件夹下。

右键“解决方案”窗口文件夹“Models”，从弹出窗选择“添加”--“类”，文件名设置为“GuestResponse.cs”，单击添加按钮，创建这个类编辑如下：

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

链接动作方法
在Index.cshtml 添加一个指向RSVP表单的链接；

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>Index</title>

<link href="~/Content/Style.css" rel="stylesheet" />

<link href="~/Content/bootstrap.css" rel="stylesheet" />

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

</head>

<body>

<div class="text-center">

@ViewBag.Greeting World(From the view)

<h2>

我们将会有一个愉悦的party

</h2>

<h3>您是否参加？</h3>

<div class="btn btn-success">

@Html.ActionLink("PVSP Now", "RvspForm")

</div>

</div>

</body>

</html>

Html.ActionLink 是HTML辅助器方法。MVC框架附带一组内置的辅助器方法。可以方便地用来渲染HTML的链接，文本输入，复选框以及其他内容。

ActionLink一共两个参数：显示文本、动作。此时单击该链接会报404错误，因为还没有 /Home/RsvpForm 该界面。

在HomeController类中添加一个“RsvpForm”的方法完成。

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

添加强类型视图

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

建立表单
编辑这个RvspForm.cshtml 。

@model MVCStudy.Models.GuestResponse

@

{

	Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

                              <title>RvspForm</title>

                              <link href="~/Content/bootstrap.css" rel="stylesheet" />

                                      <link href="~/Content/bootstrap.css" rel="stylesheet" />

                                              <link href="~/Content/bootstrap-reboot.css" rel="stylesheet" />

                                                      <link href="~/Content/bootstrap-reboot.min.css" rel="stylesheet" />

                                                              <style>

                                                              .btn a {color:white; text-decoration:none}

                                                              body {background-color:#F1F1F1;}

                                                              </style>

                                                              </head>

                                                              <body>

                                                              <div class="p">

	                                                                      </div>

	                                                                      @using (Html.BeginForm())

{

	@Html.ValidationSummary()

	<div class="form-group">

		           <label>Your Name :</label>

		           @Html.TextBoxFor(x => x.Name, new

	{

		@class = "formcontrol"

	})

	</div>

	<div class="form-group">

		           <label>Your Email :</label>

		           @Html.TextBoxFor(x => x.Email, new

	{

		@class = "formcontrol"

	})

	</div>

	<div class="form-group">

		           <label>Your phone : </label>

		           @Html.TextBoxFor(x => x.Phone, new

	{

		@class = "formcontrol"

	})

	</div>

	<div class="form-group">

		           <label>是否接受邀请？</label>

		           @Html.DropDownListFor(x => x.WillAttend, new[] { new SelectListItem()

		{

			Text="是,接受邀请",Value=bool.FalseString

		},new SelectListItem()

		{

			Text = "否,不接受邀请", Value = bool.FalseString

		}

	},"请选择",new {@class="formcontrol"})

	</div>

	<div class="text-center"><input class="btn btn-success" type="submit" value="提交"></div>

	}

</body>

</html>

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

设置启动URL

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

注意:保持特定页空白

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

处理表单

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

请求，来调用合适的方法。对HomeController类做修改。

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MVCStudy.Models;

namespace MVCStudy.Controllers

{

public class HomeController : Controller

{

// GET: Home

	public ViewResult Index()

	{

		int Hour = DateTime.Now.Hour;

		ViewBag.Greeting = Hour < 12 ? "Good Morning" : "Good afternoon";

		return View();

	}

	[HttpGet]

	public ViewResult RvspForm()

	{

		return View();

	}

	[HttpPost]

	public ViewResult RvspForm(GuestResponse guestResponse)

	{

		return View("Thanks",guestResponse);

	}

}

}

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

using MVCStudy.Models 命名空间，这样可以直接使用GuestResponse模型类型，而不需要使用这个类的限定名。

使用模型绑定

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

渲染其他视图

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

View\Home\Thanks.cshtml。编辑此视图。

@model MVCStudy.Models.GuestResponse

@

{

	Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

                              <link href="~/Content/bootstrap.css" rel="stylesheet" />

                                      <title>Thanks</title>

                                      <style>

                                      body

{

	background-color: #F1F1F1;

}

</style>

</head>

<body>

@try

{

	WebMail.SmtpServer = "smtp.example.com";

	WebMail.SmtpPort = 587;

	WebMail.EnableSsl = true;

	WebMail.UserName = "mySmtpUsername";

	WebMail.Password = "mySmtpPassword";

	WebMail.From = "rsvps@example.com";

	WebMail.Send("party-host@example.com", "RSVP Notifiaction", Model.Name + "is" + ((Model.WillAttend ?? false) ? "" : "not") + "attending");

}

catch(Exception)

{

	@:<b>对不起，未能给您发送回复邮件</b>

}

<div class="text-center">

	           <h1>

	           Thank you,@Model.Name

	           </h1>

	           <div class="lead">

	                      @if (Model.WillAttend == true)

{

	@:感谢您的到来

}

else

{

	@:您未能参加我们的Party,我们深感遗憾,感谢您的回复。

}

</div>

</div>

</body>

</html>

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

添加验证

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

注释属性进行定义。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
namespace MVCStudy.Models
{
public class GuestResponse
{
[Required(ErrorMessage ="请确认您的姓名")]
public string Name { get; set; }
[Required(ErrorMessage = "请确认您的邮箱")]
[RegularExpression(".+\\@.+\\..+",ErrorMessage ="请输入有效邮箱")]
public string Email { get; set; }
[Required(ErrorMessage = "请确认您的电话")]
public string Phone { get; set; }
[Required(ErrorMessage = "请确认您是否接受邀请")]
public bool? WillAttend { get; set; }
}
}

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

ValidationSummary()（验证摘要）辅助器方法。

@model MVCStudy.Models.GuestResponse

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>RvspForm</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-reboot.css" rel="stylesheet" />
<link href="~/Content/bootstrap-reboot.min.css" rel="stylesheet" />
<style>
.btn a {color:white;text-decoration:none}
body{background-color:#F1F1F1;}
</style>
</head>
<body>
<div class="p">

</div>
@using (Html.BeginForm())
{
@Html.ValidationSummary()
<div class="form-group">
<label>Your Name :</label>
@Html.TextBoxFor(x => x.Name, new { @class = "formcontrol" })
</div>
<div class="form-group">
<label>Your Email :</label>
@Html.TextBoxFor(x => x.Email, new { @class = "formcontrol" })
</div>
<div class="form-group">
<label>Your phone : </label>
@Html.TextBoxFor(x => x.Phone, new { @class = "formcontrol" })
</div>
<div class="form-group">
<label>是否接受邀请？</label>
@Html.DropDownListFor(x => x.WillAttend, new[]{ new SelectListItem(){ Text="是,接受邀请",Value=bool.FalseString},new SelectListItem(){ Text = "否,不接受邀请", Value = bool.FalseString } },"请选择",new {@class="formcontrol"})
</div>
<div class="text-center"><input class="btn btn-success" type="submit" value="提交"></div>
}
</body>
</html>

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

高亮显示无效字段

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

内容：

.field-validation-error {

	color: #f00;

}

.field-validation-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}

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

在 RvsvpForm.cshtml中添加Link元素。

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

直接从解决方案中用鼠标拖拽文件到相应位置就能自动写Link.

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

设置内容样式

使用NuGet安装Bootstrap;

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

找到Bootstrap安装即可。

设置Index视图

<html>

 <head></head>

 <body>

  @{ Layout = null; }

  <meta name="viewport" content="width=device-width" />

  <title>Index</title>

  <link href="~/Content/Style.css" rel="stylesheet" />

  <link href="~/Content/bootstrap.css" rel="stylesheet" />

  <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

  <div class="text-center">

    @ViewBag.Greeting World(From the view)

   <h2> 我们将会有一个愉悦的party </h2>

   <h3>您是否参加？</h3>

   <div class="btn btn-success">

     @Html.ActionLink("PVSP Now", "RvspForm")

   </div>

  </div>

 </body>

</html>

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

设置RsvpForm视图

<html>

 <head></head>

 <body>

  @model MVCStudy.Models.GuestResponse @{ Layout = null; }

  <meta name="viewport" content="width=device-width" />

  <title>RvspForm</title>

  <link href="~/Content/Style.css" rel="stylesheet" />

  <link href="~/Content/bootstrap.css" rel="stylesheet" />

  <style>

.btn a {color:white;text-decoration:none}

body{background-color:#F1F1F1;}

</style>

  <div class="text-center">

    @using (Html.BeginForm()) { @Html.ValidationSummary()

   <div class="form-group">

    <label>Your Name :</label> @Html.TextBoxFor(x => x.Name, new { @class = "formcontrol" })

   </div>

   <div class="form-group">

    <label>Your Email :</label> @Html.TextBoxFor(x => x.Email, new { @class = "formcontrol" })

   </div>

   <div class="form-group">

    <label>Your phone : </label> @Html.TextBoxFor(x => x.Phone, new { @class = "formcontrol" })

   </div>

   <div class="form-group">

    <label>是否接受邀请？</label> @Html.DropDownListFor(x => x.WillAttend, new[] { new SelectListItem() { Text = "是,接受邀请", Value = bool.FalseString }, new SelectListItem() { Text = "否,不接受邀请", Value = bool.FalseString } }, "请选择", new { @class = "formcontrol" })

   </div>

   <div class="text-center">

    <input class="btn btn-success" type="submit" value="提交" />

   </div> }

  </div>

 </body>

</html>

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

设置Thanks视图样式

<html>

 <head></head>

 <body>

  @model MVCStudy.Models.GuestResponse @{ Layout = null; }

  <meta name="viewport" content="width=device-width" />

  <link href="~/Content/bootstrap.css" rel="stylesheet" />

  <title>Thanks</title>

  <style>

body {

background-color: #F1F1F1;

}

</style>   @try { WebMail.SmtpServer = "smtp.example.com"; WebMail.SmtpPort = 587; WebMail.EnableSsl = true; WebMail.UserName = "mySmtpUsername"; WebMail.Password = "mySmtpPassword"; WebMail.From = "rsvps@example.com"; WebMail.Send("party-host@example.com", "RSVP Notifiaction", Model.Name + "is" + ((Model.WillAttend ?? false) ? "" : "not") + "attending"); } catch(Exception) { @:

  <b>对不起，未能给您发送回复邮件</b> }

  <div class="text-center">

   <h1> Thank you,@Model.Name </h1>

   <div class="lead">

     @if (Model.WillAttend == true) { @:感谢您的到来 } else { @:您未能参加我们的Party,我们深感遗憾,感谢您的回复。 }

   </div>

  </div>

 </body>

</html>

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目

源码下载：https://download.csdn.net/download/qq_21419015/10433092

ASP.NET + MVC5 入门完整教程三 (上) ---第一个MVC项目的更多相关文章

ASP&period;NET + MVC5 入门完整教程三 (下) ---MVC 松耦合
建立松耦合组件 MVC 模式最重要的特性之一视他支持关注分离,希望应用程序中的组件尽可能独立,只有很少的几个可控依赖项.在理想的情况下,每个组件都不了解其他组件,而只是通过抽象接口来处理应用程序的其他 ...
ASP&period;NET + MVC5 入门完整教程七 -—-- MVC基本工具（上）
https://blog.csdn.net/qq_21419015/article/details/80474956 这里主要介绍三类工具之一的依赖项注入(DI)容器,其他两类单元测试框架和模仿工 ...
ASP&period;NET + MVC5 入门完整教程八 -—-- 一个完整的应用程序（上）
https://blog.csdn.net/qq_21419015/article/details/80509513 SportsStore 1.开始创建Visual Studio 解决方案和项目这里 ...
ASP&period;NET + MVC5 入门完整教程四---MVC 中使用扩展方法
https://blog.csdn.net/qq_21419015/article/details/80433640 1.示例项目准备1)项目创建新建一个项目,命名为LanguageFeatures ...
ASP&period;NET + MVC5 入门完整教程二
原文链接:https://blog.csdn.net/qq_21419015/article/details/80318046 从前端UI开始 MVC分离的比较好,开发顺序没有特别要求,先开发哪一部分 ...
ASP&period;NET + MVC5 入门完整教程八 -—-- 一个完整的应用程序（下）
https://blog.csdn.net/qq_21419015/article/details/80802931 SportsStore 1.导航添加导航控件如果客户能够通过产品列表进行分类导 ...
ASP&period;NET + MVC5 入门完整教程五 --- Razor （模型与布局）
https://blog.csdn.net/qq_21419015/article/details/80451895 1.准备示例项目为了演示Razor,使用VS创建一个名称为“Razor”的新项目 ...
ASP&period;NET + MVC5 入门完整教程七 -—-- MVC基本工具（下）
https://blog.csdn.net/qq_21419015/article/details/80493633 Visual Stdio 的单元测试
asp&period;net + MVC5 入门完整教程一
原文链接:https://blog.csdn.net/qq_21419015/article/details/80311918原创凌霜残雪最后发布于2018-05-14 17:26:30 阅读数 3 ...

随机推荐

Linux学习：自己写bootloader
一.bootloader 目标:启动内核基本功能: ①初始化硬件:关看门狗.设置时钟.设置SDRAM.初始化NAND FLASH ②image比较大需要重定位到SDRAM ②将内核从NAND FLA ...
ubuntu初始化root帐号密码
Ubuntu Kylin 14.04的安装过程中并没有提供设置root密码的过程,取而代之的是自定义的帐号. 如果我们需要使用到root帐号或者root权限,则需要重新设置root帐号的密码. 设置方 ...
java分形树
import java.awt.*; import java.awt.event.*; import java.util.Random; import javax.swing.*; /** * * @ ...
ExtJs 4&period;2&period;1 复选框数据项动态加载(更新一下)
最近在做博客项目,后台管理用的是ExtJs4.2.1版本,因为是初学所以在使用的时候也遇到不少的这样或那样的问题,也写了不少这方面的博客,今天要写的博客是关于复选框数据项动态的加载功能,以前也没用过, ...
ElasticSearch大数据分布式弹性搜索引擎使用—从0到1
阅读目录: 背景安装查找.下载rpm包 .执行rpm包安装配置elasticsearch专属账户和组设置elasticsearch文件所有者切换到elasticsearch专属账户测试能否成 ...
GNU Make 学习系列一：怎样写一个简单的Makefile
编程通常遵循一个相当简单的程序:编辑源文件,编译源代码成可执行的格式,调试结果.尽管将源代码翻译成可执行程序是常规的过程,如果做的不正确,程序员可能会浪费大量的时间去追踪问题.大多数的开发者都经历过这 ...
linux实现自动检测进程是否存活的脚本
可以在性能测试过程中.定期检测startAgent和nmon的状态 #!/bin/sh while true do pnmon=`ps aux | grep nmon | grep -v grep`; ...
2&period;4G还是5G？带你选择最正确的路由器
智能设备井喷的时代,无线路由器成为家庭中最重要的电器设备.稳定性.连接速度.信号强弱都是无线路由使用体验的重要组成部分.究竟如何选购与配置路由器才能得到最好的用户体验呢? 当你在选购无线路由器的时候是 ...
c&num; 日期函数DateTime&period;ToString()日期的各种格式（本人亲测）
c# 日期函数DateTime.ToString()日期的各种格式 (本人亲测) 平时写代码的过程难免遇到对日期的格式转换,这个时候很容易忘记具体格式的转换是什么,当然这不是什么复杂的,查一下就能找 ...
SQL Server 阻塞原因分析
这里通过连接在sysprocesses里字段值的组合来分析阻塞源头,可以把阻塞分为以下5种常见的类型(见表).waittype,open_tran,status,都是sysprocesses里的值,“ ...