使用Razor在Javascript代码中使用C＃类中的变量

Question

我正在与Razor中的Telerik Kendo开发Web应用程序。 这是我的问题：我有一个设置为List<class>类型的变量。

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

我希望能够使用此变量（数据）在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>

有谁知道这可以做到吗？

这是我的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

有一个操作方法可以以JSON格式返回所需的数据。 在document.ready事件中，进行ajax调用以获取此数据，然后可以将其设置为数据源。

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

在您看来，请使用getJSON方法从此操作方法获取数据并根据需要使用。 您可以根据您的UI要求格式化传入的json

$(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

如果您不想处理ajax / json，那么我将尝试实现您想要的目标，如下所示：

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

另请注意，您在错误的位置输入了column：[“ amount”]，该代码也必须位于您的cshtml中，以使剃刀语法正常工作。