We've been working on web solutions for over past 9+ years and just like many of you, we've migrated from the legacy ASP to ASP.Net, MVC, knockoutjs and so on. jQuery played a keyrole and now it seems its the age of MVVM libraries like KO with declarative data binding based approach.
I'll stop here and ask for expert opinions on our two requirements -
An editable grid with inbuilt sorting, paging and basic search. And if possible a grid capable of handling its own editable dialog (i.e. like datatables.net - but its paid)
Is there a way to take the declarative binding to the next level and auto-generate forms backed with knockoutjs like data-binding technology.
I believe no need to mention that we're working in ASP.Net v4.0+ and MVC. Most of our forms are backed by one or more table(s) and we can easily manage the backend CRUD operations once the correct actions are triggered from front end and we can have requests serving JSON as and when requested.
PS: We don't need the old school approachs like the #Html.EditorFor in MVC.
I start learning web development with C# on mono, and
I wish to create a page which contains the list of something (items), the page should be done in the best possible level to be competitive with the other pages.
1) First I discovered .NET 1.1 classes DataGrid, DataList and Repeater
http://msdn.microsoft.com/en-us/library/aa479015.aspx
this is very old technology from 2003, which uses ViewState and full page reloads
and enthusiasts created various techniques to reduce ViewState text length
2) .Net 2.0 added DataGrid, and Callback framework
http://edndoc.esri.com/arcobjects/9.2/NET_Server_Doc/developer/ADF/ajax_callback.htm
(Client Callback Manager and WebResource.axd)
3) .Net 3.5 introduces UpdatePanel (and ScriptManager class)
http://msdn.microsoft.com/en-us/library/vstudio/bb386573%28v=vs.100%29.aspx
this allows to place DataGrid within UpdatePanel and almost solve the task of creating list on the web (except real-time updates and the presence of ViewState)
In the parallel path of development, ASP .NET MVC 3 was created (which done everything without viewstate by intent). And there is Grid.Mvc component for it
http://gridmvc.codeplex.com/
29 Jul 2012 - this is most recent ready to use technology which I saw for this task
4) .Net 4.5 introduces support of RFC 6455 (WebSockets)
http://www.codemag.com/Article/1210051
WebSockets was wrapped by more high-level library SignalR
http://blog.filipekberg.se/2012/12/10/running-signalr-on-mono/
I expect that there should be a list component which uses SignalR/WebSockets to dynamically update items, but I am unable to find it yet. Is there version of UpdatePanel which works over WebSocket instead of XMLHttpRequest object? Or some other list component which works with WebSockets directly?
Take a look at this tutorial: Working on JSON objects in jQuery and MVC
Once you have the JSON data in the browser, you can use it in many ways with for example jQuery widgets.
It seems that WebSockets are not yet implemented in Mono: http://go-mono.com/status/status.aspx?reference=4.5&profile=4.5&assembly=System
You can use other WebSocket frameworks in mono:
http://vtortola.github.io/WebSocketListener/
http://xsockets.net/
http://alchemywebsockets.net/
https://superwebsocket.codeplex.com/
Is it possible to do a KendoUI mobile project, using ASP.net mvc? Watching the introduction on Pluralsight, I'm sort of confused. As an example, KendoUI Mobile uses something like this to navigate:
<a href="#someView" data-role="button">Go to some view</button>
When rendering views through RenderBody in my main layout, will I have to specify this view as a mobile view, or does the application defined in my main layout pick up on this?
So, I guess my question is this; Has anyone got any experience on this combination and, if so, could you provide some resources as to where this combination is being used?
I figured this on out. Seems to be a few projects out there using this combination. One example is this project: KendoUI mobile task manager
That being said, I'll try to play around and tweak the framework to my needs.
The answer is Yes. I was searching for the same answers, and found this resource very helpful, using MVC4, with detailed explanations:
Single Page App using MVC and Kendo Mobile
When searching for references and tutorials, what is not immediately clear is that Kendo UI Mobile is a different setup from Kendo UI. As WhizKid points out it is a single page application, and all your data must go through AJAX.
If you have not used them before, you will probably need to learn Kendo's MVVM and datasources. You must decide what sort of interface you will use for data exchange (eg. WebApi, OData) and fix the routing.
The reason I am going this way is because Kendo comes with good looks, and MVC can help me with localization.
This question already has answers here:
Knockout + mvc 3 + Validation
(4 answers)
Closed 9 years ago.
I am new to knockout and pure js/html frameworks as a whole for creating web sites. However I do have experience with ASP MVC.
In my current project I was originally using MVC to do the back end work, and the front end ui stuffs. With alot of jquery plugged in and other event frameworks etc.
Anyway I am looking at moving the project to mobile devices using PhoneGap, and due to this am moving the backend concerns from the ASP MVC app to a web service (still ASP MVC, but just exposes and consumes data, no views). So this got me thinking, the back end will be responsible for receiving data and auto binding it, validating the model, then persisting it, and returning a relevant result. This way the PhoneGap versions can re-use the jquery and javascript currently used on the front end, and they can consume the data and send the data to the service directly through PhoneGap.
Now with that said, my current web app would become a little redundant, as there is no benefit in my using the asp mvc framework as the same work is carried out on the web service, and also most of the heavy work is client side, although I do heavily make use of clientside validation and partial re-useable views.
So with this all being said, I am looking at scrapping my web app, and just moving it to use Knockout and communicate directly with the service, to cut out the middle man. However I would still need to be able to re-use partial views and would need some sort of validation for the models.
Can Knockout provide this functionality for me? or are there any other plugins/frameworks that allow me to do this?
Knockout has built in templating features (using jquery.tmpl.js or it can use other templating plugins if you choose). Knockout also plays nicely with other js frameworks so using jquery is no problem and most jquery plugins should be accessible from within Knockout. There are also a few examples in the Knockout documentation that use the jquery validation plugin.
Validation Example
Data-Binding Syntax
Templates
I was reading about JSF that it's a UI framework and provides some UI components. But how is it better or different from number of components that are available from jQueryUI, AngularJS, React, Vue.js, Svelte, ExtJS, or even plain HTML, CSS and JavaScript.
Why should someone learn JSF?
JSF to plain JSP/Servlet/HTML/CSS/JS is like as jQuery to plain JS: do more with less code. To take PrimeFaces (jQuery + jQuery UI based) as an example, browse through its showcase to see complete code examples. BootsFaces (jQuery + Bootstrap UI based) has also a showcase with complete code examples. If you study those examples closely, then you'll see that you basically need a simple Javabean class as model and a XHTML file as view.
Note that you should not see JSF as replacement of alone HTML/CSS/JS, you should also take the server side part into account (specifically: JSP/Servlet). JSF removes the need of all the boilerplate of gathering HTTP request parameters, converting/validating them, updating the model values, executing the right Java method to do the business stuff and generating the HTML/CSS/JS boilerplate code. With JSF you basically end up with a XHTML page as view definition and a Javabean class as model definition. This greatly speeds up development.
As with every component based web MVC framework, you have in JSF less fine-grained control over the rendered HTML/CSS/JS. Adding custom JS code isn't that easy as you have to take the JSF view state in the server side into account as well (e.g. enabling a disabled button in JS side won't enable the button in JSF side, which is in turn a huge security advantage). If that is however a major showstopper, then rather look for an action based web MVC framework like Spring MVC. You'll only take into account that you have to write all that HTML/CSS/JS code (and prevention against XSS, CSRF and DOM-manipulation!) yourself. Also if you fall back from Facelets to JSP, you'll miss advanced templating capabilities as well.
On the other hand, if you have a big JSP/Servlet/HTML/CSS/JS/jQuery based website and you'd like to refactor the repeated JSP/Servlet/HTML/CSS/JS/jQuery boilerplate code into reusable components, then one of the solutions would be JSF. Custom templates, tagfiles and components can aid in this. In that perspective, JSF stands above JSP/Servlet/HTML/CSS/JS/jQuery (and that's also why it's pretty important to understand those basics before diving into JSF).
You can find a real world kickoff JSF based project here: Java EE Kickoff App. You'll see that it contains next to JSF as good HTML5, CSS3 and jQuery.
See also:
Difference between Request MVC and Component MVC
Difference between JSP, Servlet and JSF
What are the main disadvantages of JSF 2.0?
Is it possible to use JSF+Facelets with HTML 4/5?
When to use <ui:include>, tag files, composite components and/or custom components?
JSF was created to make it so that java shops didn't have to learn stuff like jQuery and build complex JS but instead focus on a purely Java stack. In a world where time is money and lots of places already focusing on Java development, one less language/piece in the stack makes training and maintaining faster and thus cheaper.
I'll add that JavaScript is easy to become a maintenance nightmare on large teams, especially if some of the developers on the project are not highly web savvy.
With Javascript and frameworks such as jQuery you have full flexibility and full control . With ext's etc you lose much control and must adapt to the framework. With JSF you totally lose control and must totally adapt to the framework. You're invoked in lifecycles etc. and finally you have no control when the call to the server can be made and where not. If you are to do something considered 'special', you're in very hard position. And in JSF world even such basic things as multicolumn table sort or fields where you can type only limited set of characters (such as number field) are considered 'special'.
However, the more flexibility you have, the more errors or bad practices you can made. High flexibility works only with highly intelligent programmers, others will turn the project into unmanagable nightmare.
But, with JSF and its limited flexibility, there's always only a few (or even only one) correct way to do something. You are very limited, you can't make shortcuts, you must write more XML etc. - but when adapting to standard, there's better control on the code the unexperienced or low-skilled programmers will produce. As a result, big corporations love JSF because it is 'safer' for them.
When I moved from GWT to JSF, I was shocked, how many things, that was natural to me, was considered highly untypical and how much simple things were so hard to achieve. What's more, even making the smallest changes, such as adding ':' sign after label, which in GWT/jQuery powered app would be changing one function generating label, required changing dozens of files with localized properties, which wasn't even considered by anyone except me strange...
The benefits of using JSF are not only in generating xhtml + css + js. Sometimes JSF imposes a restriction on the markup you can generate, like any component based framework. But JSF is not just for that, its lifecyle helps greately. After validating the input it can update the model and sync your server side beans without any effort. you just say "whatever the user types here, check if it's a number, if yes then store it in the property YY in object XX" and JSF will do all that.
So yes, you can still use JQuery, JS, etc. But JSF provides many benefits when it comes to writing server side code and saves you from a lot of boiler plate.
I strongly disagree that jsf adds anything. It only adds overhead. Doing ui stuff on the server is the most ridiculous thing ive ever heard. And javascript on large teams works great - its called reusing code.
Just wrap the jquery in some jsp tags, thats all you need and youre done, and dont endure the.shackles and scalability issues with.jsf and richfaces.
Having worked with JSF, Spring MVC, Struts, Grails, JQuery, and ExtJS my opinion is that Grails + ExtJS is one powerful combination.
I would pick Grails over JSF any day. I like the completeness of ExtJS as the client side framework and library, but it comes with a steeper learning curve than JQuery.
Here are the biggest differences between jQuery & JSF:
no MVC architecture
no state control (store date in session or conversation, auto-clean up, etc.)
no (default) validation library
no templating library
no advanced navigation/routing
client side
jQuery was never intended to be used as a full stack webframework. It was more intended for replacing low-level JS code so that writing JS becomes easier and more powerfull in less lines of code.
And it should thus mostly be used to add behaviour on HTML elements.
Having used ExtJS framework for a large web application, I know how easy it is to use. The ExtJS (Schena) is best suited for (Oracle 11g) database interactions in MVC architecture. The View was for the visual / user interactions. The controller specified the 'processing' and the triggers that needed to be used form the PLSQL packages (the API for the CRUD, SQL select queries etc.). The Model and the store files were used to 'map' the data items to the Viewer / inputs.
ExtJS is not suitable for non database intensive web interfaces - where Angular JS may be a better fit.