如何使用 knockout.js 从 front-end.js 文件中检索 asp.net appSettings 键

Question

我有一个 asp.net 后端应用程序，我正在使用 web.config 和其他文件来存储配置密钥。

我有一个使用 knockout.js 的 javascript 文件构建的前端。

我们想知道如何从后端的 web.config 中检索键值，并使用 javascript 和 knockout.js 在前端读取该值。

有没有简单的方法来做到这一点？？？，视图是 javascript 文件而不是 asp.net web 页面

Answer 1

您可以在视图/HTML/页面文件中将值直接呈现给 JavaScript <script> 。
- And then any JavaScript (with or without Knockout, jQuery, React, Redux, AngularJS, Angular2+, whatever) can access those values immediately.
重要提示：当将 C#/.NET String值呈现为 JavaScript 字符串文字时，请务必正确地进行 JS 编码（不是 HTML 编码！）。 ...否则反斜杠和引号将按字面意思呈现，这将破坏您呈现的<script>元素，并可能引入严重的 XSS 漏洞。
- 在 ASP.NET 4.x 中，使用HttpUtility.JavaScriptStringEncode确保 C#/.NET string值正确且安全地编码为 JavaScript 字符串。
- 在 ASP.NET Core 中可以继续使用HttpUtility.JavaScriptStringEncode （在现在几乎为空~~System.Web.dll~~ System.Web.HttpUtility.dll in .NET Core 2.x or later) however now the preferred API in .NET is System.Text.Encodings.Web.JavaScriptEncoder 's Encode method (tip: use JavaScriptEncoder.Default.Encode ).
- 请注意， HttpUtility.JavaScriptStringEncode可以选择为您添加分隔引号，但System.Text.Encodings.Web.JavaScriptEncoder从不呈现外部引号。

对于 ASP.NET MVC 和 ASP.NET 4.x 网页中的 Razor `.cshtml` ：

（我假设你的<head>在_Layout.cshtml ）

@using System.Configuration
@using System.Web.Configuration

<html>
<head>
    <script>

var myAppSetting = '@( HttpUtility.JavaScriptStringEncode( WebConfigurationManager.AppSettings["myAppSetting"], addDoubleQuotes: false ) )';

    </script>
</head>
<body>
</body>

对于使用 WebForms ASPX 视图引擎的 ASP.NET WebForms `.aspx` / `.ascx` / `.master`和/或 ASP.NET MVC 1.x 和 2.x：

（我假设你的<head>在Layout.master ）
顺便说一句，使用<%=而不是<%:直接渲染，因为我们不想对这个 JavaScript 字符串文字进行 HTML 编码。

<%@ Import Namespace="System.Configuration" %>
<%@ Import Namespace="System.Web.Configuration" %>
<html>
<head>
    <script>

var myAppSetting = '<%= HttpUtility.JavaScriptStringEncode( WebConfigurationManager.AppSettings["myAppSetting"], addDoubleQuotes: false ) %>';

    </script>
</head>
<body>
</body>

对于 ASP.NET Core MVC 的 Razor `.cshtml`视图：

使用@inject IConfiguration立即访问 .NET Core 的 appSettings。
您可以在 ASP.NET 核心中使用HttpUtility.JavaScriptStringEncode(...)或System.Text.Encodings.Web.JavaScriptEncoder.Default.Encode(...) （包括 Z303CB0EF9EDB9082D61BBBE5825）
- 不要忘记外引号！
使用Html.Raw()来呈现 JS 文字字符串。 不要使用普通的 Razor “写入”语法（即@( value )或@value ），因为它会对您不想要的 JavaScript 进行 HTML 编码。
像这样：

@using System.Text.Encodings.Web
@inject IConfiguration Config

<html>
<head>
    <script>

var myAppSetting = '@Html.Raw( JavaScriptEncoder.Default.Encode( this.Config.GetValue<String>("appSettings:myAppSetting") )';

    </script>
</head>
<body>
</body>

Note that if you want null values from your appSettings.json to appear as JavaScript null literals then you need to do that manually - you can use a @functions method to handle this, like so:

@using System.Text.Encodings.Web
@using Microsoft.AspNetCore.Html
@inject IConfiguration Config
@functions{
    
    public HtmlString GetAppSettingJSString( String name )
    {
        if( name is null ) throw new ArgumentNullException(nameof(name));

        String? appSettingValue = this.Config.GetValue<String?>( "appSettings:" + name );
        return ToJSStringLiteral( appSettingValue );
    }

    private static readonly HtmlString _nullLiteral = new HtmlString( "null" );

    public static HtmlString ToJSStringLiteral( String? value )
    {
        if( value is null ) return _nullLiteral;
        
        String jsStringLiteralChars = JavaScriptEncoder.Default.Encode( value );
        return new HtmlString( '"' + jsStringLiteralChars + '"' );
    }
}

<html>
<head>
    <script>
var myAppSetting = @Html.Raw( this.GetAppSettingJSString( "myAppSetting" ) );
    </script>
</head>
<body>
</body>

所以现在上面的<script>将呈现为：

<script>
var myAppSetting = "foobarbaz";
</script>

...或这个：

<script>
var myAppSetting = null;
</script>

任何脚本（除了 ES 模块，我认为？）都可以通过隐式global （又名window ）object 访问myAppSetting ，因为所有顶级var声明都成为全局属性。

就像这样：

<script>
document.addEventListener( 'DOMContentLoaded', function() {

    alert( "myAppSetting: \"" + window.myAppSetting + "\"" );

} );
</script>

如何使用 knockout.js 从 front-end.js 文件中检索 asp.net appSettings 键

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-09-02 18:33:41

对于 ASP.NET MVC 和 ASP.NET 4.x 网页中的 Razor `.cshtml` ：

对于使用 WebForms ASPX 视图引擎的 ASP.NET WebForms `.aspx` / `.ascx` / `.master`和/或 ASP.NET MVC 1.x 和 2.x：

对于 ASP.NET Core MVC 的 Razor `.cshtml`视图：

如何使用 knockout.js 从 front-end.js 文件中检索 asp.net appSettings 键

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-09-02 18:33:41

对于 ASP.NET MVC 和 ASP.NET 4.x 网页中的 Razor .cshtml ：

对于使用 WebForms ASPX 视图引擎的 ASP.NET WebForms .aspx / .ascx / .master和/或 ASP.NET MVC 1.x 和 2.x：

对于 ASP.NET Core MVC 的 Razor .cshtml视图：

解决方案1
0 已采纳 2022-09-02 18:33:41

对于 ASP.NET MVC 和 ASP.NET 4.x 网页中的 Razor `.cshtml` ：

对于使用 WebForms ASPX 视图引擎的 ASP.NET WebForms `.aspx` / `.ascx` / `.master`和/或 ASP.NET MVC 1.x 和 2.x：

对于 ASP.NET Core MVC 的 Razor `.cshtml`视图：