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 MVC Razor.
It is not possible to read the AppSetting value directly in JavaScript and hence using jQuery, an AJAX call will be made to the Controller’s Action method 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 jQuery.
<appSettings>
    <add key="Name" value="Mudassar Khan"/>
</appSettings>
 
 
Namespaces
You will need to import the following namespace.
C#
using System.Configuration;
 
VB.Net
Imports System.Configuration
 
 
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
 
Action method for handling jQuery AJAX operation
This Action method handles the call made from the jQuery AJAX function from the View.
Note: The following Action method handles AJAX calls and hence the return type is set to JsonResult.
 
The value of the key parameter is passed to the ConfigurationManager.AppSettings collection to fetch the value of the AppSettings Key.
Finally, the AppSettings value is returned.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public JsonResult GetAppSetting(string key)
    {
        string value = ConfigurationManager.AppSettings[key];
        return Json(value);
    }
}
 
 
View
The View consists of an HTML TextBox element and a Button. The Button has been assigned a jQuery click event handler and when the Button is clicked a jQuery AJAX called is made to the Controller’s action method.
Note: For more details on using jQuery AJAX in ASP.Net MVC, please refer my article ASP.Net MVC: Call Controller Method from View using jQuery AJAX.
 
The URL for the jQuery AJAX call is set to the Controller’s action method i.e. /Home/GetAppSetting. The value of the TextBox is passed as parameter and the returned AppSetting value is displayed using JavaScript Alert Message Box.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    AppSetting:
    <input type="text" id="txtKey"/>
    <input id="btnGet" type="button" value="Get AppSetting"/>
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnGet").click(function () {
                $.ajax({
                    type: "POST",
                    url: "/Home/GetAppSetting",
                    data: '{key: "' + $("#txtKey").val() + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert(response);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        });
    </script>
</body>
</html>
 
 
Screenshot
ASP.Net MVC: 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