上篇博客我们大体介绍了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——一个邀请页面的实现的更多相关文章

  1. 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理

    系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)— ...

  2. 学习笔记：Asp.Net MVC更新部分页面

    Asp.Net MVC 更新部分页面 设想我们有一篇文章下面的提交评论时如何只刷新评论内容部分, 方法一,利用ajax通过js代码实现. 方法二,利用Ajax.BeginForm()+部分视图实现. ...

  3. 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理 【转】

    http://www.cnblogs.com/powertoolsteam/p/MVC_five.html 系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会 ...

  4. 【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数

    [问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...

  5. asp.net mvc jqgrid 同一个页面查询不同的表，jqgrid显示不同表的表头和数据并且分页

    基于我上一篇文章<a href="http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入&l ...

  6. 在ASP.NET MVC自定义错误页面

    异常处理跳转页面 第一步,在项目的Web.config文件中找到节点<system.web> 在此节点下添加配置(Error为定义的控制器也可以多添加些error标签用于区分不同的错误) ...

  7. ASP.NET MVC之"重定向/页面跳转"(关键词RedirectToAction,Redirect)

    MVC5 API(官方) 1.RedirectToRouteResult RedirectToAction(string actionName); RedirectToRouteResult Redi ...

  8. ASP.NET MVC 自定义错误页面心得

    自定义错误页面的目的,就是为了能让程序在出现错误/异常的时候,能够有较好的显示体验. 所以,首先要先了解,我们可以在哪里捕获异常. 当程序发生错误的时候,我们可以在两个地方捕获: Global里面的A ...

  9. Asp.net MVC 自定义错误页面以及return HttpNotFound遇到的问题

    今天在处理mvc 项目404和500页面时,发现我以前比较喜欢用的Return HttpNotFound()没有跳转到我在webconfig中配置的自定义404页面,而且也不会去执行Global中的A ...

随机推荐

  1. 学习笔记之MVC级联及Ajax操作

    由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...

  2. UWP开发之Mvvmlight实践七：如何查找设备（Mobile模拟器、实体手机、PC）中应用的Log等文件

    在开发中或者后期测试乃至最后交付使用的时候,如果应用出问题了我们一般的做法就是查看Log文件.上章也提到了查看Log文件,这章重点讲解下如何查看Log文件?如何找到我们需要的Packages安装包目录 ...

  3. CSS知识总结（八）

    CSS常用样式 8.变形样式 改变元素的大小,透明,旋转角度,扭曲度等. transform : none | <transform-function> <transform-fun ...

  4. 【Java每日一题】20170106

    20170105问题解析请点击今日问题下方的"[Java每日一题]20170106"查看(问题解析在公众号首发,公众号ID:weknow619) package Jan2017; ...

  5. iOS开源项目周报1229

    由OpenDigg 出品的iOS开源项目周报第三期来啦.我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开发方面的开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等. Ma ...

  6. PowerShell 数组以及XML操作

    PowerShell基础 PowerShell数组操作 将字符串拆分成数据的操作 cls #原始字符串 $str = "abc,def,ghi,mon" #数据定义 #$StrAr ...

  7. ubuntu安装ANSYS17.2全过程

    本次介绍在Ubuntu kylin1604下安装Ansys 17.2的全部过程. 1 安装文件准备 关于ANSYS的软件安装文件,在网络上可以找到.这里采用SSQ版本的安装文件,如图所示,包含一个名为 ...

  8. POJ1149 PIGS [最大流 建图]

    PIGS Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 20662   Accepted: 9435 Description ...

  9. 【python之路3】if 语句

    1.if语句用法(if....else....) #!/usr/bin/env python # -*- coding:utf-8 -*- my_name = raw_input("plea ...

  10. Entity Framework 6 Recipes 2nd Edition（11-9）译 -> 在LINQ中使用规范函数

    11-9. 在LINQ中使用规范函数 问题 想在一个LINQ查询中使用规范函数 解决方案 假设我们已经有一个影片租赁(MovieRental )实体,它保存某个影片什么时候租出及还回来,以及滞纳金等, ...