iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 10
0
Modern Web

ASP.NET MVC網頁程式介紹系列 第 10

[Day 10] 如何用ASP.NET MVC接收Get資料

昨天我們提到了Get跟Post,一般寫網頁很常遇到的就是這兩種,基本上Get的話參數會出現在網址列上面,而用Post的方式參數不會出現在網址列上面,以下就簡單示範如何接收Get資料並顯示在螢幕上,在此偷懶一下用了上次的表單,
https://ithelp.ithome.com.tw/upload/images/20171219/20105694STL9bYvBYG.jpg

我們在Views/Home底下新建了一個Transcripts.cshtml,並且在HomeController加上了一個Transcripts函式,這個函式可以接收id, name, score並且輸出到畫面上,以下是Home/Index.cshtml的內容,跟上次有些許的不一樣,

@{
    ViewBag.Title = "Home Page";
    Layout = null;

    var date = ViewBag.Date;
    var student = ViewBag.Student;
    var list = ViewBag.List;
}

@model MVCTest.Models.Student

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

<form style="margin-left:10px;" method="get" action="/Home/Transcripts">
    <div class="form-group">
        <label for="exampleInputEmail1">學號</label>
        <input type="text" class="form-control" id="id" name="id" aria-describedby="emailHelp" placeholder="Enter email" value="@Model.id">
        <small id="emailHelp" class="form-text text-muted">請輸入數字</small>
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">姓名</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="Password" value="@Model.name">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">分數</label>
        <input type="text" class="form-control" id="score" name="score" aria-describedby="emailHelp" placeholder="Enter email" value="@Model.score">
    </div>
    <button type="submit" class="btn btn-primary">確定</button>
</form>

我們注意到每個input type="text"都多了一個name,傳送表單的Get或Post事實上它接收的就是這個name,當按下按鈕的時候,因為

<form style="margin-left:10px;" method="get" action="/Home/Transcripts">

所以會將資料傳到/Home/Transcripts,最前面的斜線代表網頁的根目錄,MVC會先去執行HomeController的Transcripts函式,而下面是HomeController的部分,基本上偷懶用上次的方式再傳一次資料就好了,

using MVCTest.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCTest.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            DateTime date = DateTime.Now;
            ViewBag.Date = date;

            Student data = new Student("1", "小明", 80);
            return View(data);
        }

        public ActionResult Transcripts(string id, string name, int score)
        {
            Student data = new Student(id, name, score);
            return View(data);
        }
    }
}

通常接收的資料都是用文字,不過我在score的地方是接收數字,如果輸入文字傳到後端印象中score應該會是0,然後直接將接收到的內容存成Model再傳送到前端,就會變成以下的畫面
https://ithelp.ithome.com.tw/upload/images/20171219/20105694WK5YvHEvo3.jpg

畫面簡潔有力,以下是Transcripts.cshtml的部分:

@{
    ViewBag.Title = "Transcripts";
    Layout = null;
}

@model MVCTest.Models.Student

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

<div class="form-group">
    <label>學號: </label>
    <label>@Model.id</label>
</div>
<div class="form-group">
    <label>姓名: </label>
    <label>@Model.name</label>
</div>
<div class="form-group">
    <label>分數: </label>
    <label>@Model.score</label>
</div>

應該不用特別解釋了,
今天大概分享到這邊,
欲知後事如何,請待下回分解。
歡迎大家批評指教~

--
小弟不才,
如果有謬誤或是要補充的,
都歡迎一起來討論!


上一篇
[Day 09] 表單中的 GET 與 POST
下一篇
[Day 11] 如何用ASP.NET MVC接收Post資料(一)
系列文
ASP.NET MVC網頁程式介紹30

尚未有邦友留言

立即登入留言