ASP.NET MVC5中View-Controller間數據的傳遞

時間 2019-11-16

標籤 asp.net asp mvc5 mvc view controller 數據傳遞欄目 ASP 简体版

原文原文鏈接

使用ASP.NET MVC作開發時，常常須要在頁面（View）和控制器（Controller）之間傳遞數據，那麼都有哪些數據傳遞的方式呢？html

本文對於View向Controller中傳值共列舉了如下幾種方式：前端

對於Controller向View中傳值則列舉了如下幾種方式：jquery

View向Controller中傳遞數據的方式

QueryStringweb

View中代碼：ajax

<div>
    <button id="btn">提交</button>
</div>
<script>
    $(function () {
        $('#btn').click(function () {
            //url不區分大小寫
            location.href = "/home/getvalue?method=querystring";
        });
    });
</script>

Controller中代碼：json

public void GetValue()
{
    //Request屬性可用來獲取querystring,form表單以及cookie中的值
    var querystring = Request["method"];
}

使用querystring向後臺傳遞屬於http協議中的get方式，即數據會暴露在url中，安全性不高（可經過瀏覽器歷史記錄看到發送的數據）且傳遞的數據量有大小限制。
點擊提交按鈕後瀏覽器地址欄中的地址：http://localhost:57625/home/getvalue?method=querystring後端

程序執行結果

RouteData瀏覽器

路由可讓咱們寫出可讀性較高的url，使用路由傳遞數據，首先要配置合適的路由：安全

routes.MapRoute(
    name: "Default",
    url: "{controller}/{action}/{id}"
);

前端代碼只須要將location.href的值改成和路由匹配的url便可，本示例中爲"/home/getvalue/100"
Controller中的代碼：cookie

public void GetValue()
{
    var value = RouteData.Values["id"];
}

獲取的值是object類型

程序執行結果

獲取路由參數的另一種方式是給Action設置一個和路由模板中指定的參數名一致（不區分大小寫）的參數便可，代碼以下：

public void GetValue(int id)
{

}

注意：這裏不只獲取了路由數據，並且自動將數據類型轉換爲int類型

程序執行結果

querystring和路由均是經過url進行數據的傳遞，若數據中包含中文應進行Encode操做。此外，url的長度是有限制的，使用url不可傳遞過多的數據。url傳遞參數屬於Http協議中的Get請求，若要發送大量數據可使用Post請求。

ModelBinding

1. Form

form表單形式是常見的向後端發送數據的方式，可是在提交數據是隻會提交form表單內部具備name屬性的input,textarea,select標籤的value值。
View中的代碼：

<form action="/home/getvalue" method="post">
    <input type="text" name="username" />
    <input type="text" name="age" />
    <input type="submit" name="button" value="提交" />
</form>

Controller中的代碼：

public void GetValue()
{
    var name = Request["username"];
    var age = Request["age"];
    var btn = Request["button"];
}

獲取到的數據均爲string類型

程序執行結果

如今咱們建立一個和form表單對應的類：

public class User
{
    public string UserName { set; get; }
    public int Age { set; get; }
}

修改Action的代碼以下：

public void GetValue(User user)
{

}

而後運行程序，能夠看到MVC以將表單中的數據映射爲User類實例的屬性值，且進行了相應的數據類型的轉換。

程序執行結果

2. 使用和Action參數同名的變量進行傳遞

View中的代碼：

<button id="btn">傳遞數據</button>
<script>
    $(function () {
        $('#btn').click(function () {
            $.ajax({
                'type': 'post', 'url': '/home/getdata',
                 //傳遞的數據也能夠是序列化以後的json格式數據
                 //如，上面使用form表單提交數據就可使用jquery中的serialize()方法將表單進行序列化以後在提交
                 //data:$('#form').serialize()
                'data': { username: '雪飛鴻', age: '24' },
                error: function (message) {
                    alert('error!');
                }
            });
        })
    })
</script>

Controller中的代碼：

public void GetData(string username, int age)
{

}

在Action中成功獲取到了對應的參數值，且數據類型也根據Action中參數的類型進行了相應的轉換。

程序執行結果

