如何使用 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`視圖：