Simplify writing JSON in a Razor view

[JamesNK]

A common task inside a razor view is converting part of the model into JSON and writing it to the page inside a script tag. The view model JSON can then be used by scripts executing on the page.

http://stackoverflow.com/questions/3365551/asp-net-mvc-how-to-convert-view-model-into-json-object (note: almost 70 thousand views)

There should be a simple way to use the application's configured JsonOutputFormatter to serialize JSON. With MVC5 in my own projects I use to add a HtmlHelper.Json(object) extension method to simplify this task. It handled accessing the application's common JsonSerializerSettings and wrapping the string result in an HtmlString to avoid encoding issues.

Because JSON isn't HTML, I think it would be better to expose a Json property on the base view, similar to the current Html and Url properties, with a class that exposes methods for serializing the model as JSON. A JsonHelper if you will. Alternatively, a simpler change would be to add a Json(object) method to the base view for serializing JSON.

Having property or method immediately visible in intelli-sense will make this task simple and discoverable, and using JsonOutputFormatter underneath will mean any configured settings, e.g. camel case properties or date format, will automatically flow through to JSON serialized on the view.

[danroth27]

Yup, we think this is a great idea. We experimented with this a bit in the Music Store sample. This feature would need some design and discussion. Would you be interested in proposing a design PR?

[JamesNK]

A design PR? Do you have an example of what one of those looks like.

Some additional thoughts: Should the JsonHelper methods return HtmlString? The result shouldn't be escaped by Razor but JSON methods returning HtmlString seems a little weird.

[JamesNK]

re: Music Store, is this what you are talking about? https://github.com/aspnet/MusicStore/blob/master/src/MvcMusicStore.Spa/Helpers/JsonExtensions.cs

I imagined something rawer and more multi purpose, that would do nothing more than output a JSON string.

[rynowak]

A design PR? Do you have an example of what one of those looks like.

Just team-lingo for a PR demonstrating what APIs you'd add and how it would be used. IE - add a 'Json' property to RazorPage, add the new interface, add to MvcSample.Web sample showing usage.

Should the JsonHelper methods return HtmlString

HtmlString is one of the known types that Razor doesn't HTML-encode. If you return a regular string it will get encoded.

[JamesNK]

I know a regular string will get encoded, I've made the odd MVC site in my day :P

I bring it up because HtmlString seems like more like a HtmlHelper concept. Is it returned from public API methods besides the methods on HtmlHelper? Should a method on JsonHelper return a HtmlString or a regular string?

[dougbu]

@JamesNK yes, HtmlString is now used (not just special-cased) in RazorPage for example. IViewComponentHelper also has a few methods that return HtmlString. So think of HTML encoding and not HTML helpers when you read HtmlString.

[JamesNK]

I had a look at making a PR. I'm not familiar with how Razor works, and I couldn't find the class where the Html property is added. Maybe I missed it but I couldn't find it on RazorView.

Edit: Looks like Html and Url are added in the dynamically created view page. I have no idea how to add it there. If it is the better place then someone else can move it.

[JamesNK]

What is a ViewComponent? I started to write a PR and I noticed a JsonViewComponent.

https://github.com/aspnet/Mvc/blob/dev/src/Microsoft.AspNet.Mvc.Core/ViewComponents/ViewComponent.cs#L165-L173

[dougbu]

What is a ViewComponent?

The replacement for child actions in MVC 6. Application authors can create ViewComponents and call them from any view. They have some similarities to Controller classes but are directly invoked, not model bound, routed to or otherwise automatically used during request processing.

In any case you made the right suggestion for ViewComponent in PR #2524.

[dougbu]

ab4cd5c