[SOLVED] howto retrieve asp.net appSettings key from front-end .js file using knockout.js

howto retrieve asp.net appSettings key from front-end .js file using knockout.js

I have an asp.net backend application and i am using web.config and other files to store configuration keys.

I have a front-end built with javascript files using knockout.js.

We would like to know how can we retrieve key value from web.config in backend and read this value in front-end using javascript and knockout.js.

Is there a simple way to do this ???, Views are javascript files and not asp.net web pages

Solution

You can render values directly to JavaScript <script> in your view/HTML/page files.
- And then any JavaScript (with or without Knockout, jQuery, React, Redux, AngularJS, Angular2+, whatever) can access those values immediately.
IMPORTANT: Be sure to correctly JS-encode (not HTML-encode!) C#/.NET String values when rendering them as JavaScript string literals! ...otherwise backslashes and quotes will be rendered literally which will break your rendered <script> element and likely introduce significant XSS vulnerabilities.
- In ASP.NET 4.x, use HttpUtility.JavaScriptStringEncode to ensure C#/.NET string values are correctly and safely encoded to JavaScript strings.
- In ASP.NET Core you can continue to use HttpUtility.JavaScriptStringEncode (in the now almost empty ~~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).
- Note that HttpUtility.JavaScriptStringEncode can optionally add delimiting quotes for you, but System.Text.Encodings.Web.JavaScriptEncoder never renders outer quotes.

For Razor `.cshtml` in ASP.NET MVC and ASP.NET 4.x WebPages:

(I assume your <head> is in _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>

For ASP.NET WebForms `.aspx`/`.ascx`/`.master` and/or ASP.NET MVC 1.x and 2.x using the WebForms ASPX View Engine:

(I assume your <head> is in Layout.master)
Use <%= instead of <%: to render directly, btw, as we don't want to HTML-encode this JavaScript string literal.

<%@ 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>

For ASP.NET Core MVC's Razor `.cshtml` views:

Use @inject IConfiguration to get immediate access to .NET Core's appSettings.
You can use either HttpUtility.JavaScriptStringEncode(...) or System.Text.Encodings.Web.JavaScriptEncoder.Default.Encode(...) in ASP.NET Core (including .NET 6).
- Don't forget outer-quotes!
Use Html.Raw() to render the JS literal string. Do not use the normal Razor "write" syntax (i.e. @( value ) or @value) because it will HTML-encode your JavaScript, which you don't want.
Like so:

@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>

So now the <script> above will be rendered as either this:

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

...or this:

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

Any script (except ES Modules, I think?) can access myAppSetting via the implicit global (aka window) object, as all top-level var declarations become global properties.

So like so:

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

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

} );
</script>

howto retrieve asp.net appSettings key from front-end .js file using knockout.js

For Razor .cshtml in ASP.NET MVC and ASP.NET 4.x WebPages:

For ASP.NET WebForms .aspx/.ascx/.master and/or ASP.NET MVC 1.x and 2.x using the WebForms ASPX View Engine:

For ASP.NET Core MVC's Razor .cshtml views:

For Razor `.cshtml` in ASP.NET MVC and ASP.NET 4.x WebPages:

For ASP.NET WebForms `.aspx`/`.ascx`/`.master` and/or ASP.NET MVC 1.x and 2.x using the WebForms ASPX View Engine:

For ASP.NET Core MVC's Razor `.cshtml` views: