Pass HTML Table string through Json from controller to view

I want to achieve this:

public System.Web.Mvc.ActionResult ExposureGrid(Guid? id, decimal stdDev)
        {
            //return null;
            try
            {
                var str = "<table border=1>";
                str += "<tr><th>Date</th><th>Expected Credit Exposure</th><th>Max Credit Exposure</th></tr>";

                str += "<tr><td>12/1/2010</td><td>100,000</td><td>50</td></tr>";
                str += "<tr><td>12/2/2010</td><td>101,000</td><td>100</td></tr>";
                str += "<tr><td>12/3/2010</td><td>102,000</td><td>150</td></tr>";
                str += "<tr><td>12/4/2010</td><td>103,000</td><td>200</td></tr>";
                str += "<tr><td>12/5/2010</td><td>104,000</td><td>250</td></tr>";
                str += "<tr><td>12/6/2010</td><td>105,000</td><td>300</td></tr>";
                str += "<tr><td>12/7/2010</td><td>106,000</td><td>350</td></tr>";

            str += "</table>";
            return Json(str);
            }
            catch (Exception e)
            {
                return Json(e.ToString());
            }
        }

Then I take that Json and put it on my view like this:

$.ajax({
                type: "POST",
                url: "<%= Url.Action("ExposureGrid", "Indications") %> ",
                dataType: "jsonData",
                data: tableJSON,
                success: function(data) {
                      existingDiv = document.getElementById('table');
                      existingDiv.innerHTML = data;
                }
            });

But what shows on the view in HTML is this:

"\u003ctable border=1\u003e\u003ctr\u0开发者_如何学运维03e\u003cth\u003eDate\u003c/th\u003e\u003cth\u003eExpected Credit Exposure\u003c/th\u003e\u003cth\u003eMax Credit Exposure\u003c/th\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e12/1/2010\u003c/td\u003e\u003ctd\u003e100,000\u003c/td\u003e\u003ctd\u003e50\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e12/2/2010\u003c/td\u003e\u003ctd\u003e101,000\u003c/td\u003e\u003ctd\u003e100\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e12/3/2010\u003c/td\u003e\u003ctd\u003e102,000\u003c/td\u003e\u003ctd\u003e150\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e12/4/2010\u003c/td\u003e\u003ctd\u003e103,000\u003c/td\u003e\u003ctd\u003e200\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e12/5/2010\u003c/td\u003e\u003ctd\u003e104,000\u003c/td\u003e\u003ctd\u003e250\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e12/6/2010\u003c/td\u003e\u003ctd\u003e105,000\u003c/td\u003e\u003ctd\u003e300\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e12/7/2010\u003c/td\u003e\u003ctd\u003e106,000\u003c/td\u003e\u003ctd\u003e350\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e"

How do I fix this?

change:

dataType: "jsonData",

to

dataType: "json",

hopefully, issue should be resolved.

Why you don't load it directly from html ? Instead of rendering a Json (content-type: application/json), you return it as a partial html element (content-type: text/html) and from JQuery you load it with dataType: "html".

Doing so, you even wouldn't have to change your success method !