MVC backed auto form generation & editable grid - asp.net-mvc-3

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.

Related

Knockout JS + Partial Views and Validation? [duplicate]

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

What is the need of JSF, when UI can be achieved with JavaScript libraries such as jQuery and AngularJS

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.

jqGrid filtering

I want to implement filtering in my jqGrid in my Spring Framework MVC 3.0 project. Where can I find sample code or documentation telling how to use filtering in this?
I just posted an answer on the same question (probably from you) on http://www.trirand.com/blog/?page_id=393/help/jqgrid-filtering. To make other people easy to read the answer I post the same information here.
The answer on your question depends a little how you interpret the "filtering". If you want use some external controls (selects, checkboxes and so on on the same page where you have jqGrid) to filter your data I recommend you to read How to filter the jqGrid data NOT using the built in search/filter box.
If you want to implement data filtering inside of jqGrid you can choose between serching with respect of "search" and reset of serching results with respect of "refresh" buttons of the navigator (simple searching and advanced searching), the usage of toolbar searching (conside the usage of stringResult: true to be more conform with other form of searching) and custom searching.
If you decide to use advance searching you can just add string filter parameter to the (see Guidance on a better way to retain filtering options when using ASP.NET MVC 2) action which provide the grid data or add three string parameters searchField, searchString, searchOper if you want to use simple searching feature. In all cases you will have to add WHERE to the SELECT statments which will be constructed in your program based on the values of the new parameters.
Probably other people post you more URLs to the good full code examples which you could use.
UPATED: I don't use Spring Framework myself, so I could not help you with any Spring MVC 3.0 examples. Some general solution is more common. For example in ASP.NET MVC solutions I prefer don't fill the data in the grid directly using MVC. Instead of that I provide a JSON web service (implemented as a part of ASP.NET MVC solutions or as WCFservice which are the part of the same web site) which URL I place in the jqGrid parameter. So you should just invest in the writing on business logic in form of JSON/XML web service which provide the data. The most jqGrid specific code you can write in JavaScript. So you can share the experience of other people in the usage of jqGrid and have a clear separation of HTML code from the business logic. Moreover JSON/XML web services can be better tested for example with respect of unit tests.

What new features would you like to see in Asp.net MVC 3?

Asp.net MVC 3 preview 1 was released at the end of last month. Are there any new features you are excited about or any features you would like to see before it is fully released?
Full support for Controllers with Generic Parameters
public GenericController<SomeType> : Controller
Generic controllers are quite possibly the greatest MVC timesaver if your doing a lot or business CRUD. There are so many similarities between the Add methods of almost every MVC project that it makes sense to abstract these operations out in a Controller that fits all scenarios.
Right now its a little hacky to create a generic controller. The MVC engine always gets the name wrong (GenericCo vs. Generic) and without full support plugin and libraries that interact with controllers just fall over when they encounter a generic one.
Make Dropdowns easier to work with
As a professional MVC tag watcher I've noticed that working with dropdowns is one of the most repeated questions on SO. The amount of Dropdown questions is a strong indication that something should be done to make it easier or less ... complex?
make checkbox list easy to work with
add T4MVC to the official release
add official helpers for OData
support one javascript library either MS Ajax or jQuery(preferably)
I wish they can add something to help developer to migrate their previous ASP.NET WebForms application.

Manually coding MVC Views vs. asp:ServerControls

I barely got into ASP.Net webforms when MVC came out, and now I'm ready to try it out. But, I want to clarify something to be sure I understand the View coding in ASP.Net MVC...
I've heard that you must hand-code all the HTML in the View layouts, and that you cannot use server controls for this. Now, I like the way you can use the asp:ListView to present a list of data in webforms, and I've made heavy use of the SelectedItemTemplate and the concept of SelectedItem as a whole. So, I fear a big headache in having have to handle all that output yourself, versus letting the server controls do it. Same goes for DataGridView and the Select, Edit, Delete commadds that come with that server control.
In a particular case I am brainstorming over, I have Customer names displayed in a asp:ListView, and then when you click on a Customer name, it uses the SelectedItemTemplate that expands within the ListView to highlight that row and show more details about that particular Customer (right in the ListView).
I'd love to see some sample asp.Net MVC view code that shows how to handle this commone UI presentation technique.
there are some good GridView for ASP.NET MVC
http://www.codeproject.com/KB/aspnet/MVCFlexigrid.aspx
http://www.reconstrukt.com/ingrid/example1.html

Resources