小试ASP.NET MVC——一个邀请页面的实现
上篇博客我们大体介绍了ASP.NET MVC以及如何去新建项目，这篇博客我们讲点干货。小试ASP.NET MVC，我们来写一个简单的邀请WEB。
先来建立一个Models，叫GuestResponse类，并写如下代码。
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")]
public bool? WillAttend { get; set; }
}
接下来，自然是首页，我们让其显示一个问候并邀请访问者的文字。
我们在Controller里面新建HomeController.cs文件，并在其Index方法中写如下代码。
public ViewResult Index()
{
int hour = DateTime.Now.Hour;
ViewBag.Greeting = hour < 12 ? "Good Morning" : "Good Afternoon";
return View();
}
接下来，当然是渲染Index界面了，我们新建一个Index视图文件，并在里面填充以下代码。（代码中使用了bootstrap框架，但这里不进行讲解，想了解的童鞋自行利用搜索引擎）
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
<title>Index</title>
<style>
.btn a {
color: black;
text-decoration:none
} body {
background-color: #F1F1F2;
}
</style>
</head>
<body>
<div class="panel-body text-center"><h4>@ViewBag.Greeting</h4></div>
<div class="text-center">
<h2>We're going to have an exciting party!</h2>
<h3>And you are invited</h3>
<div class="btn btn-success">
@Html.ActionLink("PSVP Now", "RsvpForm")
</div>
</div>
</body>
</html>
Html.ActionLink是一个Html的辅助方法，它的第一个参数是该链接显示的文本，第二个参数是单击链接跳转的动作方法。
接下来我们运行项目，就会看见如下界面。
可是一个网站当然不会只有邀请信息这一个页面。接下来我们需要跳转到另外一个页面。在HomeController写一个RsvpForm方法，并渲染RsvpForm视图。
public ViewResult RsvpForm()
{
return View();
}
接着写RsvpForm视图。
<html>
<head>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width" />
<link href="~/Content/Styles.css" rel="stylesheet" />
<title>RsvpForm</title>
</head>
<body>
<div class="panel panel-success">
<div class="panel-heading text-center"><h4>RSVP</h4></div>
<div class="panel-body">
@using (Html.BeginForm())
{
@Html.ValidationSummary()
<div class="form-group">
<label>Your name:</label>
@Html.TextBoxFor(x => x.Name, new { @class = "form-control" })
</div>
<div class="form-group">
<label>Your email:</label>
@Html.TextBoxFor(x => x.Email, new { @class = "form-control" })
</div>
<div class="form-group">
<label>Your phone:</label>
@Html.TextBoxFor(x => x.Phone, new { @class = "form-control" })
</div>
<div class="form-group">
<label>Will you attend?</label>
@Html.DropDownListFor(x => x.WillAttend, new[]
{
new SelectListItem() { Text = "Yes, I'll be there.",Value = Boolean.TrueString},
new SelectListItem() { Text = "No, I can't come.",Value = Boolean.FalseString}
}, "Choose an option", new { @class = "form-control" })
</div>
<div class="text-center">
<input class="btn btn-success" type="submit" value="Submit RSVP"/>
</div>
}
</div>
</div>
</body>
</html>
运行项目，我们会发现当点击PSVP Now按钮时，会跳转到这个界面。
这个界面是用来提交被邀请者的信息的，此时我们会发现一个问题。我们并没有告诉MVC当表单提交服务器时需要做什么，当单击Submit RSVP时该表单会回递给Home控制器中的RsvpForm方法，这只是再次渲染了这个视图。这里我们就需要[HttpGet]和[HttpPost]注解。 get是从服务器上获取数据（显然在这个项目里就是页面了），post是向服务器传送数据（这里的数据就是表单的内容）。我们写一个RsvpForm重载方法来处理表单的提交。更改代码如下：
[HttpGet]
public ViewResult RsvpForm()
{
return View();
}
[HttpPost]
public ViewResult RsvpForm(GuestResponse guestResponse)
{
if (ModelState.IsValid)
{
return View("Thanks", guestResponse);
}
else
{
return View();
}
}
通过Post提交表单之后我们当然得显示一个感谢页面了，以示友好嘛。建立Thanks视图，并填充代码如下。
<html>
<head>
<link href="~/Content/bootstrap.css" rel="stylesheet"/>
<link href="~/Content/bootstrap-theme.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width" />
<title>Thanks</title>
<style>
body {
background-color: #0094ff;
}
</style>
</head>
<body>
<div class="text-center">
<h1>Thank you, @Model.Name! The mail has been sent. </h1>
<div class="lead">
@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 lettings know.
}
</div>
</div>
</body>
</html>
至此，这次项目就算初步完成了。
小试ASP.NET MVC——一个邀请页面的实现的更多相关文章
- 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理
系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)— ...
- 学习笔记：Asp.Net MVC更新部分页面
Asp.Net MVC 更新部分页面 设想我们有一篇文章下面的提交评论时如何只刷新评论内容部分, 方法一,利用ajax通过js代码实现. 方法二,利用Ajax.BeginForm()+部分视图实现. ...
- 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理 【转】
http://www.cnblogs.com/powertoolsteam/p/MVC_five.html 系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会 ...
- 【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数
[问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...
- asp.net mvc jqgrid 同一个页面查询不同的表，jqgrid显示不同表的表头和数据并且分页
基于我上一篇文章<a href="http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入&l ...
- 在ASP.NET MVC自定义错误页面
异常处理跳转页面 第一步,在项目的Web.config文件中找到节点<system.web> 在此节点下添加配置(Error为定义的控制器也可以多添加些error标签用于区分不同的错误) ...
- ASP.NET MVC之"重定向/页面跳转"(关键词RedirectToAction,Redirect)
MVC5 API(官方) 1.RedirectToRouteResult RedirectToAction(string actionName); RedirectToRouteResult Redi ...
- ASP.NET MVC 自定义错误页面心得
自定义错误页面的目的,就是为了能让程序在出现错误/异常的时候,能够有较好的显示体验. 所以,首先要先了解,我们可以在哪里捕获异常. 当程序发生错误的时候,我们可以在两个地方捕获: Global里面的A ...
- Asp.net MVC 自定义错误页面以及return HttpNotFound遇到的问题
今天在处理mvc 项目404和500页面时,发现我以前比较喜欢用的Return HttpNotFound()没有跳转到我在webconfig中配置的自定义404页面,而且也不会去执行Global中的A ...
随机推荐
- 如何利用pt-online-schema-change进行MySQL表的主键变更
业务运行一段时间,发现原来的主键设置并不合理,这个时候,想变更主键.这种需求在实际生产中还是蛮多的. 下面,看看pt-online-schema-change解决这类问题的处理方式. 首先,创建一张测 ...
- 拼图小游戏之计算后样式与CSS动画的冲突
先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲 ...
- Autofac - MVC/WebApi中的应用
Autofac前面写了那么多篇, 其实就是为了今天这一篇, Autofac在MVC和WebApi中的应用. 一.目录结构 先看一下我的目录结构吧, 搭了个非常简单的架构, IOC(web), IBLL ...
- WebApi返回Json格式字符串
WebApi返回json格式字符串, 在网上能找到好几种方法, 其中有三种普遍的方法, 但是感觉都不怎么好. 先贴一下, 网上给的常用方法吧. 方法一:(改配置法) 找到Global.asax文件,在 ...
- ESLint的使用笔记
原文地址:https://csspod.com/getting-started-with-eslint/?utm_source=tuicool&utm_medium=referral 在团队协 ...
- Conversion to Dalvik format failed: Unable to execute dex: Multiple dex files define ...
Conversion to Dalvik format failed: Unable to execute dex: Multiple dex files define ... 这个错误是因为有两个相 ...
- 发布APP到app store
好久好久没写博客了,主要是 都在学习新东西,忙不赢啊. 近段时间在用AC平台学习开发移动APP, 今天开始发布应用. 在ac云控制台编译成ipa后,使用apple提供的Application Load ...
- MonoDevelop 4.2.2/Mono 3.4.0 in CentOS 6.5 安装笔记
MonoDevelop 4.2.2/Mono 3.4.0 in CentOS 6.5 安装笔记 说明 以root账户登录Linux操作系统,注意:本文中的所有命令行前面的 #> 表示命令行提示符 ...
- Mono+Jexus部署C# MVC的各种坑
如果你看到这篇文章,先别急着动手,过完一遍,确定是你要的再动手. 别人提到的这里不赘述,只说查了好久才知道的. 1号坑:System.IO.FileNotFoundException Could no ...
- .NET面试题系列[4] - C# 基础知识(2)
2 类型转换 面试出现频率:主要考察装箱和拆箱.对于有笔试题的场合也可能会考一些基本的类型转换是否合法. 重要程度:10/10 CLR最重要的特性之一就是类型安全性.在运行时,CLR总是知道一个对象是 ...