In this article I will explain with an example, how to read (get) value from the AppSettings section of the Web.Config file in JavaScript in ASP.Net using C# and VB.Net.
It is not possible to read the AppSetting value directly in JavaScript and hence using JavaScript XmlHttpRequest (XHR), an AJAX call will be made to a WebMethod which will read the AppSetting value and return it to the JavaScript function.
 
 
The AppSetting
The following AppSetting value will be read and fetched in JavaScript through AJAX call using XmlHttpRequest (XHR).
<appSettings>
    <add key="Name" value="Mudassar Khan"/>
</appSettings>
 
 
HTML Markup
The HTML Markup consists of a TextBox and a HTML Button. The HTML Button has been assigned an onclick event handler which calls GetAppSetting JavaScript method to get the AppSetting Key Value from the Web.Config file.
AppSetting:
<asp:TextBox ID="txtKey" runat="server"></asp:TextBox>
<input id="btnGet" type="button" value="Get AppSetting" onclick="GetAppSetting()" />
 
 
Namespaces
You will need to import the following namespace.
C#
using System.Configuration;
 
VB.Net
Imports System.Configuration
 
 
The WebMethod
The GetAppSetting WebMethod accepts the parameter named key. The key parameter value is passed to the ConfigurationManager.AppSettings collection to fetch the value of the AppSettings Key.
Finally, the AppSettings value is returned.
Note: The method is declared as static (C#) and Shared (VB.Net) and also it is declared as WebMethod unless you do this you won’t be able to call the methods.
 
C#
[System.Web.Services.WebMethod]
public static string GetAppSetting(string key)
{
    return ConfigurationManager.AppSettings[key];
}
 
VB.Net
<System.Web.Services.WebMethod()>
Public Shared Function GetAppSetting(ByVal key As String) As String
    Return ConfigurationManager.AppSettings(key)
End Function
 
 
The XmlHttpRequest (XHR) call
When the Get AppSetting Button is clicked, the GetAppSetting JavaScript function is called.
Inside this function, first the value of the TextBox is fetched.
Then an AJAX call is made using JavaScript XmlHttpRequest (XHR) call to the WebMethod which accepts the parameter named key and returns the AppSettings value.
Finally, the AppSettings value is displayed using the JavaScript Alert Message Box.
<script type="text/javascript">
    function GetAppSetting() {
        var key = document.getElementById("<%=txtKey.ClientID%>").value;
        var request;
        if (window.XMLHttpRequest) {
            //New browsers.
            request = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            //Old IE Browsers.
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (request != null) {
            var url = "Default.aspx/GetAppSetting";
            request.open("POST", url, false);
            var params = "{key: '" + key + "'}";
            request.setRequestHeader("Content-Type", "application/json");
            request.onreadystatechange = function () {
                if (request.readyState == 4 && request.status == 200) {
                    alert(JSON.parse(request.responseText).d);
                }
            };
            request.send(params);
        }
    }
</script>
 
 
Screenshot
ASP.Net: Read (Get) AppSettings Key Value from Web.Config file in JavaScript
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Downloads
Download Code