JSON output in Umbraco 5 - json

I just switched from Umbraco 4 to Umbraco 5 and it seems like a lot has changed.
So what i basically want is a possibility to add a alternative template to my document-types.
The fall back template shall return the content as JSON.
Why, you say? I want to create an API-like way of accessing the Umbraco data from my mobile devices.
WebAPI (http://cultiv.nl/blog/2012/4/22/exposing-umbraco-5-content-through-the-aspnet-web-api/)
I have thought about using WebAPI from asp.net MVC 4, but the project is really just a proof of concept and i don't want to code each endpoint.
So i found a som guys that did a package for Umbraco 4 that actually does this and renders the content of #currentPage as Json. The template is hit by adding "/JSON" to the end of the url. Unfortunetly this uses xslt, which ihas been removed from Ubraco 5.1 (Good thing).
So. I bet it's simple to create a partial, a macro or a partial macro that does this and add it to a template. But is just cant figure out where to start.
Any help with that? What I'm looking for is a step guide on what steps to take, to make the setup. Rendering the stuff ad json in C# i can handle.
It's the integration into Umbraci I lack.
Hoe u can help.

The alternative templating works exactly like in v4: Just add the name of the template at the end of the url: yoururl/json
Then add a new razor view to the templates named "json" with the following code:
#inherits RenderViewPage
#using System.Web.Mvc.Html;
#using Umbraco.Cms.Web;
#{
Layout = "";
}
{
#foreach (var attribute in Model.Attributes)
{
string.Format("\"{0}\": \"{1}\"", attribute.AttributeDefinition.Alias, attribute.DynamicValue);
}
}
This code can be used as a starting point without using the web api or own controllers.
Don't forget to allow the tempplate on all document types
hth,
Thomas

Related

Using Razor.Engine.NetCore in rest api solution .net core 3.1 with Url.Encode

