如何从ajax渲染视图？

Question

I am using asp .net mvc along with telerik mvc ui and telerik reporting, I have a controller

    [HttpPost]
    public ActionResult GenerateReport(List<Guid> invoiceIds)
    {
        var apvReports = _reportsLogic.GenerateAccountPayableVouchers(invoiceIds);
        string json = JsonConvert.SerializeObject(apvReports);
        string reportSource = typeof(AccountsPayableVoucher).AssemblyQualifiedName + "--" + json;

        return View("CustomReportViewer", (object)reportSource);
    }

it is being called by my ajax in the view, here is my ajax function

<script>
function generateAccountsPayableReports() {
    var ms = $("#msInvoicesAPV").data("kendoMultiSelect");
    var invoices = ms.dataItems();
    var invoiceIds = [];

    invoices.forEach(function (invoice) {
        invoiceIds.push(invoice.Id);
    });

    $.ajax({
        type: "POST",
        url: "/APV/GenerateReport ",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ 'invoiceIds': invoiceIds }),
        success: function (result) {
            if (result) {
                var w = window.open();
                $(w.document.body).html(result);
            }
        },
        failure: function (result) {
            console.error("result: ", result);
        },
        error: function (result) {
            console.error("result: ", result);
        }
    });
}

I am getting a error such as

I have tried this and it works, here is the js and the controller

<script>
function generateAccountsPayableReports() {
    var ms = $("#msInvoicesAPV").data("kendoMultiSelect");
    var invoices = ms.dataItems();
    var invoiceIds = [];

    invoices.forEach(function (invoice) {
        invoiceIds.push(invoice.Id);
    });

    $.ajax({
        type: "POST",
        url: "/APV/GenerateReportData ",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ 'invoiceIds': invoiceIds }),
        success: function (result) {
            if (result) {
                var encodedResult = encodeURIComponent(result);
                window.open('/APV/GenerateReport?reportSource=' + encodedResult)
            }
        },
        failure: function (result) {
            console.error("result: ", result);
        },
        error: function (result) {
            console.error("result: ", result);
        }
    });
}

    [HttpPost]
    public string GenerateReportData(List<Guid> invoiceIds)
    {
        var apvReports = _reportsLogic.GenerateAccountPayableVouchers(invoiceIds);
        string json = JsonConvert.SerializeObject(apvReports);
        string reportSource = typeof(AccountsPayableVoucher).AssemblyQualifiedName + "--" + json;

        return reportSource
    }

    public ActionResult GenerateReport(string reportSource)
    {
        return View("CustomReportViewer", (object)reportSource);
    }

but it has a flaw, if the data is too large it is not good to pass it by URL

what is the best approach in this kind of scenario?