javascript - 在服务器端调用 MVC 中使用 javascript 变量

Question

我目前正在使用 power BI embedded 将报表嵌入到网络应用程序中，我想创建功能以使用下拉框在组中的报表之间切换。我已经设法用适当的数据填充下拉框，但现在正在努力在报告之间实际切换。如果我将数字硬编码到服务器端调用中，我可以成功地做到这一点，但显然这是不可扩展的，也不是解决方案。下面是我的 cshtml，我需要一种方法让 reportSelector.onchange 中的“@Model”调用能够看到所选变量。

@model TaskWebApp.Models.EmbedConfig[]

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@if (!string.IsNullOrEmpty(Model[0].ErrorMessage))
{
    <div id="errorWrapper">
        <h2>
            Error
        </h2>
        @Model[0].ErrorMessage
    </div>

    return;
}

<div>
    <p>Select report</p>
    <select id="reportSelector"></select>
</div>
<div id="reportContainer"></div>

<script>
    // Read embed application token from Model
    var accessToken = "@Model[0].EmbedToken.Token";

    // Read embed URL from Model
    var embedUrl = "@Html.Raw(Model[0].EmbedUrl)";

    // Read report Id from Model
    var embedReportId = "@Model[0].Id";

    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models;

    // Embed configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // This also includes settings and options such as filters.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: models.Permissions.All,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: true
        }
    };
    // Get a reference to the embedded report HTML element
    var reportContainer = $('#reportContainer')[0];

    // Embed the report and display it within the div container.
    var report = powerbi.embed(reportContainer, config);

    var reportSelector = $('#reportSelector')[0];
    var optionString = "@Html.Action("PopulateDropdown", "Embed", Model[0].Reports)";
    reportSelector.onchange = function () { 
        var selected = this.selectedIndex;
        var accessToken = "@Model[selected].EmbedToken.Token";

        // Read embed URL from Model
        embedUrl = "@Html.Raw(Model[selected].EmbedUrl)";

        // Read report Id from Model
        embedReportId = "@Model[selected].Id";

        // Get models. models contains enums that can be used.
        models = window['powerbi-client'].models;

        // Embed configuration used to describe the what and how to embed.
        // This object is used when calling powerbi.embed.
        // This also includes settings and options such as filters.
        // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
        config = {
            type: 'report',
            tokenType: models.TokenType.Embed,
            accessToken: accessToken,
            embedUrl: embedUrl,
            id: embedReportId,
            permissions: models.Permissions.All,
            settings: {
                filterPaneEnabled: true,
                navContentPaneEnabled: true
            }
        };
        var report = powerbi.embed(reportContainer, config);
    }
    reportSelector.innerHTML = optionString;
</script>

让我知道是否有必要查看模型或 Controller 。感谢您提供任何帮助，因为我对 MVC 有点陌生，并且正在努力解决无法以我想要的方式使用变量的问题。

编辑:创建下拉菜单的函数:

public string PopulateDropdown(ODataResponseListReport reports)
        {
            foreach (Claim claim in ClaimsPrincipal.Current.Claims)
            {
                if (claim.Type == "extension_GroupID")
                {
                    GroupId = claim.Value;
                }
            }
            string retVal = "";
            for (int i = 0; i < reports.Value.Count; i++)
            {
                retVal += "<option>" + reports.Value.ElementAtOrDefault(i).Name + "</option>";
            }
            return retVal;
        }

Answer 1

@Model 是 Razor 代码，在发送到 View 之前在服务器上进行解析。使用 var accessToken = "@Model[selected].EmbedToken.Token"; 等会引发错误，因为 selected 是一个 javascript 变量，此时不存在 - 它不是在范围内。

您可以使用 将您的模型分配给 javascript 数组

var model = var model = @Html.Raw(Json.Encode(Model))

然后使用您的索引器访问它

var accessToken = model[selected].EmbedToken.Token;