Model綁定體如今從當前請求提取相應的數據綁定到目標Action方法的同名參數（不區分大小寫）中。對於這樣的一個Action，若是是Post請求，MVC會嘗試將Form（注意，這裏的Form不是指html中的<form>表單，而是Post方法發送數據的方式，若咱們使用開發者工具查看Post方式發送的請求信息，會看到Form Data一欄）中的值賦值到Action參數中，若是是get請求，MVC會嘗試將QueryString的值賦值到Action參數中。

這裏引用jquery.cookie插件來進行cookie的操做

<body>
    <button id="btn">提交</button>
    <script>
        $(function () {
            //向cookie中寫入值
            $.cookie('key', 'jscookie');

            $('#btn').click(function () {
                location.href = "/home/getvalue";
            });
        })
    </script>
</body>

public void GetValue()
{
    var cookie = Request["key"];
}

程序執行結果

Controller向View中傳值

單個值的傳遞

public ActionResult Index()
{
    //注意，傳遞的值不能是string類型，不然會執行View(string viewName)方法而致使得不到正確結果
    return View(100);
}

<body>
 <p>@Model</p>
</body>

程序執行結果

Json

public ActionResult Index()
{
    return View();
}

public JsonResult SendData()
{
    return Json(new { UserName = "雪飛鴻", Age = 24 });
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
    <p id="message"></p>
    <button id="btn">獲取數據</button>
    <script>
        $(function () {
            $('#btn').click(function () {
                $.ajax({
                    'url': '/home/senddata', 'type': 'post',
                    success: function (data) {
                        $('#message').html('用戶名：' + data.UserName + "<br/>年齡：" + data.Age);
                    },
                    error: function (message) {
                        alert('error:' + message.statusText);
                    }
                });
            });
        });
    </script>
</body>
</html>

程序執行結果

匿名類型

public ActionResult Index()
{
    //使用匿名類向View中傳遞數據
    return View(new { UserName = "雪飛鴻", Age = 24 });
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
</head>
<body>
    <p>用戶名：@Model.UserName</p>
    <p>年齡：@Model.Age</p>
</body>
</html>

由於匿名類型的類型名由編譯器生成，而且不能在源代碼級使用。因此，直接使用匿名類型向View中傳遞數據，在前臺頁面是沒法訪問到匿名類型中的屬性的。執行上面代碼程序會出現錯誤：

程序報錯

針對上述問題，使用Newtonsoft將匿名類型轉換爲json格式便可解決該問題。
使用NuGet引入Newtonsoft.Json包，而後修改代碼以下：

public ActionResult Index()
{
    string json = JsonConvert.SerializeObject(new { UserName = "雪飛鴻", Age = 24 });
    //也能夠直接序列化JSON格式的字符串
    //dynamic jsonObj = JsonConvert.DeserializeObject("{ UserName : \"雪飛鴻\", Age : 24 }");
    dynamic jsonObj = JsonConvert.DeserializeObject(json);
    return View(jsonObj);
}

程序執行結果

ExpandoObject

上面提到，直接使用匿名類型向View中傳遞數據是行不通的，可使用ExpandoObject類型對象來替代匿名類型

public ActionResult Index()
{
    dynamic user = new ExpandoObject();
    user.UserName = "雪飛鴻";
    user.Age = 24;
    return View(user);
}

程序執行結果

ViewBag、ViewData、TempData

public ActionResult Index()
{
    ViewBag.Title = "數據傳遞";
    ViewData["key"] = "傳遞數據";
    //默認狀況下TempData中的數據只能使用一次
    TempData["temp"] = "tempdata";
    return View();
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <p>@ViewData["key"]</p>
    <p>@TempData["temp"]</p>
</body>
</html>

程序執行結果

ViewModel

經過視圖模型將數據傳遞到前端

//視圖模型
public class User
{
    public string UserName { set; get; }
    public int Age { set; get; }
}
//Action
public ActionResult Index()
{
    User user = new User() { UserName = "雪飛鴻", Age = 24 };
    return View(user);
}

@* 設置頁面爲強類型頁面 *@
@model DataTransfer.Controllers.User
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />

</head>
<body>
    <p>用戶名：@Model.UserName</p>
    <p>年齡：@Model.Age</p>
</body>
</html>

程序執行結果

public ActionResult Index()
{
    Response.SetCookie(new HttpCookie("key", "cookie"));
    return View();
}

<body>
    <p id="message"></p>
    <script>
        $(function () {
            var message = $.cookie('key');
            $('#message').text(message);
        })
    </script>
</body>