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

日期：

說明

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

操作流程

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



<!--DOCTYPE html-->


    <meta name="viewport" content="width=device-width">
    <title>Index</title>


    <div>
       @ViewBag.Greeting World (from the view)
       <p>We're going to have an exciting party.<br>
           (To do: sell it better. Add pictures or something.)
        </p>
        @Html.ActionLink("RSVP Now", "RsvpForm")
    </div>

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

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

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

建立表單內容

@model MvcApplication2.Models.GuestResponse
@{
    Layout = null;
}
<!--DOCTYPE html-->


    <meta name="viewport" content="width=device-width">
    <title>RvspForm</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet">
    <link href="~/Content/bootstrap.css" rel="stylesheet">
    <link href="~/Content/bootstrap-reboot.css" rel="stylesheet">
    <link href="~/Content/bootstrap-reboot.min.css" rel="stylesheet">
    <style>
        .btn a {color:white;text-decoration:none}
        body{background-color:#F1F1F1;}
    </style>


    <div class="p">
        @using (Html.BeginForm()){ /*提交當前頁面*/

            <p> 你的名字 : @Html.TextBoxFor(x =&gt; x.Name)</p>
            <p> 你的信箱 : @Html.TextBoxFor(x =&gt;x.Email)</p>
            <p> 你的電話 : @Html.TextBoxFor(x =&gt;x.Phone)</p>

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

            </p>
            <input type="Submit" value="提交 RSVP">           
        }
    </div>

設定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 &lt; 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

參考

留言

張貼留言