View returns as text instead of html to a new browser tab (Ajax - MVC)
<p>I'm trying to open some content on a new browser tab.
I pass data from js ajax to MVC controller then it returns the view result back to js but opens it on a new tab as text - there is no html/source code just simple text. How can I return view as Html? Also I tried not to return result back to JS (removed success block from JS) and return View right to browser from MVC but it also will not work. What am I doing wrong ? THX! </p>

<p><strong>JS:</strong></p>

<pre><code>// open row data in new browser tab
    function openInNewTab(e) {

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        console.log(dataItem);
        var rowDetailsObject = new Object();
        rowDetailsObject.ID = dataItem.ID;
        rowDetailsObject.Name = dataItem.Name;
        rowDetailsObject.Number = dataItem.Number;
        rowDetailsObject.Status = dataItem.Status;


        $.ajax({
            type: "POST",
            data: rowDetailsObject,
            url: "/Home/NewTabPage",
            dataType: "html",
            success: function (result) {

                var w = window.open();

                $(w.document.body).html(result);
                console.log(result);
            }

        });
    };
</code></pre>

<p><strong>MVC controller:</strong> </p>

<pre><code> public class HomeController : Controller {

    public ActionResult NewTabPage(ContactList contactList)
    {
        ViewBag.ContactInfo = contactList;


        return View();
    }

}
</code></pre>

<p><strong>HTML:</strong></p>

<pre><code>@{
    { Layout = null; }
}

@{
    ViewBag.Title = "NewTabPage";
}

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;!-- CSS files references --&gt;
    &lt;link href="~/Content/kendo.common.min.css" rel="stylesheet" /&gt;
    &lt;link href="~/Content/kendo.default.min.css" rel="stylesheet" /&gt;
    &lt;link href="~/Content/kendo.default.mobile.min.css" rel="stylesheet" /&gt;
    &lt;link href="~/Content/ProjectCss.css" rel="stylesheet" /&gt;
    &lt;!-- JS files references --&gt;
    &lt;script src="~/Scripts/jquery-3.1.0.js"&gt;&lt;/script&gt;
    &lt;script src="~/Scripts/kendo.all.min.js"&gt;&lt;/script&gt;
    &lt;script src="~/Scripts/app/controller/OpenInNewTab.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div&gt;
    &lt;h2&gt;Detailed data from Kendo row&lt;/h2&gt;


        &lt;p&gt;ID: &lt;span id="ID"&gt;@ViewBag.ContactInfo.ID&lt;/span&gt; &lt;/p&gt;

        &lt;br/&gt;
        Name: @ViewBag.ContactInfo.Name
        &lt;br /&gt;
        Number: @ViewBag.ContactInfo.Number
        &lt;br /&gt;
        Status: @ViewBag.ContactInfo.Status
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>