Question

我试图通过jQuery ajax将一些数据发布到Asp.Net MVC控制器。我有以下课程与我合作：

public class InnerStyle
{
   [JsonProperty("color")]
   public string HeaderColor { get; set; }
   [JsonProperty("font-size")]
   public string HeaderFontSize { get; set; }
   [JsonProperty("font-family")]
   public string HeaderFontFamily { get; set; }
}

post方法如下：

public JsonResult UpdateRecord(InnerStyle innerStyle)
{
   //Do some validation 

   return Json("OK");
}

我的jQuery看起来像：

$('#font-size-ddl').change(function () {
   var value = $(this).val();
   headerObj["font-size"] = value;
   console.log(JSON.stringify({ innerStyle: headerObj }));
   $.ajax({
          type: "POST",
          url: "@Url.Action("UpdateRecord", "Document")",
          data: JSON.stringify({ innerStyle: headerObj}),
          contentType: "application/json; charset=utf-8",
          success: function (data) {
          console.log(data);
          }
     });
});

上述更改事件中的console.log生成以下JSON字符串：

{"innerStyle":{"text-align":"","font-size":"20px","color":""}}

现在我遇到的问题是，如果我在UpdateRecord操作上设置了一个断点，看看innerStyle对象的内容是否为空。请问有人告诉我哪里出错了。

Answer 1

我尝试使用以下代码并且工作正常。

$.ajax({
          type: "POST",
          url: "@Url.Action("UpdateRecord", "Document")",
          data: JSON.stringify({"text-align":"","font-size":"20px","color":""}),
          contentType: "application/json; charset=utf-8",
          success: function (data) {
          console.log(data);
          }
     });

我只是删除了参数名称＆＃34; innerStyle＆＃34; 。我刚注意到一件可能是拼写错误的事情。您正在传递一个属性＆＃34; text-align＆＃34;：＆＃34;＆＃34; 而不是＆＃34; font-family＆＃34; 。因此，它不会在控制器的动作 UpdateRecord（InnerStyle innerStyle）中填充所有属性。你应该传递类似于下面的json对象来映射控制器上的整个对象 UpdateRecord（InnerStyle innerStyle）

{
  "color": "sample string 1",
  "font-size": "sample string 2",
  "font-family": "sample string 3"
}

Answer 2

@Code，您的代码很好。只是当你通过ajax击中控制器时，你不能使用[Json Property]。你必须使用真正的类属性。

 $('#font-size-ddl').change(function () {
    var value = $(this).val();
    var headerObj = {};
    headerObj["HeaderColor"] = "Red";
    headerObj["HeaderFontSize"] = value;
    headerObj["HeaderFontFamily"] = "Arial";
    console.log(JSON.stringify({ custom: headerObj }));
    $.ajax({
        type: "POST",
        url: "@Url.Action("UpdateRecord", "Employee")",
        traditional: true,
        data: JSON.stringify({ custom: headerObj }),
        dataType: JSON,
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            console.log(data);
        }
    });
});

将json传递给mvc控制器

2 个答案: