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