小試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>

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。