iT邦幫忙

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

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

[Day 12] 如何用ASP.NET MVC接收Post資料(二)

今天分享如何用Model接收Post資料,
基本上跟昨天幾乎一模一樣,
只差在接收Post的部分,

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

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

記得網頁的name要跟Model一樣,大小寫也要一樣,
這樣就完成了用Model接收資料,又用Model傳送資料。

這是一開始的畫面
https://ithelp.ithome.com.tw/upload/images/20171219/20105694STL9bYvBYG.jpg

這是開始畫面的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="post" 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>

這是接收Post並Show出資料的畫面
https://ithelp.ithome.com.tw/upload/images/20171219/20105694WK5YvHEvo3.jpg

這是接收資料的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 11] 如何用ASP.NET MVC接收Post資料(一)
下一篇
[Day 13] 開始進入資料庫篇,淺談MySql與MariaDB
系列文
ASP.NET MVC網頁程式介紹30

尚未有邦友留言

立即登入留言