如何从 ASP.NET 将值传递给外部 Javascript 脚本答案

【问题标题】：How to pass values to an external Javascript script from ASP.NET如何从 ASP.NET 将值传递给外部 Javascript 脚本
【发布时间】：2021-05-26 01:35:46
【问题描述】：

我有一组 KPI 数据需要从我的 ASP.NET 项目传递到 Javascript 文件。我想我可以使用 ViewBag 来做到这一点......这是控制器中的内容：

    public ActionResult KPI()
    {
        if (Session["OrganizationID"] == null)
        {
            return RedirectToAction("Unauthorized", "Home");
        }

        else
        {
            int orgId;
            int.TryParse(Session["OrganizationID"].ToString(), out orgId);
            var user = db.Users.Find(User.Identity.GetUserId());
            var organization = user.Organizations.Where(o => o.OrganizationID == orgId).FirstOrDefault();
            var reports = db.Reports.ToList();

            try
            {
                var org_reports = (from r in reports
                                   where r.OrganizationID == organization.OrganizationID
                                   select r).ToList();                    
                
                var kpi = new KPI(org_reports);
                var jsonKPI = JsonConvert.SerializeObject(kpi);
                ViewBag.orgData = jsonKPI;
            }
            catch (ArgumentNullException e)
            {
                return RedirectToAction("Unauthorized", "Home");
            }
        }
        return View();
    }

从视图中我尝试使用隐藏值，并且在调用脚本时也只是将它们作为参数传递：

<input  type="hidden" id="orgData" value=@ViewBag.orgData>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="~/Scripts/KPIs.js">
    orgData = @ViewBag.orgData;
</script>

然后我想在我的 JS 脚本中读取这个值并将其从字符串解析为 JSON：

function myFunction(){
   var test1 = JSON.parse(document.getElementById('orgData'); // Doesn't work
   var test2 = JSON.parse(orgData); // Doesn't work
}

这些方法似乎都不起作用。我的错误是什么？

【问题讨论】：

标签： javascript c# html asp.net asp.net-mvc

【解决方案1】：

您似乎忘记了引号。

<input  type="hidden" id="orgData" value=@ViewBag.orgData>

应该是

<input  type="hidden" id="orgData" value="@ViewBag.orgData">

此外，您的脚本标签内的代码将永远不会被执行，因为脚本标签上有一个 src 属性。带有 src 属性的脚本标签内的代码永远不会被执行。

<script type="text/javascript" src="~/Scripts/KPIs.js">
    orgData = @ViewBag.orgData;
</script>

应该改为

<script type="text/javascript" src="~/Scripts/KPIs.js" />
<script>
    orgData = @ViewBag.orgData;
</script>

【讨论】：

进行了更正，但我仍然无法将字符串解析为 JSON

【解决方案2】：

您应该使用 Html.Raw，以避免 ASP.NET 转义您的值：

orgData = @Html.Raw(ViewBag.orgData);

另外，如果这是一个Json，它也是一个有效的JS对象，所以你不需要解析，它已经是一个JS对象了。

【讨论】：

【解决方案3】：

我解决了！通过视图传递 KPI 模型，然后就很简单了：

var orgData = @Html.Raw(Json.Encode(Model));

感谢大家提供的帮助。

【讨论】：

这正是我的答案