Using variable from a C# class in a Javascript code with Razor

Question

I'm developing a web application with Telerik Kendo in Razor. Here is my problem: I have a variable that I set as a type List<class> .

    @{
ViewBag.Title = "Home Page";
var dpdminst = new DB();
var data = dpdminst.getdata();}

I want to be able to use this variable (data) to set my DataSource in my Javascript:

    <script>
        var displaydata = @data

        $(document).ready(function () {
            $("#grid").kendoGrid({
                height: 550,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                dataSource: {
                    data:displaydata,
                    schema: {
                        model: {
                            fields: {
                                amount: { type: "string" },
                            }
                        }
                    },
                    columns:["amount"]
                }
            });
        });
    </script>

Does anyone know if this can be done?

Here is my JsonResult:

    public JsonResult GetJsonData()
    {
        var DBinst = new DB();
        var TradeData = DBinst.tradedata();
        var json = JsonConvert.SerializeObject(TradeData);
        var result = new JsonResult()
        {
            Data = json
        };
        return result;
    }

Answer 1

Have an action method which returns the data you want in JSON format. in your document.ready event, make an ajax call to get this data and then you can set it as your data source.

public ActionResult GetJsonData()
{
  var dpdminst = new DB();
  var data = dpdminst.getdata();
  return Json(data,JsonRequestBehaviour.AllowGet);
}

and in your view use the getJSON method to get data from this action method and use that as needed. You may format the incoming json as per your UI requirements

$(document).ready(function () {

  $.getJSON("@Url.Action("GetJsonData","YourControllerName")",function(data){
    // you have your json data in the "data" variable. 
    // now you may use it to set the data source of your grid library

  });

});

Answer 2

If you dont want to deal with ajax/json, then I would try to achieve what you want as follows:

<script>
    var displaydata = [
    @foreach (var record in dpdminst.getdata())
    {
        @: { amount: '@record' },
    }
    ];
    $(document).ready(function () {
        $("#grid").kendoGrid({
            height: 550,
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            dataSource: {
                data:displaydata,
                schema: {
                    model: {
                        fields: {
                            amount: { type: "string" },
                        }
                    }
                },
            },
            columns:["amount"]
        });
    });
</script>

Also please notice that you had columns:["amount"] in a wrong place, also this code has to be in your cshtml for razor syntax to work properly.