zoukankan      html  css  js  c++  java
  • MVC中view与controller传json数据

    在mvc框架中,不可避免地会遇到前台传值到后台,前台接收后台的值的情况(前台指view,后台指controller),既然要多次使用

    测试用的类的定义

     1     /// <summary>
     2     /// 测试用的Person类,注意要用public,以及访问器get;set
     3     /// </summary>
     4     public class Person
     5     {
     6         public string name { get; set; }
     7         public string sex { get; set; }
     8         public string phone { get; set; }
     9         public Person(string n,string s, string p)
    10         {
    11             name = n;
    12             sex = s;
    13             phone = p;
    14         }
    15     }

    请注意,这里的类的成员访问级别要设置为public,并且要设置访问器。当然不出现在传送中的成员就随便了。
    引入命名空间

    using Newtonsoft.Json;

    以下分三种情况来介绍传值方式


    一、页面载入时就接收json数据(不需用户触发)
    controller的代码:

    1  public ActionResult Index()
    2  {
    3     Person myPerson = new Person("李四", "", "13888888");
    4     ViewData["Person"] = JsonConvert.SerializeObject(myPerson);
    5     return View();
    6  }

    html的代码:
    body部分

    1  <h1>view不发送请求,view载入时直接接收json</h1>
    2  <input id="hdData" type="hidden" value="@ViewData["Person"]"/>
    3  <button id="send0">显示</button>

    scrip部分

    1 $("#send0").click(function(){
    2     var jsonString = $("#hdData").val();
    3     var json = eval('(' + jsonString + ')');
    4     //设置断点,查看json变量的值
    5     alert(json.name);
    6  })

    首先在controller中,用JsonConvert.SerializeObject(string)方法,将类的实体转化为json字符串,再把他装到ViewData[“Person”]中,view中通过input标签的value=”@ViewData[“Person”]”来取得。接着访问input标签,用jq选择器取到input标签的value,最后调用evel方法,把字符串转化为object。

    二、view传json数据到controller
    html代码

     1 $("#send").click(function () {
     2   var person = {
     3   name: "张三",
     4   sex: "",
     5   phone: "135666"
     6   }
     7   $.ajax({
     8      url: "/Home/ReciveJsonData",
     9      type: "post",
    10      data: { jdata: JSON.stringify(person) },
    11      success: function () {
    12         alert("发送成功!")
    13      },
    14      error: function () {
    15        alert("发送失败!")
    16      }
    17    })
    18   })

    这里要注意,确保你的url是正确的,格式为/controller名字(但不需要controller单词)/方法名;type设置为post,data:jdata要与controller方法的参数名一致,必须调用JSON.stringify方法把object转化为json字符串。
    controller的代码

    1 public void ReciveJsonData(string jdata)
    2 {
    3   Person myPerson = JsonConvert.DeserializeObject<Person>(jdata);
    4 }

    使用JsonConvert.DeserializeObject<类名>(字符串)来把传过来的字符串解析为对应的类
    运行结果

     三、view发送请求到服务器,再接收json数据

    html代码

     1 $("#send1").click(function () {
     2         $.ajax({
     3             url: "Home/SendJsonData",
     4             type: "get",
     5             dataType: "json",
     6             success: function (data) {
     7                 alert(data.name);
     8                 //设置断点,查看data的值
     9             },
    10             error: function (e) {
    11                 alert("错误!");
    12             }
    13         })
    14 })

    收到的data,不需要解析,直接就是object类。
    如图所示

     controller代码

    1 public string SendJsonData()
    2 {            
    3     Person myPerson = new Person("李四", "", "13888888");
    4     string jResult = JsonConvert.SerializeObject(myPerson);
    5     return jResult;
    6 }

    注意,方法的返回类型为string,要把类转化为json字符串再传回view。

    总结:总的来说,传送的数据只能是string类型(或许有其他方式,但是其他方式经常出错),无论是view传给controller还是反过来,传送之前要转化为json字符串,传送后要对结果进行解析,才能得到我们要的类。

  • 相关阅读:
    docker 镜像导入导出[转]
    部署coredns
    构建docker私有库
    怎么安装Docker CE 17( Centos 7)
    [转]使用tcpdump抓取HTTP包
    VLOOKUP函数使用
    有趣:256个class选择器可以干掉1个id选择器——张鑫旭
    算警示吧——此文来自张鑫旭(说说CSS学习中的瓶颈)
    不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭
    CSS中width和height与盒子模型的关系
  • 原文地址:https://www.cnblogs.com/lgx5/p/14279250.html
Copyright © 2011-2022 走看看