I'm trying to use Razor.Engine outside of MVC, everything works good, but now I need to encode url inside Razor template.
My template is:
<html>
<p><span>Click here</span></p>
</html>
My Model is:
BaseUrl = "http://mysiteurl",
UrlParams = "{"id":"43869906-dfdb-435c-a570-c4578d859e78"}"
I need to encode the UrlParams so I tried
href="#Model.BaseUrl?data=#Url.Encode(#Model.UrlParams)"
But no luck :(
Is it possible to encode url inside Razor template? and how?
I could not find the ability to add namespaces
I Also tried with RazorEngineService.create(config).RunCompile(...) but still not working
Thanks
So I ended up with this
#Model.BaseUrl?data=#System.Net.WebUtility.UrlEncode(#Model.UrlParams.ToString())
and it's working :)

routing between angularJs and playframework

I'm working with restangular ngroute and playframework and I'm trying to do my CRUD following this tutorial : http://plnkr.co/edit/d6yDka?p=info
the list.html and detail.html in the index page (in the tutorial), I have them all in customer.scala.html page which call the main page by using this : #main("MyApp") So all my controllers and models are defined in this main page.
So how can I do the routing, the way that when I click on a button I can call the link (localhost:9000/custd) definded here in my js page:
app.config(function($routeProvider, RestangularProvider) {
$routeProvider.
when('/custd', {
controller:ListCtrl,
templateUrl:'list.html'
}).
UPDATE:
this is the link in customer.scala.html
<li>Customers</li>
in the file Application.scala I have this:
def custDetail = Action {
Ok(views.html.custDetail("Your new application is ready."))
}
in routes I have this:
GET / controllers.Application.index
GET /custdetail controllers.Application.custDetail
so how can I link this : /custd (in the angular controller) with my html page
So I think you're jumping in at the deep end a bit here. If you don't understand how to make a simple play web app, and you don't understand how to make a simple angular app then it might not be the best idea trying to integrate both straight away (I tried the same thing when I was new to this and it was complicated!).
Why have you chosen Angular for this given job? If you are not planning to create a single page application (which it sounds like you're not), then just using play templating should be sufficient for your needs (ands there's lots of docs available!).
If you are adamant on using the two, angular routing is geared towards angular applications. Looking at the routing you've provided:
app.config(function($routeProvider, RestangularProvider) {
$routeProvider.
when('/custd', {
controller:ListCtrl,
templateUrl:'list.html'
}).
In this you have provided a controller and a template. These are in reference to Angular controllers html templates, not Play. If you're not sure on how Angular controllers work, Angular has great documentation:
https://docs.angularjs.org
You need to work out exactly what information you need from the server side, create an endpoint to serve that data to your Angular app (using AJAX calls). I know this is a high level answer but really integrating the two is quite complex and hard to summarise in a single reply. My advice would be focus on creating an Angular OR Play app, then once you have the basics down move to integrating the two, but be clear as to the reasons behind chosing your technology as it sounds like you may not be

How to parse a Razor template with partials from a custom folder?

I have two cshtml-files in the same subfolder of Views. One of the templates is meant to include the other template. I tried to accomplish that as follows:
Main template:
<html>
<head></head>
<body>
#Html.Partial("~/Views/Pdfs/Header");
</body>
</html>
The error I get is
Unable to compile template. The name 'Html' does not exist in current context.
What am I supposed to do additionally?
As commented by Erik there is no Html in RazorEngine (see the linked answer), however you can use #Include("mytemplate") instead.
If you want to be compatible with the #Html.Partial() syntax for some reason you can extend the RazorEngine syntax like this.
Basically what you want to do is provide your own class inheriting from TemplateBase<T> (or ITemplate to be exact) and then set it either via configuration or the #Inherit MyBaseClass<MyModel> syntax. In this case you could just call the Include method from your Partial method within the Html helper class.
Been annoyed by this for a long time. Wrote all the infrastructure classes to just get this working like you'd expect in MVC, without all the MVC burden:
var razor = RazorHelper.O;
var html = razor.RenderFromMvc(#"Views\RazorEngine\TestEmail.cshtml", vm);
https://github.com/b9chris/RazorEngineComplete

ASP.Net MVC page refresh using json values instead of html

I have a page that has a "prev" and "next" day button, and rather than reload the entire page, I simply do an ajax call to a controller that returns the entire partial view, which I replace the div with.
$("#divId").html(ajaxResponse);
Pretty simple.
However, I'm finding that this partial view is vastly more data than I need (html doesn't change at all, just the data) and it's causing slowness on mobile browsers.
My question is, is there a tool out there that will let me return a JSON representation of the model data and refresh all the values on the page automatically?
For example, say I have:
#Html.InputFor(x => x.FirstName)
and the JSON returns
{ FirstName: 'Henry', LastName: 'McLeery' }
Is there a library available that can automate the process of doing:
$("#FirstName").val(ajaxResponse.FirstName);
$("#LastName").val(ajaxResponse.LastName);
etc...
?
Take a look at Angular.js. Angular is a JavaScript framework which uses the mvc pattern.
After binding UI elements to your model the displayed data changes automatically when updating your model. Angular offers a nice api to consume ajax requests with json data.
Look at this:
Get and update json using angular.js

How to populate a jquery grid using Knockout JS in MVC 4

I'm new to ASP.NET MVC and Knockout JS. I have a project requirement as below.
I should have a List<> in a ViewModel which is the data for my grid.
I need to pass that List's data from the Controller to the
view through a $.ajax() method.
The data coming from the controller should be in JSON format.
I should use Knockout JS for data-binding in my view.
Please, can anybody help me to do this task with an example or provide me some web links for the demo.
About returning JSON, ASP.Net WebAPI should be you best bet. Some samples here : http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api
KO Grid could help you doing that on the front-end side. There's some sample here to get you started : http://knockout-contrib.github.io/KoGrid/#/overview
I think that's actually the only things you'll need to get you started!