上篇博客我们大体介绍了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. submit text3常用快捷键

    在网上找了一些submit text的快捷键: Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)Ctrl+G 跳转到相应的行Ctrl+J 合并行(已选择需要合并的 ...

  2. Web安全相关（五）：SQL注入(SQL Injection)

    简介 SQL注入攻击指的是通过构建特殊的输入作为参数传入Web应用程序,而这些输入大都是SQL语法里的一些组合,通过执行SQL语句进而执行攻击者所要的操作,其主要原因是程序没有细致地过滤用户输入的数据 ...

  3. WPF 普通属性变化通知

    问题描述:使用ObservableCollection<OrderItem> source 给Datagrid.ItemsSource赋值,在后台更新source集合后,前台Datagri ...

  4. 内存映射文件MemoryMappedFile使用

    参考资料: http://blog.csdn.net/bitfan/article/details/4438458 所谓内存映射文件,其实就是在内存中开辟出一块存放数据的专用区域,这区域往往与硬盘上特 ...

  5. springmvc+bootstrap+jquerymobile完整搭建案例(提供下载地址)

    用一张简单的截图说明下,然后提供一个下载地址. bootstrap的大部分样式官方都是写好的,所以只需要class="官方样式即可",具体可以看官方的案例,下面来个地址 http: ...

  6. cmd窗口编码设置

    问题描述:不知道误操作了什么,导致cmd窗口的鼠标显示位置出现错位,如下: 现在要将鼠标位置调整回来. 使用工具:cmd. 操作步骤: 1.查看cmd属性可以看到 可以看到是UTF-8编码格式的,我们 ...

  7. 08讲browse命令的使用技巧

    .浏览所有parts ,使用技巧 .浏览所有 nets,使用技巧 在上图中选择nets .浏览所有 offpage connector,使用技巧 如上 .浏览所有 DRC makers,使用技巧 5. ...

  8. 机器学习之sklearn——EM

    GMM计算更新∑k时,转置符号T应该放在倒数第二项(这样计算出来结果才是一个协方差矩阵) from sklearn.mixture import GMM    GMM中score_samples函数第 ...

  9. H5图片上传插件

    基于zepto,支持多文件上传,进度和图片预览,用于手机端. (function ($) { $.extend($, { fileUpload: function (options) { var pa ...

  10. iOS开发系列--Swift 3.0

    概述 从写第一篇Swift文章的时候到现在Swift已经从1.2发展到了今天的3.0,这期间由于Swift目前还在发展阶段并不能向下兼容,因此第一篇文章中的部分代码在当前的Xcode环境中已经无法运行 ...