MVC中view與controller傳json數據

在mvc框架中,不可避免地會遇到前臺傳值到後臺,前臺接收後臺的值的情況(前臺指view,後臺指controller),既然要多次使用,就要好好總結,這樣不僅自己能記住這些傳值的方式和語法,也可能會幫到一些新手。下面開始。

準備工作
測試用的類的定義

    /// <summary>
    /// 測試用的Person類,注意要用public,以及訪問器get;set
    /// </summary>
    public class Person
    {
        public string name { get; set; }
        public string sex { get; set; }
        public string phone { get; set; }
        public Person(string n,string s, string p)
        {
            name = n;
            sex = s;
            phone = p;
        }
    }

請注意,這裏的類的成員訪問級別要設置爲public,並且要設置訪問器。當然不出現在傳送中的成員就隨便了。
引入命名空間

using Newtonsoft.Json;

以下分三種情況來介紹傳值方式
一、頁面載入時就接收json數據(不需用戶觸發)
controller的代碼:

public ActionResult Index()
        {
            Person myPerson = new Person("李四", "女", "13888888");
            ViewData["Person"] = JsonConvert.SerializeObject(myPerson);
            return View();
        }

html的代碼:
body部分

<h1>view不發送請求,view載入時直接接收json</h1>
    <input id="hdData" type="hidden" value="@ViewData["Person"]"/>
    <button id="send0">顯示</button>

scrip部分

$("#send0").click(function(){
        var jsonString = $("#hdData").val();
        var json = eval('(' + jsonString + ')');
        //設置斷點,查看json變量的值
        alert(json.name);
    })

首先在controller中,用JsonConvert.SerializeObject(string)方法,將類的實體轉化爲json字符串,再把他裝到ViewData[“Person”]中,view中通過input標籤的value=”@ViewData[“Person”]”來取得。接着訪問input標籤,用jq選擇器取到input標籤的value,最後調用evel方法,把字符串轉化爲object

二、view傳json數據到controller
html代碼

$("#send").click(function () {
        var person = {
            name: "張三",
            sex: "男",
            phone: "135666"
        }
        $.ajax({
            url: "/Home/ReciveJsonData",
            type: "post",
            data: { jdata: JSON.stringify(person) },
            success: function () {
                alert("發送成功!")
            },
            error: function () {
                alert("發送失敗!")
            }
        })
    })

這裏要注意,確保你的url是正確的,格式爲/controller名字(但不需要controller單詞)/方法名;type設置爲post,data:jdata要與controller方法的參數名一致,必須調用JSON.stringify方法把object轉化爲json字符串。
controller的代碼

public void ReciveJsonData(string jdata)
        {
            Person myPerson = JsonConvert.DeserializeObject<Person>(jdata);

        }

使用JsonConvert.DeserializeObject<類名>(字符串)來把傳過來的字符串解析爲對應的類
運行結果
這裏寫圖片描述

三、view發送請求到服務器,再接收json數據
html代碼

$("#send1").click(function () {
        $.ajax({
            url: "Home/SendJsonData",
            type: "get",
            dataType: "json",
            success: function (data) {
                alert(data.name);
                //設置斷點,查看data的值
            },
            error: function (e) {
                alert("錯誤!");
            }
        })
    })

收到的data,不需要解析,直接就是object類。
如圖所示
這裏寫圖片描述

controller代碼

public string SendJsonData()
        {            
            Person myPerson = new Person("李四", "女", "13888888");
            string jResult = JsonConvert.SerializeObject(myPerson);
            return jResult;
        }

注意,方法的返回類型爲string,要把類轉化爲json字符串再傳回view。

總結:總的來說,傳送的數據只能是string類型(或許有其他方式,但是其他方式經常出錯),無論是view傳給controller還是反過來,傳送之前要轉化爲json字符串,傳送後要對結果進行解析,才能得到我們要的類。
完整代碼之後會發上來。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章