How to update JavaScript with a value from web.config file in an ASP.NET MVC4 Razor project?

Question

Is it possible to use a web.config setting such as "serverPath" below in a JavaScript file in an ASP.NET MVC4 Razor project?

<appSettings>
  <add key="serverPath" value="http://myserver" />
</appSettings>

I would like to change the URL of the following jQuery ajax call depending upon debug or release mode

  var request = $.ajax({
    url: 'http://myserver/api/cases',
    type: 'GET',
    cache: false,
    dataType: 'json'
  });

Is is possible to read the value from web.config like a View and substitute it in the .js file?

Did any of the answers help you?

Linus Caldwell
– Linus Caldwell

2013-03-22 08:14:42 +00:00
Commented Mar 22, 2013 at 8:14 — Linus Caldwell
– Linus Caldwell, Commented Mar 22, 2013 at 8:14

Eben Roux · Accepted Answer · 2013-03-20 16:25:27Z

5

An alternative is to have a js file that contains your configuration in the way that the web.config does for a .net web site:

configuration.js:

var configuration = {
    apiurl: 'http://myserver/api/',
    someOtherSetting: 'my-value'
};

Well, you could either write this configuration into your page as javascript or link to the script or merge and minify into a common file. It would become part of your deployment process.

Then use it as you would any js object:

var request = $.ajax({
    url: configuration.apiurl,
    type: 'GET',
    cache: false,
    dataType: 'json'
});

Or some variant thereof.

answered Mar 20, 2013 at 16:25

Eben Roux

13.4k3 gold badges31 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ChrisP Over a year ago

While this would work I would prefer to centralize all my config information in the web.config file which has the capability to automatically have different configurations for debug and release modes.

Arkaine55 Over a year ago

To allow for choosing a different version for different configuration modes (debug/release/etc) you could have a web.config setting of "configurationFileName" and switch between configuration.debug.js and configuraiton.release.js as the value of the appSetting. Then use the value to dynamically choose the path of the static JS file.

Eben Roux Over a year ago

That is certainly an option @Arkaine55. For our automated build scenario we have the templates configured to produce the correct configuration file. It does make sense to somehow get to different versions of the file though :)

Andy T · Accepted Answer · 2013-03-20 16:18:55Z

1

Ideally, you would read the value in the controller:

var serverPath = ConfigurationManager.AppSettings.Get("serverPath");

Then set the view model's property with that value

myViewModel.ServerPath = serverPath;
return View(myViewModel);

And in the view simply feed it into JS:

var request = $.ajax({
    url: '@(Model.ServerPath)',
    type: 'GET',
    cache: false,
    dataType: 'json'
  });

answered Mar 20, 2013 at 16:18

Andy T

9,9315 gold badges56 silver badges97 bronze badges

2 Comments

ChrisP Over a year ago

This is a stand-alone JavaScript file which is linked into the View so the JavaScript is not in the view. I don't think there is a Modle accessible in the .js file, but I'm not certain.

Andy T Over a year ago

In that case, you'll use Linus' approach and pass it into a method that is in your JS file: <script type="text/javascript"> getData('@Model.ServerPath'); </script>

logic-unit · Accepted Answer · 2015-03-03 11:18:58Z

1

Sure, use this in your view:

@ConfigurationManager.AppSettings["serverPath"]

For passing through to an external js file you need your function to have a parameter and call it via your view:

<script type="text/javascript">
    getData('@ConfigurationManager.AppSettings["serverPath"]');
</script>

When your js file has something like this:

function getData(path) {
    var request = $.ajax({
        url: path,
        type: 'GET',
        cache: false,
        dataType: 'json'
    });

    return request;
}

edited Mar 3, 2015 at 11:18

logic-unit

4,31312 gold badges50 silver badges74 bronze badges

answered Mar 20, 2013 at 16:17

Linus Caldwell

11.1k12 gold badges48 silver badges61 bronze badges

Comments

HitLikeAHammer · Accepted Answer · 2013-03-20 16:18:11Z

0

Try this:

var request = $.ajax({
    url: '@(ConfigurationManager.AppSettings["serverPath"])',
    type: 'GET',
    cache: false,
    dataType: 'json'
  });

answered Mar 20, 2013 at 16:18

HitLikeAHammer

2,7153 gold badges39 silver badges53 bronze badges

1 Comment

ChrisP Over a year ago

Because the JavaScript is in a separate .js file that is linked into the view it does not appear this works. The @ConfigurationManager... is still in the rendered page.

Dmitry Pavlov · Accepted Answer · 2013-09-24 15:11:18Z

0

You could do that for ASP.NET MVC4 Razor this way:

@{
    var apiBaseUrl = ConfigurationManager.AppSettings.Get("ApiBaseUrl");
}

<script type="text/javascript">
    $(document).ready(function() {

      var request = $.ajax({
          url: '@apiBaseUrl/cases',
          type: 'GET',
          cache: false,
          dataType: 'json'
      });

    });
</script>

answered Sep 24, 2013 at 15:11

Dmitry Pavlov

28.6k7 gold badges102 silver badges131 bronze badges

Collectives™ on Stack Overflow

How to update JavaScript with a value from web.config file in an ASP.NET MVC4 Razor project?

5 Answers 5

3 Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related