使用MVC在View-bag中显示Json反序列化数据

时间:2016-02-09 12:24:12

标签: c# json asp.net-mvc viewbag json-deserialization

我为一个城市生成一个JSON文件,其中包含该城市的有趣地点信息。我的JSON文件看起来像这样 -

{
  "Flensburg":[


    {
    "Name": "Flensburg Firth",
    "Shorttext": "Flensburg Firth or Flensborg Fjord ....",
    "Longitude": 9.42901993,
    "Latitude": 54.7959404,
    "Image": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Flensborg_Fjord_ved_bockholmwik.jpg/400px-Flensborg_Fjord_ved_bockholmwik.jpg"
    },


    {
    "Name": "Naval Academy Mürwik",
    "Shorttext": "The Naval Academy Mürwik is the main train....",
    "Longitude": 9.45944444,
    "Latitude": 54.815,
    "Image": "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/MSM-hauptgebaeude.jpg/400px-MSM-hauptgebaeude.jpg"

    },
    {   
    "Name": "Nordertor",
    "Shorttext": "The Nordertor is an old town gate in Flensburg, Germany....",
    "Longitude": 9.43004861,
    "Latitude": 54.79541778,
    "Images":"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Nordertor_im_Schnee_%28Flensburg%2C_Januar_2014%29.JPG/266px-Nordertor_im_Schnee_%28Flensburg%2C_Januar_2014%29.JPG"

    }

    ]


  }

现在在Model I中创建了两个类POI.cs和RootObject.cs来从这个Json中获取对象。这两个类看起来像这样 -

 namespace Test2_search.Models
 {
   public class POI
   {
    public string Name { get; set; }
    public string Shorttext { get; set; }
    public double Longitude { get; set; }
    public double Latitude { get; set; }
    public string Image { get; set; }
    }
 }

namespace Test2_search.Models
{
 public class RootObject
 {
    public List<POI> poi { get; set; }
 }
}

现在在控制器中我首先实现HttpPost在TextBox中写入名称然后我创建了ActionResult GMap,我在其中反序列化了我存储在APP_data中的JSON数据。我希望以动态方式获取名称。所以如果我写的话在文本框柏林,它将显示柏林的所有反序列化的json数据。如果我写弗伦斯堡,它将显示弗伦斯堡的所有反序列化JSON数据。我为这个方法编写的代码是 -

namespace Test2_search.Controllers
{
 public class HomeController : Controller
  {
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(City objCityModel)
    {
        string name = objCityModel.Name;
        return View();
    }

    public ActionResult GMap(City objCityModel)
    {

        string name = objCityModel.Name;
        ViewBag.Title = name;

        var ReadJson = System.IO.File.ReadAllText(Server.MapPath(@"~/App_Data/"+name+".json"));
        var json = JsonConvert.DeserializeObject<RootObject>(ReadJson);

        ViewBag.Name= json.poi.First().Name;
        ViewBag.ShortText = json.poi.First().Shorttext;
        ViewBag.Latitude =json.poi.First().Latitude;
        ViewBag.Longitude =json.poi.First().Longitude;
        ViewBag.Image =json.poi.First().Image;


        return View();
     }


  }
 }

现在在Index.cshtml中,我实现了一个文本框来写出城市名称 -

@model  Test2_search.Models.City
@{
ViewBag.Title = "Home Page";
}
@using (Html.BeginForm("GMap", "Home"))
{
  <div class="wrapper wrapper-content">

    <div class="row">
        <div class="col-sm-12">
            @Html.TextBoxFor(m => m.Name)
            <label for="somevalue">City Name</label><input type="submit" id="City" name="City" value="Search" />
        </div>
    </div>
</div>
}

在文本框中写入名称后,它将转到Gmap.cshtml。在这个页面中,我想显示json文件中的所有反序列化数据。

@model  Test2_search.Models.City
@{
ViewBag.Title1 = "Google Map View";
 }

 <h2>@ViewBag.Title</h2>
 <p>@ViewBag.ShortText</p>
 <p>@ViewBag.Latitide</p>
 <p>@ViewBag.ShortText</p>

但它不起作用。它显示错误-Source Error:

Line 45:             var json = JsonConvert.DeserializeObject<RootObject>   (ReadJson);
 Line 46: 
 Line 47:             ViewBag.Name= json.poi.First().Name;
 Line 48:             ViewBag.ShortText = json.poi.First().Shorttext;
 Line 49:             ViewBag.Latitude =json.poi.First().Latitude;

2 个答案:

答案 0 :(得分:1)

您的Json格式错误。应该是这样的:

<link href="css/iss_320_530_01_00.css" rel="stylesheet" type="text/css" media="screen and device-width: 320px" />
<link href="css/iss_360_640_01_00.css" rel="stylesheet" type="text/css" media="screen and device-width: 360px" /> Now, css files are loaded for Samsung Galaxy S3 Mini, but not for Samsung Note 4.  

答案 1 :(得分:1)

您在JSON和对象模型之间存在不匹配。

public class RootObject
{
 public string Name {get;set;}
 public List<POI> poi { get; set; }
}

假设您从JSON获得了一个JObject:

jObject.Properties().Select(p=>new RootObject{Name = p.Name, poi = p.Value.ToObject<List<POI>>())

您无法将JSON反序列化为RootObject,因为JSON没有属性poi - 它由POI容器名称键入:)

Full LinqPad测试:

void Main()
{
    var jObject = Newtonsoft.Json.Linq.JObject.Parse(json);
    var objects = jObject.Properties().Select(p=>new RootObject{Name = p.Name, poi = p.Value.ToObject<List<POI>>()});
    objects.Dump();
}

// Define other methods and classes here


 string json = "{\r\n  \"Flensburg\":[\r\n\r\n\r\n    {\r\n    \"Name\": \"Flensburg Firth\",\r\n    \"Shorttext\": \"Flensburg Firth or Flensborg Fjord ....\",\r\n    \"Longitude\": 9.42901993,\r\n    \"Latitude\": 54.7959404,\r\n    \"Image\": \"https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Flensborg_Fjord_ved_bockholmwik.jpg/400px-Flensborg_Fjord_ved_bockholmwik.jpg\"\r\n    },\r\n\r\n\r\n    {\r\n    \"Name\": \"Naval Academy M\u00FCrwik\",\r\n    \"Shorttext\": \"The Naval Academy M\u00FCrwik is the main train....\",\r\n    \"Longitude\": 9.45944444,\r\n    \"Latitude\": 54.815,\r\n    \"Image\": \"https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/MSM-hauptgebaeude.jpg/400px-MSM-hauptgebaeude.jpg\"\r\n\r\n    },\r\n    {   \r\n    \"Name\": \"Nordertor\",\r\n    \"Shorttext\": \"The Nordertor is an old town gate in Flensburg, Germany....\",\r\n    \"Longitude\": 9.43004861,\r\n    \"Latitude\": 54.79541778,\r\n    \"Images\":\"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Nordertor_im_Schnee_%28Flensburg%2C_Januar_2014%29.JPG/266px-Nordertor_im_Schnee_%28Flensburg%2C_Januar_2014%29.JPG\"\r\n\r\n    }\r\n\r\n    ]\r\n\r\n\r\n  }";

public class POI
   {
    public string Name { get; set; }
    public string Shorttext { get; set; }
    public double Longitude { get; set; }
    public double Latitude { get; set; }
    public string Image { get; set; }
    }

 public class RootObject
 {
    public string Name {get;set;}
    public List<POI> poi { get; set; }
 }