ASP.NET MVC第007天_表單Get和Post_將View輸入資料傳到Contoller

 
基本上Get Post的觀念之前在PHP也有演練過

相同觀念就不再贅述了
任何網頁語言都離不開這兩個網頁傳值基礎


這裡一樣建立一個乾淨的MVC空專案


新增一組Controller 跟 對應的View
取名為FormController 


專案目錄架構








這裡要演示從 FormController 的 Index View提交表單的過程
透過Get 跟 Post 到HomeController 中 Action回應的Index View
當中差異


發送端(提交到Server後端)
/Views/Form/Index.cshtml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
        <form action="/Home/About" method="get">
            <input type="text" name="txt_name" />
            <input type="submit" value="查詢" />
        </form>
    </div>
</body>
</html>


FormController.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyEmptyMVC_1.Controllers
{
    public class FormController : Controller
    {
        // GET: Form
        public ActionResult Index()
        {
            return View();
        }
    }
}




/Views/Home/About.cshtml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>About</title>
</head>
<body>
    <div> 
        <h3>你輸入的人員名稱:@ViewBag.Name</h3>
    </div>
</body>
</html>





這裡要小心注意txt_name(也就是你get傳送時候的參數命名)跟接收端要記得兩邊一致

HomeController.cs接收端的Controller(Server Side)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyEmptyMVC_1.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About(string txt_name)
        {
            ViewBag.Name = txt_name;
            return View();
        }
    }
}



運行結果





當然多個參數也就依此類推
action function多增加一個參數






另一種方式Post


發送端(提交到Server後端)
/Views/Form/Index.cshtml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
        <form action="/Home/About" method="post">
            姓名:<input type="text" name="txt_name" /><br/>
            電話:<input type="text" name="txt_phone" /><br />
            <input type="submit" value="查詢" />
        </form>
    </div>
</body>
</html>



接收端的Controller(Server Side)
HomeController.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyEmptyMVC_1.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About(FormCollection post)
        {
            ViewBag.Name = post["txt_name"];
            ViewBag.Phone = post["txt_phone"];
            return View();
        }
    }
}

效果




好吧那竟然學了.net mvc 當然也要入境隨俗
學一下它特別的專有語法

Html.BeginForm("動作名稱" , "控制器名稱" , Method)

主要適用於替換Form這組 Tag的
<form action="xxx" method="{get/post}">

</form>


Html.BeginForm版本的Get寫法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        @using (Html.BeginForm("About", "Home", FormMethod.Get))
        {
            <label>姓名:</label><input type="text" name="txt_name" /><br />
            <label>電話:</label><input type="text" name="txt_phone" /><br />
            <input type="submit" value="查詢" />
        }
    </div>
</body>
</html>


效果



Html.BeginForm版本的Post寫法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        @using (Html.BeginForm("About", "Home", FormMethod.Post))
        {
            <label>姓名:</label><input type="text" name="txt_name" /><br />
            <label>電話:</label><input type="text" name="txt_phone" /><br />
            <input type="submit" value="查詢" />
        }
    </div>
</body>
</html>
















































留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題