Как передать данные из серверного кода в JavaScript и использовать их в массиве?

Оффтоп javascript
1

Привет всем! У меня возник вопрос по проекту на ASP.NET. Мне нужно заполнить массив данными из базы данных на сервере и передать их в JavaScript функцию для отображения графика.

Вот пример JavaScript кода, который я использую:

Morris.Bar({
  element: 'график',
  data: [
    { устройство: '1', продажи: 136 },
    { устройство: '2', продажи: 275 }
  ],
  xkey: 'устройство',
  ykeys: ['продажи'],
  labels: ['Продажи']
});

Как мне правильно передать данные с сервера и вставить их в этот массив data? Я пробовал создавать строку на сервере в цикле foreach, но не уверен, что это верный подход. Может есть более элегантный способ? Буду благодарен за любые идеи!

2

привет! я тоже недавно столкнулся с похожей задачей. могу поделиться своим решением - я использовал hidden поле на странице, куда с сервера записывал данные в формате json. примерно так:

@Html.Hidden(“chartData”, JsonConvert.SerializeObject(Model.ChartData))

а потом в javascript просто брал эти данные:

var chartData = JSON.parse($(“#chartData”).val());

Morris.Bar({
element: ‘график’,
data: chartData,
// остальные параметры
});

получилось довольно просто и без лишних запросов. может и тебе подойдет такой вариант?

3

Для твоей задачи лучше всего подойдет передача данных через JSON. На сервере сериализуй данные в JSON, а на клиенте используй AJAX для их получения. Вот пример:

На сервере:

public JsonResult GetData()
{
    var data = // получение данных из БД
    return Json(data, JsonRequestBehavior.AllowGet);
}

На клиенте:

$.getJSON('/Controller/GetData', function(data) {
    Morris.Bar({
        element: 'график',
        data: data,
        // остальные параметры
    });
});

Такой подход позволит гибко обновлять данные без перезагрузки страницы.

4

Можно использовать ViewBag для передачи данных. В контроллере:

ViewBag.Data = JsonConvert.SerializeObject(dataFromDb);

А в представлении:

var morrisData = @Html.Raw(ViewBag.Data);

Morris.Bar({
element: ‘график’,
data: morrisData,
//остальные параметры
});

Так данные попадут прямо в JavaScript без доп. запросов.