MVC5 not passing JSON property names through to view

Question

I'm just starting out with MVC, JSON, AJAX, etc and as a side project have been trying to create a data viz dashboard.

Today I followed this guide on how to pass a simple table of data from SQL as JSON to my view: http://techfunda.com/howto/292/list-records-using-json

It mostly worked: the JsonResult comes through from my controller and contains the values but not the property names. This causes a problem because I'm referencing the property names when I process the data for display in JavaScript.

Here's the SQL data:

Here's my Model:

    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();
            }
        }

(You'll notice I tried to manually set the [JsonProperty(...)] stuff...it didn't help.)

And here's my 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;
            }

(Initially I was sending the data straight through from my DbContext but then thought perhaps it would help to use my vw_Dash_ChartData model. It didn't make a difference).

My view looks like the following:

    @{
        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>

When I load the page, this is what I get:

and this is the JSON object shown in the browser developer tools;

Any tips/ideas gratefully received! Also, if I'm doing anything stupid do let me know as I'd like to learn best practice for this stuff.

score 0 · Accepted Answer · answered Feb 05 '16 at 14:54

0

How about?

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

return jsonData;

answered Feb 05 '16 at 14:54

joaoruimartins

537
4
14

Yes! That works! Question though: Should I still append `JsonRequestBehaviour.AllowGet` to the end of the jsonData declaration? What difference does it make? – Hoppertron Feb 05 '16 at 15:03
That's used mainly for security. Please check it here: http://stackoverflow.com/a/8464685/1551178 – joaoruimartins Feb 05 '16 at 15:20
Yes although someone downvoted it so I was waiting to see if they gave a reason for why. – Hoppertron Feb 05 '16 at 15:27

MVC5 not passing JSON property names through to view

1 Answers1