通过mvc中的ajax发布json数据

时间:2014-12-10 05:36:47

标签: ajax asp.net-mvc json

<script type="text/javascript">
    var car = [{ "name": "Audi", "Model": "A6", "color": "White", "type": "sedan", "date": "12/4/2014", "range": "20" },
   { "name": "Honda", "Model": "City", "color": "Black", "type": "sedan", "date": "12/12/2014", "range": "27" },
   { "name": "Mahindra", "Model": "Scorpio", "color": "Black", "type": "SUV", "date": "9/12/2014", "range": "29" },
   { "name": "Benz", "Model": "320D", "color": "Red", "type": "sedan", "date": "7/12/2014", "range": "37" },
   { "name": "hyundai", "Model": "Accent", "color": "Metal", "type": "sedan", "date": "11/12/2014", "range": "31" },
   { "name": "Skoda", "Model": "Rapid", "color": "Grey", "type": "sedan", "date": "12/1/2014", "range": "65" }];


    var rec = JSON.stringify(car);

$(function () {
    $("#btn").click(function () {
        $.ajax({
            type: "POST",
            url: "home/json",
            dataType:'json',
            data: {"data":"car"},
            success: function (data) {
                alert(data);
}});});

控制器:

public ActionResult json(string data) 
{
  return Json(data,JsonRequestBehavior.AllowGet);
}

任何人都可以帮我将数据发布到控制器并将其恢复为ajax中的数据。

1 个答案:

答案 0 :(得分:0)

首先在MVC应用程序中创建一个用于保存数据的类。请注意属性名称如何与JSON数据中的属性名称匹配。您可以使用不同的属性作为日期,但现在我将其保留为字符串。

public class Car

{

    public String Name { get; set; }

    public String Model { get; set; }

    public String Color { get; set; }

    public String Type { get; set; }

    public String Date { get; set; }

    public int Range { get; set; }

}

然后修改你的控制器以使用这个新类。请注意这是如何绑定到支持您发送的多个数据集的Car集合。

public ActionResult json(Car[] data) 
{
  return Json(data,JsonRequestBehavior.AllowGet);
}

您还需要对响应进行字符串化,否则您将无法在消息框中输出它。将脚本更新为以下内容。

$("#btn").on( "click", function( event ) {
        $.ajax({
            type: "POST",
            url: "@Url.Action("json")",
            dataType: 'json',
            data: { "data": car },
            success: function (data) {


                alert(JSON.stringify(data));
            }
        });
    });

希望这会有所帮助。如果您希望我扩展任何内容,请告诉我。

UPDATE - 没有Car类(映射到字符串)

动作

public ActionResult json(string data)
{

    return Json(data, JsonRequestBehavior.AllowGet);
}

脚本 - 通过rec代替汽车

var rec = JSON.stringify(car);

$("#btn").on( "click", function( event ) {
        $.ajax({
            type: "POST",
            url: "@Url.Action("json")",
            dataType: 'json',
            data: { "data": rec },
            success: function (data) {


                alert(JSON.stringify(data));
            }
        });
    });