Pass JSON file to Javascript ASP.NET MVC4

Question

My problem is currently : How to pass a JSON Object (As it is or as a C# object deserialized with Newtonsoft.Json) to a javascript file.

I tried the following method :

Response.Write(string.Concat("<input id='data' type='hidden' value='", json_file, "' />"));

but when the json file is rendered in HTML (as a html attribute) it stops on the quote character, i tried to escape it but it's not working either. So when in my javascript file i use JSON.parse() the syntax is not valid.

Problem Solved : - Declared a javascript variable Data in my .cshtml file, put the jsonfile as a @ViewBag element inside. - got it in my javascript by window.Data - parsing it as json, using it, magic done.

(Thanks for those who answered)

it's a string. (i opened a StreamReader and read it to the end and store it in a string). The json file is well formated i got my app to work with json files without quote characters. — dotdiego
– dotdiego, Commented Nov 7, 2013 at 11:14
yes that's exactly the problem i'm describing. When i got json file with quotes it crashes when the json file is quotes free it works — dotdiego
– dotdiego, Commented Nov 7, 2013 at 11:37

StuartLC · Accepted Answer · 2013-11-07 11:24:26Z

1

If this is a json object, why not insert the object in a javascript variable on the page, as presumably you want to use the variable e.g. in Ajax?

function someThingClicked(){
  var myObject = <%= json_file %>;

  $.ajax({
    type: "POST",
    url: "SomeUrl",
    data: myObject,
    success: function () { },
    contentType: "application/json; charset=utf-8",
    dataType: "json"});
}

This should serve something like the below to the browser:

var myObject = {
  someField : 'someValue'
};
...

If you are using razor, you would write it out something like:

  var myObject = @Html.Raw(ViewBag.json_file);

Assuming that you've added the json_file string into ViewBag from your controller.

edited Nov 7, 2013 at 11:24

answered Nov 7, 2013 at 11:18

StuartLC

108k18 gold badges225 silver badges294 bronze badges

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

Comments

Grundy · Accepted Answer · 2013-11-07 11:19:27Z

1

in this case you can try use JsonResult

answered Nov 7, 2013 at 11:19

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

Comments

mehmet mecek · Accepted Answer · 2013-11-07 11:41:53Z

0

Try this please

Response.Write(string.Concat("<input id='data' type='hidden' value=\"", json_file.Replace('\"', '\''), "\" />"))

answered Nov 7, 2013 at 11:41

mehmet mecek

2,6952 gold badges23 silver badges28 bronze badges

Comments

Rune FS · Accepted Answer · 2013-11-07 11:44:21Z

it's a result of you concatenation results in termination of the valuesttribute value before you intended. E.g. you have a 'character in the json_file

as an example if the file contains

var x = 'this is a string'

then the result of your concatenation would yield invalid html

<input id='data' type='hidden' value='var x = 'this is a string'' />

notice that the value attribute is terminated after var x = and that the final "attribute" string is missing an = prior to the value (the empty string '')

to avoid that you should assign the json to a variable and then assign that value as the value to the input element

Response.Write(string.Concat("<input id='data' type='hidden'/>",
                             "<script>$(function(){var x = ", json_file,
                             ";$("#data").val(JSON.stringify(x));</script>");

(assuming you are already using jQuery otherwise you'd have to do it with plain vanilla JS which is a little more work but can be done

mehmet mecek · Accepted Answer · 2013-11-07 11:53:17Z

0

An other solution instead of printing json string inside the html attribute

Create an action that returns your json in your controller

public string GetData()
{
    //read your json file
    return json_file; //return your json string
}

On View side, put your input tag and fetch json_file through an ajax request

<input id='data' type='hidden' />
<script>
    $(function () {
        $.post("/yourControllerName/getData", {}, function (response) {
            $("#data").val(response);
        },'json');
    });
</script>

answered Nov 7, 2013 at 11:53

mehmet mecek

2,6952 gold badges23 silver badges28 bronze badges

Collectives™ on Stack Overflow

Pass JSON file to Javascript ASP.NET MVC4

5 Answers 5

Comments

Comments

Comments

Comments

An other solution instead of printing json string inside the html attribute

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

An other solution instead of printing json string inside the html attribute

Comments

Your Answer

Sign up or log in

Post as a guest

Related