I'm currently using Web Api for my service calls and binding the responses via knockout.js. Everything is working great with the exception of localization.
Previously, using MVC3 Razor, I would use the HtmlHelper to fetch the localization text for me eg: #Html.Resource("File, Key")
Obviously, with this new approach, I cannot have the service side code fetch happening on the client, so I'll need to fetch all these values from the server before hand.
My question is: How is this being accomplished when using Web Api and Knockout?
Thanks!
This might be what you are looking for: Knockout Localization Binding.
Even if you don't want to use the original source, it's pretty simple to build a new one.
You can also look at i18next
It provides you with declarative syntax for the html page and can load json resources dynamically.
Related
I am a new user to Orbeon. I am attempting to integrate Orbeon with another e-form type application that does not support mobile viewing. is it possible to pass an XML file to Form Runner to open and populate a pre-built form with the values from the xml file for editing? We would subsequently send the updated XML back to our other application and we already have this functionality built. if possible what is the best way to accomplish? I am still digesting all of the Orbeon knowledge and flow of the application, so be gentle =p
I haven't tried this, but it should be possible using the Persistence API.
You'll also need to configure access to the API. For testing purposes, I used the properties in the Backward compatibility section to completely open up API access.
I am new to the Asp.Net MVC. I am doing asp.net web application. I have data layer which I want to be exposed from the MVC Web api only. For web api project i used entity framework as a model and for mvc application i am using entity classes. I am calling the web api from the view with jquery and perform all the operations.
Is that right approach or need to use some jquery framework. Or is there any projects available which uses asp.net web api's only. I warm up google for so many times but didn't find essential. Please assist me here.
You can use jQuery or any javascript framework you please to retrieve data from your API. You could even use raw javascript if you really wanted to. However, if most of your logic is going to live on the client, you'll probably want to look into some MVC/MVVM/MVP javascript library/framework to keep things organized.
A good place to start is the Single Page Application template that is built into Visual Studio 2013 and available for 2012. It uses .NET MVC to load up the HTML markup, styles, and scripts, and then uses Knockout.js to structure the application and send & retrieve data from a Web API controller located in the same app. It's also worth noting that you can grab templates that use other popular javascript frameworks like Ember, Angular, Backbone, Durandal, and more. If you'd prefer one of those frameworks over Knockout then download one of those templates and look through the code.
Without seeing any code, it sounds like you have the right idea. You can use any client side framework of your choice to interact with your Api Controllers (Knockout, Angular, Ember, Backbone) or you can use straight up jQuery.
Since you are new to ASP.NET Mvc, a little clarification on the differences between the traditional Mvc Controller and the new Api Controller seems in order. In traditional MVC the controllers works to select which view (UI) to display married to data (the model):
public ActionResult Index()
{
var theData = serviceLayer.GetData();
return View("Index", theData);
}
You can also return pure JSON data from a controller:
public JsonResult GetMyData()
{
var theData = serviceLayer.GetData();
return new JsonResult()
{
Data = theData
};
}
This had the problem of making it difficult to determine the names of the endpoints that retrieve UI vs the endpoints that retrieve data. The Web Api is Microsoft's implementation of a RESTful framework. Instead of a controller with many different methods (Index(), GetSingle(), GetMany(), List(), DoSomethingElse(), DoAnotherThing(), etc.), the Api controllers usually contain only methods that correspond to the HTTP Verbs: GET, POST, PUT, and DELETE. The same endpoint can then be called differing only by the verb you are using. Take the following endpoint for example:
http://mydomain.com/api/customer/1234
Calling this endpoint will do the following for Customer with id=1234:
GET will return the data
PUT will update the data
DELETE will delete the data
In addition to making it clearer for your own development team, the Api also makes it easier for you to expose your data to third parties. You would need to provide a root URL and a list of your objects and any developer would be able to use it. There are other things you would need to do such as implementing security tokens but I wanted to demonstrate the benefits of using an easily understood framework.
TL;DR
What are the best practices when using .NET Razor views and AngularJS?
Context
We are developing a public website (not an intranet application) using mvc4 with razor, and we weren't very familiar with client script, so we started with what we knew: jQuery.
But now things are getting more complicated and we'd like to switch to AngularJS.
On the .NET part, we use Razor templates and UIHintAttribute (plus some custom ones) to render the right html "control". We also add custom html attributes to give extra information to the jQuery part (like title for a tooltip....)
So we already use a declarative way of setting the user interface behavior, that's why AngularJS seems a good option.
Questions
Since we already have models defined server side, and since AngularJS also uses models, wouldn't it force us to duplicate code?
How do we deal with data binding feature, since we already do some binding server side (in the views). Should we make a completely asynchronous application, making AJAX calls from AngularJS to load data, or can we mix both?
Anything else we should be aware of when trying to use both of these technologies?
I did some research on Google, but I can't find detailed ways of mixing Razor views and templates with AngularJS... Perhaps that's just not a good thing to do?
We dealt with this issue for months when working with MVC plus another JavaScript framework (Knockout). Ultimately, if you're going to be using a client-side MV* framework for rendering your user interface, you will find that mostly ditching Razor is going to be your best bet.
Most of the major MV* JavaScript frameworks, including AngularJS, assume you will be maintaining UI state and rendering your user interface based on JavaScript models or view models. Trying to mix in server-side rendering is just not going to work very well.
That's not to say there is no use for MVC when it comes to developing an Angular application. You can still take advantage of some great features like ASP.NET Bundling and Minification. And sometimes it works really well to embed JSON directly into the page using a Razor view or partial as opposed to making an additional AJAX call.
As for models, you may want to take a look at Breeze.js. It's a JavaScript library for data access that goes great with ASP.NET on the server side to share model metadata.
We wrote our own data binding mechanism that synchronizes the angular.js model with a view model on the server side. The javascript model is generated from a JSON serialization of the server-side view model to avoid the duplicate code that you were talking about.
We are using SignalR to update the client's view model from the server.
Server-side changes of the C# view model properties are sent to the client as a packet containing the path to the property, e.g. Persons[42].Address.City, and the value itself, e.g. New York. The view model inherits a base class that takes care of generating the property path, so the actual view model looks quite clean and we can concentrate on business logic.
Client-side changes of the javascript view model properties are sent to the server in the same way. To catch the change events, we encapsulate all fields of the original javascript model in get/set properties where the setter sends the update packet to the server.
Server-side methods of the view model can be invoked in a similar way. All objects in the view model have an invokeMethod function that can be used like this: Products[42].Manufacturer.invokeMethod('SendEmail', 'mailsubject', 'mailbody'). This will send a packet to the server containing the method path Products[42].Manufacturer.SendEmail and the arguments as an array of ['mailsubject','mailbody'].
In conclusion, the html view (kind of) binds to the view model on the server side where other systems, such as regular Razor views can work on the same objects.
The source code can be found here: SharpAngie.
I'm working with my team to create an enterprise level web application with Grails, but I don't see any "out of the box" solution to dealing with browser history when using grails with AJAX. Can someone point me to some documentation so that I can nail this?
Thanks a ton.
Grails is predominantly a server-side framework. All it provides in terms of client-side functionality are some tags to make it easy to call the server via AJAX. I'm not aware of any functionality in the core framework to support using the back/forward buttons when AJAX calls are made.
You might find something in a plugin, but I doubt it. Your best bet is to look for this functionality in whichever JS library you're using (YUI, JQuery, Dojo, etc.)
Typically this is done by changing the location.hash property on the page. This corresponds to a string you can add after the current url with a #. Adding or modifying this part of the URL will keep you on the same page, but add an additional history entry.
The jQuery BBQ plugin is a very useful framework to manage the hash. It contains a number of useful methods to manage the hash property as key/value pairs, the same way the regular URL query string works.
In my MVC3 application I want to remove all HTML5 tags for the output when the user is using IE < 9 to avoid using a frontend workaround.
I've looked in to using a HttpModule, ActionFilter, the OnResultExecuted method on a controller and inside Application_Start.
I've figured so far that I need to get the output as a string from HttpApplication.Context.Response.OutputStream using something like:
HttpApplication application = (HttpApplication)source;
HttpResponse response = application.Context.Response;
StreamReader sr = new StreamReader(stream);
string content = sr.ReadToEnd();
But all I get is the same error Stream was not readable.
I can write to the response with context.Response.Write.
From reading around on SO and google, MVC doesn't seem to have the same "page life cycle" has webforms(where I'm just overring Render and it works fine) which makes sens.
So my question is how do I get the HTML as a String in MVC? Have anyone tried to manipulate the html output?
I think you should be able to use an ActionFilter to do this. I've seen an example of someone modifying the output stream in this blog post. or in this post.
HTML5 is backwards compatible so feel more than free to use this default output with any browser. Obsolete browsers such as IE6 would still render correctly and even unobtrusive validation is going to work. So my advice is to leave the output as is.
Why dont you use javascript? Just determine what is user browser and remove html you want. JQuery has nice methods to do that.
To follow the concept of the MVC pattern, I'd look to use a different View implementation depending on whether the browser supports HTML 5 or not rather than trying to bodge the output. An alternative would be to use controls through a third party library that can decompose gracefully when the browser doesn't support all the latest features (or the library can implement the controls independently). JQuery, as supplied with ASP.NET MVC is an ideal with many, many controls available that cover most HTML5 tags.