上篇博客我们大体介绍了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. UWP开发之Mvvmlight实践八：为什么事件注销处理要写在OnNavigatingFrom中

    前一段开发UWP应用的时候因为系统返回按钮事件(SystemNavigationManager.GetForCurrentView().BackRequested)浪费了不少时间.现象就是在手机版的详 ...

  2. .NET Core 2016 回顾

    都在回顾自己的2016,今天我们来看看.NET Core的2016. 每一年的脚步的确是快,转眼间马上就2017.新的一年,带着理想和抱负继续出发. 1 月 ASP.NET 5 改名 ASP.NET ...

  3. 基于Composer Player 模型加载和相关属性设置

    主要是基于达索软件Composer Player.的基础上做些二次开发. public class ComposerToolBarSetting { public bool AntiAliasingO ...

  4. %iowait和CPU使用率的正确认知

    resources 理解 %IOWAIT (%WIO) LINUX系统的CPU使用率和LOAD Linux Performance Observability Tools How Linux CPU ...

  5. javascript排序

    利用array中的sort()排序 w3cfunction sortNumber(a,b) { return a - b } var arr = new Array(6) arr[0] = " ...

  6. document.compatMode

    在我电脑屏幕上显示的 电脑是 1920*1080这是在document.compatMode:css1Compat模式 window.screen.availWidth 1920 window.scr ...

  7. Android中的沉浸式状态栏效果

    无意间了解到沉浸式状态栏,感觉贼拉的高大上,于是就是试着去了解一下,就有了这篇文章.下面就来了解一下啥叫沉浸式状态栏.传统的手机状态栏是呈现出黑色条状的,有的和手机主界面有很明显的区别.这一样就在一定 ...

  8. Atiti.大企业病与小企业病 大公司病与小公司病

    Atiti.大企业病与小企业病 大公司病与小公司病 1. 大企业病,一般会符合机构臃肿 .多重领导 .人才流失的特点.1 2. 大企业病避免方法1 3. 小企业病 1 3.1.1. 表现1 4. 如何 ...

  9. 使用ENode框架前您需要了解的东西（初稿）

    选择ENode意味着什么可能很多人还不太清楚.我简单整理了一下: 意味着你选择了:你需要做DDD领域建模.选择了事件驱动的架构.选择了CQRS架构.选择了最终一致性.选择了事件溯源.选择了分布式.这些 ...

  10. EasyPR--开发详解（8）文字定位

    今天我们来介绍车牌定位中的一种新方法--文字定位方法(MSER),包括其主要设计思想与实现.接着我们会介绍一下EasyPR v1.5-beta版本中带来的几项改动. 一. 文字定位法 在EasyPR前 ...