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

check this [Link](http://stackoverflow.com/questions/16685226/use-c-sharp-class-object-in-javascript) use Newtonsoft.Json library for easy job completion. — Srikanth, Jul 17 '14 at 17:41
Nick, I believe two very different but both viable approaches were provided to resolve your problem, so if you need additional help then ask, but other than that I don't see a point in leaving this thread open. — Michal Hosala, Jul 23 '14 at 08:43

score 2 · Answer 1 · answered Jul 17 '14 at 17:44

2

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

  });

});

answered Jul 17 '14 at 17:44

Shyju

214,206
104
411
497

Is there a reason I cannot see `Json(...,...)` as a function? I'm only using the following Libraries: `using System.Web.Script.Serialization;` `using System.Web.Mvc;` `using Newtonsoft.Json;` – Nick Jul 18 '14 at 13:52
@Nick It is `Json` which is in `System.Web.Mvc` namespace. – Shyju Jul 18 '14 at 13:54
For some reason I can't create the ActionResult the same way. Is my implementation above correct? – Nick Jul 18 '14 at 14:11
@Nick, What error are you getting ? Also, why are you not using the Json method already exist to convert your object to Json ? Try the code i provided in my answer. – Shyju Jul 18 '14 at 14:15
I get the error ' The name Json does not exist in the current context' – Nick Jul 18 '14 at 14:17
@Nick, Is your code inside an mvc controller ? Make sure you have a reference to System.Web.Mvc dll in your project. – Shyju Jul 18 '14 at 14:26

score 0 · Answer 2 · answered Jul 18 '14 at 09:42

0

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.

answered Jul 18 '14 at 09:42

Michal Hosala

5,570
1
22
49

1

Dear downvoters, I do not have reputation to spare, so at least try to be so nice to provide a feedback as why you think this solution is not useful, thank you! I find this solution perfectly viable if Nick's intention is to only set the datasource once and he is not stating explicitly whether he wants to handle dynamic changes of return value of dpdminst.getdata(). – Michal Hosala Jul 18 '14 at 10:37
however with this approach the last row in `displaydata` will have a comma, which would be incorrect. You would need some logic to set the comma while you are not parsing the last row. – Nick Jul 18 '14 at 14:00
No it will not, just try the solution and see for yourself. Here is how the result would look like if dpminst.getdata() would be returning List of two strings "xxx" and "yyy": http://dojo.telerik.com/ixiL – Michal Hosala Jul 18 '14 at 14:14

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

Does anyone know if this can be done?

2 Answers2