MVC5没有将JSON属性名称传递给视图

时间:2016-02-05 14:36:30

标签: json ajax asp.net-mvc

我刚刚开始使用MVC,JSON,AJAX等,并且作为一个侧面项目一直在尝试创建数据viz仪表板。

今天我按照本指南介绍了如何将SQL中的简单数据表作为JSON传递给我的视图:http://techfunda.com/howto/292/list-records-using-json

它主要起作用:JsonResult来自我的控制器并包含但不包含属性名称。 这会导致问题,因为我在处理数据以便在JavaScript中显示时引用属性名称。

这是SQL数据:

SQL Data

这是我的模特:

    public partial class vw_Dash_ChartData : IEnumerable<object>
        {
            [Key]
            [JsonProperty(PropertyName = "Classification")]
            public string Classification { get; set; }

            [JsonProperty(PropertyName = "Count")]
            public int Count { get; set; }

            public IEnumerator<object> GetEnumerator()
            {
                yield return Classification;
                yield return Count;
            }

            System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
            {
                return this.GetEnumerator();
            }
        }

(你会注意到我试图手动设置[JsonProperty(...)]的东西......它没有帮助。)

这是我的JsonResult:

    public JsonResult ChartDataJson()
            {
                var data = new List<vw_Dash_ChartData>();
                data = db.vw_Dash_ChartDatas.ToList();

                var jsonData = Json(data, JsonRequestBehavior.AllowGet);
                return jsonData;
            }

(最初我是从我的DbContext直接发送数据,但后来认为这可能有助于我使用vw_Dash_ChartData模型。这没有什么区别。)

我的观点如下:

    @{
        ViewBag.Title = "Charts";
        AjaxOptions options = new AjaxOptions
        {
            //Confirm = "Are you sure?",
            LoadingElementId = "divLoading",
            OnSuccess = "processDataMethod",
            Url = Url.Action("ChartDataJson")
        };
    }

    <script type="text/javascript">
        function processDataMethod(data) {
            var output = $("#dataZone");
            output.empty();
            for (var i = 0; i < data.length; i++) {
                var chartData = data[i];
                output.append("<tr><td>" + chartData.Classification + "</td><td>" + chartData.Count + "</td></tr>");
            }
        }
    </script>

    <div>
        <table>
            <thead>
                <tr>
                    <th>Classification</th>
                    <th>Count</th>
                </tr>
            </thead>
            <tbody id="dataZone">
            </tbody>
        </table>
    </div>

    @using (Ajax.BeginForm(options))
    {
        <div id="divLoading" style="color: red; font-size: larger;">
             Loading...
        </div>
        <div>
            <button type="submit" id="btnClicky" >Clicky</button>
        </div>
    }

    <script>
        $("#btnClicky").trigger("click");
    </script>

当我加载页面时,这就是我得到的:

page result

这是浏览器开发人员工具中显示的JSON对象;

JSON object

感激不尽的任何提示/想法!另外,如果我做任何愚蠢的事情,请告诉我,因为我想学习这些东西的最佳实践。

1 个答案:

答案 0 :(得分:0)

怎么样?

var jsonData = Json(data.Select(x=> new { 
    Classification = x.Classification,
    Count = x.Count
    })
);

return jsonData;