Передача переменной C# с использованием MVC/Razor для использования с Dygraph

Итак, вот моя проблема, и я уверен, что это что-то очень простое. Я относительно новичок в веб-разработке, и у меня возникла небольшая проблема, которую я просто не могу понять.

У меня есть этот код в представлении MVC. . .

@{
var data = "";
var count = 1;
foreach (var item in ViewModel.Data)
{
    data += count.ToString() + "," + item.Reading.ToString() + "\n";
    count++;
}

}

Я хочу передать эту переменную «данные» очень маленькому скрипту, чтобы создать график с помощью Dygraph. Это то, что у меня сейчас есть, и я считаю, что это должно работать, но это не так.

<script type="text/javascript">
g = new Dygraph(document.getElementById("readingGraph"), @data,{ labels: ["Sample Number", "Reading"] });
</script>

Я знаю, что сам скрипт будет работать. Если я жестко закодирую некоторые значения CSV в строку, где @data, появится график, и все в порядке. При наличии @data график не загружается, и скрипт вообще не запускается (я поместил туда предупреждение («привет»), чтобы увидеть, появится ли оно, но этого не произошло).

Кроме того, я знаю, что строка «строится» правильно, потому что я установил точки останова в Visual Studio и проверил.

Любая помощь вообще была бы отличной, ребята. Заранее спасибо.


javascript c# razor asp.net-mvc-4 dygraphs
person Ilnetd    schedule 17.07.2014    source источник
comment
Возможно, вам просто нужны кавычки: @data. Если вы этого не сделаете, то вы передаете строку, разделенную запятыми, и, таким образом, передаете несколько параметров js.   -  person Tim Hobbs    schedule 17.07.2014
comment
Да, сэр, я пытался использовать кавычки вокруг @data. Есть ли способ «сказать» js, что это должна быть одна длинная строка? То есть: в С# @blabla.   -  person Ilnetd    schedule 17.07.2014
comment
Способ, о котором я упоминал выше. @data будет просто заменено значением. Для js тоже подойдет '@data'. Чтобы получить лучшее представление, установите переменную в значение, а затем console.log или что-то еще: var data = "@data";. Кроме того, я думаю, что новые строки могут быть чем-то, что вызывает у вас проблемы. Я не знаком с Dygraph. Может быть, формат данных, которые вы передаете, является частью проблемы? Согласно документам, этот второй параметр должен быть файлом, поэтому я думаю, что то, что вы пытаетесь сделать, не сработает.   -  person Tim Hobbs    schedule 18.07.2014
comment
В документах указывается путь к файлу, или необработанные значения, разделенные запятыми. Сначала я тоже думал об концах строк, но в приведенном примере показано \n. Единственное отличие, которое я вижу, это то, что значения переменных @data не заключены в кавычки, т.е. data += count.ToString() + "," ... -> data += "\"" + count.ToString() + ","... (или еще лучше, string.Format(...) :) )   -  person Fred    schedule 18.07.2014

Ответы (2)


arrow_upward
1
arrow_downward

Смешивание javascript и Razor требует, чтобы вызов Razor был окружен любым блоком кода.

@{ ... } или @if(condition){} и т. д.

и помещая сам код в экранированную последовательность

@: или тег <text>.

Итак, зная это, вы можете сделать что-то вроде

<script>
    var jsData = '';
    @{
        <text>
            jsData = '@data';
        </text>
     }

     g = new Dygraph(document.getElementById("readingGraph"), jsData,{ labels: ["Sample Number", "Reading"] });

</script>

Ознакомьтесь с Смешайте код Razor и Javascript и Использование Razor в JavaScript

person AmmarCSE    schedule 18.07.2014

arrow_upward
1
arrow_downward

Я нашел проблему. Литеральная строка JS не может охватывать несколько строк (именно так я передавал ей информацию через созданную в С# переменную data).

Мне пришлось добавить '@' в код C#, чтобы превратить его в строковый литерал. . .

foreach (var item in CompletePreview.BatteryData)
{
    data += count.ToString() + "," + item.Voltage + @"\n"; //note the new @ in front of "\n"
    count++;
}

Сценарий пришлось изменить, чтобы заменить литерал '\n' на тот, который разбил бы его в JS.

g = new Dygraph(document.getElementById("voltGraph"), jsgraphData.replace('\n','\n'), { labels: ["Sample Number", "Voltage"] });
alert('graphs should follow');

Спасибо всем за помощь. Я очень ценю это.

person Ilnetd    schedule 18.07.2014
comment
Кстати, я знаю, что код не совсем совпадает, он вырезается и вставляется из фактического кода, с которым я работал, а не из общих имен переменных и тому подобного. Извините, что поленился и не изменил его, чтобы он выглядел как мой первый пример. - person Ilnetd; 18.07.2014