7

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?

Community
  • 1
  • 1
alex
  • 6,818
  • 9
  • 52
  • 103

4 Answers4

11

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

Husrat Mehmood
  • 2,270
  • 1
  • 20
  • 22
  • Granted, I should not store the .json in App_Data. However, storing it in the Content directory fails when I attempt to use this approach: `var json = $.getJSON("../Content/usa.json", function () { console.log(json); });` yields `"NetworkError: 404 Not Found - http://localhost:61103/Content/usa.json"`. – alex Aug 06 '14 at 14:21
  • Read my entire answer again I have edited it and you will get success.I prepared a demo application to solve your problem and i got success in it. – Husrat Mehmood Aug 06 '14 at 17:35
  • I very much appreciate your help, but this did not work for me, and I researched/answered my own question below. The problem is with IISExpress. Adding the bit to Web.config did not work: I had to travel further, all the way into the IIS config, and change the mime settings there. Without doing this, the `$.getJSON` attempt 404s. – alex Aug 06 '14 at 17:39
  • you have problem because you are using .(dot) symbol in you mime type plz don't use this .(dot).I test demo app with dot it did not worked then i removed dot and it worked perfectly fine for me.I can send you demo if you want.but plz first remove .(dot) and give it try again – Husrat Mehmood Aug 06 '14 at 17:42
  • use as follows can you see not dot with file extension – Husrat Mehmood Aug 06 '14 at 17:43
  • Thanks @Husrat, maybe I'll do this instead next time. I resolved the issue completely [in the way I describe here](http://stackoverflow.com/a/25163606/3474146), even with the '.' in '.json'. – alex Aug 06 '14 at 17:47
2

The issue was being caused by a problem with IIS Express, and this post helped me resolve the issue. I navigated to

C:\Users\<username>\Documents\IISExpress\config\applicationhost.config

and added 

<mimeMap fileExtension=".json" mimeType="application/json" />

to the <staticContent> section in there. It wasn't sufficient to add that line to web.config. So it is possible to work with a static .json file stored in the ../Content folder.

Community
  • 1
  • 1
alex
  • 6,818
  • 9
  • 52
  • 103
1

"exoriated me with lots of weird regex errors and other stuff" - more details might be needed there.

Did you try to use Razor syntax in a plain javascript file? Razor syntax only works in cshtml files.

A second guess of mine would be that App_Data is not served by the web server. This would be a huge security gap - any user could simply download your database files from that folder. If you want to make it available statically, put it in Scripts/ or Content/.

chiccodoro
  • 14,407
  • 19
  • 87
  • 130
  • I edited the question to show my previous approach which used the Content directory instead of App_Data, but as none of those attempts were successful, I am merely asking if what I am trying to do is possible before I move on to a different approach altogether (the MVC controller approach). – alex Aug 06 '14 at 14:19
0

For static data simply assign the data to a variable in a js file and put it in page as <script> tag. Pass that variable to your initialization method(s)

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • Technically I *could* just copy and paste the .json into the script, but I want to store the .json in the Content folder instead because it's a pretty big file, and I feel like the code would be messy. This is an appropriate answer to my question that is admittedly broad, but my problem is precisely with assigning the (external) data to a variable in a .js file. – alex Aug 06 '14 at 14:28