Working with a static .json file located in App_Data?

Question

In my ASP.NET MVC 4 project, I have a .json file in my App_Data folder containing geographical data that I want to load up into D3.js.

So far, my working approach has been to have jQuery perform an AJAX call to some Controller which returns a JsonResult - and on success, storing the JSON in some Javascript variable which gets loaded into D3. This time around, I'd like to skip the controller and request a static .json file directly from the App_Data folder instead.

I tried grabbing the .json's relative path using var url = "@Url.Content("~/App_Data/example.json")";, but the Javascript debugger excoriated me with lots of weird regex errors.

I also tried throwing the file into the Content folder to see if the directory name makes a difference.

• var path = "@Url.Content("~/Content/example.json")"; resulted in

  NetworkError: 404 Not Found - localhost:xxxxx/Content/u.json

• var path = @Url.Content("~/Content/example.json"); resulted in

  SyntaxError: invalid regular expression flag u: var path = /Content/example.json;

• var json = $.getJSON("../Content/example.json") appears to send a request to the correct directory, but returns a 404 error. Additionally, using Razor syntax to point to the relative URL works, but still 404s.
• Adding mimeMap info to web.config also didn't help.

My question is: is it possible to work with a JSON file stored in App_Data (or the Content directory), using only Javascript/jQuery? In ASP.NET, is there only one way to do this? Is there a better approach to take altogether?

Answer 1

To read json files in visual studio first you need to use following in your web.config

you can use it anywhere in

<configuration>
      <system.webServer>
       <staticContent>  
          <mimeMap fileExtension="json" mimeType="application/json" />
       </staticContent>
     </system.webServer>
      -------All other Settings---
      ----Your all other setting------
</configuration>

App_Data cann't be accessed due to security restrictions but you can place your file somewhere else in you application.try doing it by using jquery function getJSON() below is an example.

      $("document").ready(function() {

    var jqxhr = $.getJSON("/Content/usa.json", function () {
        console.log("success");
    })
   .done(function () {
       console.log("second success");
   })
   .fail(function () {
       console.log("error");
   })
   .always(function () {
       console.log("complete");
   });
});

Happy Coding Enjoy