Asp.net MVC 繪製表單和HTTP Get 和 Post (四)

markdown #說明接續前面的繼續做，在主頁下方新增一個可以超連結出去到表單，然後填寫表單做提交，以及根據提交的內容做相對應的回覆。 #操作流程 ##先做Model

在model 新增一個類別命名為GuestResponse，加入四個變數。 - GuestResponse.cs ``` using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcApplication2.Models { public class GuestResponse { public string Name { get; set; } public string Email { get; set; } public string Phone { get; set; } public bool? WillAttend { get; set; } } } ``` ##新增超連結

在主頁下方新增可以點出去的超連結，這裡的建立一個ActionLink，並且連結到 RsvpForm - index.cshtml ``` @{ Layout = null; } Index

@ViewBag.Greeting World (from the view)

We're going to have an exciting party.
(To do: sell it better. Add pictures or something.)

@Html.ActionLink("RSVP Now", "RsvpForm")

``` ##在主頁下方有個超連結後，要建立連結出去的畫面，通過連結到一個表單

在 HomeController.cs 加入檢視，命名為 RsvpForm

##Demo 主頁下方有個超連結可以點

##建立表單內容

``` @model MvcApplication2.Models.GuestResponse @{ Layout = null; } RvspForm

@using (Html.BeginForm()){ /*提交當前頁面*/

你的名字 : @Html.TextBoxFor(x => x.Name)

你的信箱 : @Html.TextBoxFor(x =>x.Email)

你的電話 : @Html.TextBoxFor(x =>x.Phone)

你是否參加? @Html.DropDownListFor(x =>x.WillAttend,new[] { new SelectListItem() {Text = "是，我會參加", Value = bool.TrueString}, new SelectListItem() {Text = "否，我不參加", Value = bool.FalseString} },"請選擇")

}

``` ##設定URL 這個步驟其實不太清楚是為了甚麼，後續如果有進一步的認知，再補上

##製作控制器當請求表單這一頁時這裡分出 Get 和 Post 兩個部分，第一次時請求會是空白頁面，Post 請求會是回傳謝謝的頁面

``` using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcApplication2.Models; namespace MvcApplication2.Controllers { public class HomeController : Controller { public ViewResult Index() { int hour = DateTime.Now.Hour; ViewBag.Greeting = hour < 12 ? "早安" : "午安"; return View(); } [HttpGet] public ViewResult RsvpForm() { return View(); } [HttpPost] public ViewResult RsvpForm(GuestResponse guestResponse) { // Todo : email response to the party organizer return View("Thanks", guestResponse); } } } ``` ##製作謝謝回覆頁面

依據回覆內容 : 如果是要參加 =>謝謝你的參加如果是不參加 =>雖然你不參加，但是謝謝你的回覆

- Thanks.cshtml ``` @model MvcApplication2.Models.GuestResponse @{ Layout = null; } !DOCTYPE html html head meta name=viewport content=width=device-width titleThankstitle head body div h1謝謝你,@Model.Nameh1 @if(Model.WillAttend==true){ @謝謝你的參加 }else{ @雖然你不參加，但是謝謝你的回覆 } div body html ``` ##Demo