小试ASP.NET MVC——一个邀请页面的实现

时间 2019-12-04

标签小试 asp.net asp mvc 一个邀请页面实现栏目 ASP 繁體版

原文原文链接

上篇博客咱们大致介绍了ASP.NET MVC以及如何去新建项目，这篇博客咱们讲点干货。小试ASP.NET MVC，咱们来写一个简单的邀请WEB。css

先来创建一个Models，叫GuestResponse类，并写以下代码。html

    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; }
    }

接下来，天然是首页，咱们让其显示一个问候并邀请访问者的文字。bootstrap

咱们在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的辅助方法，它的第一个参数是该连接显示的文本，第二个参数是单击连接跳转的动做方法。 post

接下来咱们运行项目，就会看见以下界面。网站

但是一个网站固然不会只有邀请信息这一个页面。接下来咱们须要跳转到另一个页面。在HomeController写一个RsvpForm方法，并渲染RsvpForm视图。ui

        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按钮时，会跳转到这个界面。spa

这个界面是用来提交被邀请者的信息的，此时咱们会发现一个问题。咱们并无告诉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>

至此，此次项目就算初步完成了。