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!
Related
Is is it possible to return JSON (www.myapp.com/json) without any Angular additions on Angular page, like backend endpoint would return?
E.g this <pre>{{jsonToDisplay | json}}</pre> doesn't work, because when you look browser source you can see also Angular generated code.
You can add a json pipeline to transform data directly in the html as yo are doing, rememeber to import CommonModule 1.
If it does't work, you could implement a custom pipeline.
Trying to render HTML data in kendo Grid column using Vue.js.
Code Snippets are as below:
JSON data-
Template -
Can anybody suggest how to achieve it?
I am able to get the hyperlinks from JSON using props in kendo-grid in vue js.
Please find the below screenshots.
[KendoUI.vue page] https://i.stack.imgur.com/A6eFw.png
[JSON DATA] : https://i.stack.imgur.com/Vd9ww.png
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
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
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