0

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!

JS:

// 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);
            }

        });
    };

MVC controller: 

 public class HomeController : Controller {

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


        return View();
    }

}

HTML:

@{
    { Layout = null; }
}

@{
    ViewBag.Title = "NewTabPage";
}

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

<div>
    <h2>Detailed data from Kendo row</h2>


        <p>ID: <span id="ID">@ViewBag.ContactInfo.ID</span> </p>

        <br/>
        Name: @ViewBag.ContactInfo.Name
        <br />
        Number: @ViewBag.ContactInfo.Number
        <br />
        Status: @ViewBag.ContactInfo.Status
</div>
</body>
</html>
Dmitriy Klyushin
  • 449
  • 1
  • 4
  • 22
  • Check this post: http://stackoverflow.com/questions/8919019/how-to-post-form-data-to-a-new-window-using-jquery-ajax – Stephen Zeng Aug 17 '16 at 08:45

1 Answers1

0

Change controller to PartialViewResult:

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

    return PartialView();
}
Sandip - Frontend Developer
  • 14,397
  • 4
  • 35
  • 61