使用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中，以使剃刀語法正常工作。