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

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

CodePudding user response：

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 barren ~~System.Web.dll~~ System.Web.HttpUtility.dll in .NET Core 2.x or later) however the preferred API in .NET Core is

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.

<%@ 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 continue to use HttpUtility.JavaScriptStringEncode(...) in ASP.NET Core (including .NET 6).
- ...but the preferred API is now System.Text.Encodings.Web's JavaScriptEncoder.Default.Encode(...) - and you need to add your own outer delimiting quotes too.
Like so:

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

<html>
<head>
    <script>

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

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

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>

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: