MVC中view与controller传json数据

本文详细介绍了在MVC框架中,如何在View和Controller之间进行JSON数据的传递。包括页面加载时接收JSON数据、View向Controller传递JSON数据以及View发送请求并接收JSON数据的三种情况,提供了具体的代码示例和操作步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在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字符串,传送后要对结果进行解析,才能得到我们要的类。
完整代码之后会发上来。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值