Rendering a JsonResult to a string in Razor

Question

I have a server-generated object that I need to convert to a JSON object for JavaScript to consume. I prefer to render this JSON object directly into a JS variable when the view renders to prevent an additional HTTP request.

This is in my controller:

public virtual JsonResult GetTheThings()
{
    return Json(new
    {
        foo = "hello world",
        bar = 3,
    }, JsonRequestBehavior.AllowGet);
}

I can access this directly at http://localhost:32243/MyController/GetTheThings and I get the following rendered in my browser. {"foo":"hello world", "bar":3}. Perfect!

So, now I basically just want to render the result of this view into a string. How do I do this? What I have below does not work, but hopefully it give you the idea.

This is my attempt

<script>
  var myObj = @Html.RenderPartial(MVC.MyController.GetTheThings());
</script>

Note that I am also using T4 Templates.

In the end, this is what I want to be rendered in the view.

<script>
  var myObj = {"foo":"hello world", "bar":3};
</script>

You can try with `Html.Action` but I'm not sure if that will work at all — Vsevolod Goloviznin, Jan 05 '15 at 14:44
Did you try just `var myObj = MVC.MyController.GetTheThings();`? — jamesSampica, Jan 05 '15 at 14:45
@Shoe Yes, that will just outputs `var myObj = T4MVC_System_Web_Mvc_JsonResult;` — Chris Barr, Jan 05 '15 at 14:48

Douglas Barbin · Answer 1 · 2015-01-05T21:59:11.173

2

Since you only want the object to be rendered when the view is rendered (and not from an AJAX call), your best bet is probably to make it part of your model. Create a string property and save the JSON as a string, then use JSON.parse in your View to convert it to an object.

Example:

<script>
    var myObj = JSON.parse("@Html.Raw(Model.JsonString)");
</script>

Much cleaner that way, and there really isn't any good reason to have your controller doing this since you aren't requesting the object via AJAX.

edited Jan 05 '15 at 21:59

answered Jan 05 '15 at 14:54

Douglas Barbin

3,595
2
14
34

But how to I get the JSON string from my controller? This is my main question. – Chris Barr Jan 05 '15 at 14:55
1

Why do you need it from the controller? The controller should really only be handling HTTP requests, not dictating your application logic. – Douglas Barbin Jan 05 '15 at 14:56
Hmm... yeah I think you might be right. Thanks. I'm gonna go about doing this in a different way! – Chris Barr Jan 05 '15 at 15:03

Mark Olsen · Answer 2 · 2015-01-13T14:57:17.583

1

You could create an HtmlHelper extension like so and instead of using a JsonResult, use a strongly-typed view (assuming using JSON.Net):

public static class HtmlHelperEx
{
    public static string ToJson(this HtmlHelper html, object obj)
    {
        return JsonConvert.SerializeObject(obj);
    }
}

Controller Action:

public ActionResult Index() 
{
   return View(new ModelToSerialize());
}

Then use it in your view like:

@model ModelToSerialize

<script type="text/javascript">
    var myObj = @Html.ToJson(Model)
</script>

edited Jan 13 '15 at 14:57

answered Jan 13 '15 at 14:51

Mark Olsen

939
7
10

Perfect solution. And being able so use the model in the HTML before returning is as JSON. Just needed to add @Html.Raw(@Html.ToJson(Model)); to avoid htmlencoding of the json. – Kasper Jensen Aug 26 '16 at 08:25

DLeh · Answer 3 · 2015-01-05T14:55:52.263

You would theoritically be able to do it like this:

<script>
  var myObj = json.parse('@Html.RenderPartial(MVC.MyController.GetTheThings());');
</script>

Although, GetTheThings() will not actually fire here, it's just a T4MVC placeholder. You should probably store your value into a view model, and get it into javascript like below. If you want to make a separate call to a controller to get this value, it will need to be an ajax call.

public class MyController
{ 
    public ActionResult MyView(){
        var vm = new MyViewModel();
        vm.MyObjectAsJsonString = GetMyJsonString();
        return View(vm);
    }
    public string GetMyJsonString(){
         return ""; //get your json 
    }
}

public class MyViewModel
{
    public string MyObjectAsJsonString{ get; set; }
}

@model MyViewModel
<script>
  var myObj = json.parse('@Model.MyObjectAsJsonString');
</script>

To do it via ajax:

<script>
    $.ajax({
        url: '@Url.Action(MVC.MyController.GetTheThings())',
        type: 'get',
    }).done(function (result){
        var myObj = result;
    });
</script>

I'm not having an issue parsing the json object, I'm having an issue getting MVC to render out the view here. Also, as I stated above I want to render it in the view instead of another AJAX call to avoid additional HTTP requests. — Chris Barr, Jan 05 '15 at 14:53
you can do it without an ajax call, but you will need to store it in the view model. The View cannot call the controller directly, the controller is already done being used when the view is being rendered. — DLeh, Jan 05 '15 at 14:54
see my edit for an example of how to parse from the json in a view model. — DLeh, Jan 05 '15 at 14:56

score 0 · Answer 4 · answered Jan 05 '15 at 15:02

0

<script>
  var myObj = '@Html.RenderPartial("Getthethings","controller name");'
</script>

answered Jan 05 '15 at 15:02

dotnetstep

17,065
5
54
72

Thanks, but doing this will ignore the strongly typed T4 templates that this project uses. – Chris Barr Jan 05 '15 at 15:04

score 0 · Answer 5 · answered Jan 05 '15 at 16:34

Use the @Html.Raw(...) wrapper.

In my own project, I do refer to the existing model coming down in from the controller itself, but there's no reason you can't get the same effect as a partial...it's just not really the core purpose of using async calls...which you should be using instead of relying on the html rendering engine to do your 'dirty' work.

Rendering a JsonResult to a string in Razor

5 Answers5