Razor Html in JSON String

Question

I'm trying to use Razor markup with HTML inside a JSON string to work with an Infragistics GridView in a MVC application. Yes, it's quite the workaround, but it's better than recoding the entire controller to be able to use the Infragistics data binding tool (especially since I'm working with DB2 and not anything like MSSQL).

Anyway, the code in one of my views is as follows:

<script type="text/javascript">
 var data = [];
 var i = 0;
 @foreach (var item in Model)
 {
 var width = item.count_primary / item.count_total;
 <text>
 data[i] = {
 "omkt": '@item.omkt', "dmkt": '@item.dmkt', "ibu": '@item.ibu', 
 "count_total": '@item.count_total', "count_primary": '@item.count_primary',
 "primary_ratio": '@item.count_primary' / '@item.count_total',
 "primary_ratio_graph": "<td><div style=\"background-color:#00F;width:@width%;height:10px;border:1px solid #000;\"><\/td>"
 };
 i++;
 </text>
 }
...

The issue is a parsing error that occurs on the primary_ratio_graph line. I'm using escape characters on all the quotes, but do I need to be using escape characters on anything else?

Answer 1

you are escaping the forward slash. I don't think you have to escape the forward slash on the end tag of your td element. try this:

"<td><div style=\"background-color:#00F;width:@width%;height:10px;border:1px solid #000;\"></td>"

• krillgar: Javascript is different than C#. Both single and double quotes will work for strings. You don't even need to escape those double quotes around your style, you can just use single quotes.
• kmacdonald: Actually because he is using razor he does. Otherwise you will end up with a compile time error. Remember that razor is actually using the .net stack to create a view. it is not raw HTML.