Can JQuery do all this functionality? - jquery-ui

As I am newbie to JQuery. I have certain questions in mind regarding JQuery.
Can I make complete website with Jquery?
Means in ASP.Net website we use Server Controls to design page, Can we make all this functionality on .ASPX page using JQuery?
If yes, then how to handle server side events?
For designing .ASPX pages, what we prefer to use? JQuery standard controls or Plugin?

No. JQuery is not a server-side framework. It's a client side DOM Manipulation domain specific language and API that enables client-side code to work cross-browser, and includes a variety of utility and helper functions for AJAX, deferred callback resolution, and generic functional programming.
In short, it is not meant to replace your server-side code.

The jQuery framework is only a javascript library which means it can only handle events or actions on the client-side. It doesn't matter what backend you are using for your website (PHP, ASP.Net, Python), javascript only works once the page has been rendered and sent to the browser. Try reading up on the docs for jQuery here: http://docs.jquery.com/
If you have any questions specifically about jQuery programming, we would be more than happy to answer them.

Related

jQuery Mobile vs AngularJs page navigation

I am developing a hybrid mobile app using jQuery Mobile and AngularJS.
I decided to use a mix of the two for the following:
jQuery Mobile
good UI features
not too heavyweight (compared to Sencha Touch, for example)
AngularJS
good performance and resource management (caching, asynchronous requests)
personal experience
I have little to no experience with jQuery Mobile and, as I was learning, I noticed a potential conflict between the page navigation models of the two.
Should I use only one ?
If yes, which one is better suited for my needs ?
Are there any gotchas with this setup ?
Many thanks.
You can't compare them to each other.
Angular.js (like Backbone, Ember eg.) are MV* Frameworks (for SPA) which used to render html templates/views directly in the client instead of server. So you have a lot of application logic now in your frontend and this Frameworks are made to make your life better, coding this.
jQuery Mobile on the other side is a pure widget/plugin library. The AJAX navigation plugin load pages (something static, like html) into the DOM via AJAX. So you have to pre-render this pages on the server somehow.
If you started to build a SPA with Angular it doesn't make sense to use jQuery Mobile's AJAX navigation at all. (If it's a native mobile app you have no server anyway.)
Sure, you won't get far without an UI component library so use one of your choice (eg. jQM) but work with Angular's directives to init the plugins/widgets correctly on your DOM elements since a $(document).ready(...) or a $(document).on( "pageload", ... ) doesn't know anything about your Angular views.
Take a look at following projects:
http://angular-ui.github.io
https://github.com/angular-widgets/angular-jqm
This has been already addressed in HERE
Basically the article states that trying to intercept the navigation from angular can be painful, so leave all the routing jqm

benefit of using angular js on top of asp.net mvc

Is there much point to using angular js on top of asp.net mvc since they're kind of both doing the same thing? What are the advantages to using angular over asp.net mvc + jquery? What kind of scenario would you pick angular in? If you do pick angular in a microsoft environment, what would you run on the server side? Would it be something like Web API? Or is there still benefit of using traditional asp.net mvc?
This question is a bit subjective, however here was our reasoning.
Let the client handle rendering of pages, free up resources on the server.
Leverage built in caching of cache servers since we are just dealing with <html/> content.
Since the pages are cached the only traffic back and forth is json payloads.
We have been using NancyFx, but WebAPI or Service Stack would work just fine.
We wanted to build a responsive single page application and AngularJs fit the bill for testability as full feature rich framework.
AngularJs forces you into a pattern that we needed for JavaScript, in the past our jQuery heavy applications turned into functional spaghetti (That was our fault but being guided by Angular helped out a lot).
As with all frameworks pick the one that suites your needs
On my site http://www.reviewstoshare.com, I am using AngularJS along with ASP.NET MVC. The main reason I did not go all the way with AngularJS was that SEO is not easily achieved with AngularJS.
Keep in mind that my site was already built using ASP.MVC + Jquery for in page interaction as needed.
On the other hand there is still some "Ajaxy" nature to the site like comments, voting, flagging etc. Not too different than Stackoverflow itself. Before AngularJS it was a mess of Jquery plugins and functions within $(document).ready() callback, not to mention the JS code was not testable much.
In the end, I went with both.
If you fancy using Java Script framework then Angular JS rocks.
SEO could be the issue. You need to have deeper understanding of DOM and Java Script as compared to other famous JS Frameworks.
I ve developed a Proof of Concept - using Angular JS with Require JS using ASP.net MVC
You can have a look at it at the below given link
http://angualrjsrequirejsaspmvc.blogspot.com/2013/08/angular-js-with-require-js-front-end.html

asp.net mvc: handling no-javascript

I'm working on a asp.net mvc2 app. I have been using jquery to do various different things in all of my views. They are work from a regular browser quite well. But I'm trying to figure out a good way to get the functionality working with browsers with javascript disabled (like mobile browsers). Is there a way to define a whole different view for non javascript browsers?
A specific example of what I'm trying to do is, I have a <button> with it's onClick calling a javascript that does $.post() to a controller.
What's a good way to make it, so, it works the way it works right now (doing ajax calls) with regular javascript-enabled browsers and it a also works with javascript-incapable browsers, doing a full postback ?
Thanks
I use the unobtrusive javascript approach; get the app working without JavaScript, then add in extensibility with JQuery so that the app will work when scripts are turned off, or if the JS fails to download.
Same approach I believe that #James Kolpack is talking about. This is the true failsafe approach. While you can detect the support of JS by the browser through Request.Browser, this isn't accurate to most of the possible scenarios.

ASP.NET MVC & Ajax Control Toolkit

One of the things I like about coding "old skool" (web forms) is the AJAX Control Toolkit.
I saw on the Microsoft Storefront video 14, Rob Conery uses the TextboxWatermark control.
When I downloaded the code though, I couldn't find any reference to the Watermark control or any other control from the toolkit nor could I get it to work.
So my question is, does the AJAX Control Toolkit even work in an MVC / AJAX / JQuery type world without viewstate. What do you use for "simple" controls such as Calendar & Watermarks?
jQuery UI has a calendar and other UI components. Also check out the vast number of jQuery plugins.
I've been looking into this question recently and what I've found is that the AJAX Control Toolkit is not easy to use in the "JavaScript only" manner that you'd want to use for ASP.NET MVC. In fact it's a real pain. Here are two examples:
Example 1 - Popup Calendar
Example 2 - Auto Complete Text Field
Neither are easy.
You can give your MVC pages a code-behind and use the AJAX Control Toolkit as you would in regular ASP.NET, but that really violates the whole idea of MVC, so I wouldn't advise it.
My suggestion would be to follow Fredrik Kalseth's advice and use jQuery UI or one of the many plugins. Telerik also has some good looking Open Source MVC Controls that are based on jQuery.
Most of the AJAX Control Toolkit is available in MVC-friendly javascript form off the MS AJAX CDN. These can be used using a jquery plug-in syntax as well.

Pros and cons of MS Ajax vs. jQuery in an ASP.NET MVC app?

Now that RC1 is out I need to decide once and for all whether to use MS Ajax libraries or just jQuery for AJAX requests. The application is a new application. Essentially the way I'll decide is whether or not i get any significant benefit from the Microsoft libraries that I wouldn't get from jQuery. I already HAVE jQuery loading and I am concerned about the extra overhead of file size more than anything.
As far as I'm aware -- the only benefit really is that there are helpers like Ajax.BeginForm, but perhaps these will work with jQuery at some point anyway? I was also told today by a government employee friend of mine that MS Ajax library has a LOT of bugs in it - which concerns me.
With Microsoft now having officially befriended jQuery I wouldn't be too worried about them doing anything in future to leave jQuery in the dust by enhancing their own libraries.
I really don't know a whole lot about exactly what MS Ajax actually does for me. Are there certain pros and cons. Or is it just 90% bloat to support 'update panel' ?
I also find it very interesting that the ASP.NET MVC in Action book just skips over the MS Ajax libraries and jumps straight into jQuery :
In this chapter the reader will
examine how the ajax technique is
applied to ASP.NET MVC in a more
seamless way than with Web Forms. The
reader will see how to leverage an
increasingly popular, lightweight
javascript library called jQuery.
(from free sample chapter on AJAX)
Would very much appreciate hearing from anyone about their experiences workin with both, expecially on the following additional questions :
is it easy to convert code between the two libraries - assuming relatively simple ajax requirements ?
is debugging notably better or faster in either library
anybody know how ASP.NET 4.0 is progressing and any announced plans for the AJAX library that might be beneficial to MVC?
what in a nutshell could MS AJAX do for an MVC app beyond sending requests and sticking the response in a DIV?
how do i do the equivalent of Ajax.BeginForm(...) and use jQuery ?
what was your deal killer one way or the other?
what are most people out there using?
Personally, I would stick with JQuery. MS AJAX is pretty heavyweight in terms of size and you can do so much with JQuery. As far as whether it is easy to convert code, well it depends on how much of the MS AJAX stuff you are using. I don't think there is really much appreciable difference in debugging from one to the other. You will have a larger community of JQuery users from which to pull resources.
You can (and I do) use both depending on the need. When I want a particular form to be non-javascript friendly AND I'm generating content on the server, I'll use MS AJAX via the AjaxHelper. It builds everything I need on the client side to handle the non-javascript enabled browser. I only need to detect AJAX/non-AJAX in the controller and return a partial or a full view depending. If I need to use AJAX as part of a plugin (say autocomplete), then I'll use jQuery. The point is I use the tool that best suited (easiest to implement) for me. Granted, most of my apps run on an intranet so I'm much less concerned about the size of the downloads.
I also found the jQuery announcement about MS incorporating the library
Apparently :
Additionally Microsoft will be
developing additional controls, or
widgets, to run on top of jQuery that
will be easily deployable within your
.NET applications. jQuery helpers will
also be included in the server-side
portion of .NET development (in
addition to the existing helpers)
providing complementary functions to
existing ASP.NET AJAX capabilities.
So I'm thinking its quite probable that they'll end up having jQuery helpers that exactly mirror the AJAX helpers for the MS stuff.
I guess solution I'll take is to use Html.BeginForm, and then intercept the submit button to use jQuery. I'm not especially worried about people without javascript losing functionality, but its not that much harder to do so I may as well.
JQuery is much easier to code than Ajax allot of the problems with overhead can be remedied by adding more memory rather than by stream lining code. Ajax just does not make any sense to me although I'm just a beginner at it. After dealing with the overly criptic Ajax syntax, jQuery is like a breath of freash air.
Well there is one thing that I found with MS Ajax framework that cannot be done elegantly with jQuery. User controls build MS Ajax are very object oriented. This cannot be easily done with jQuery. For example, lets assume you are building a "address" user control, that will have address1, address2, city, state, zipcode and country. You can build this control with jQuery and Ajax but the benefit that's provided by Ajax library is that it will compartmentalize the address control. You can define a function "reset()" on that control that would reset the contents of address control. Lets say that you want "reset()" to set address1, address2, City to Empty string but State to "AL" and Country to USA. You define the code for Ajax control in (.js) file and that function will be associated with your address control. Same is not possible with jQuery. Any function you define will be global in scope and there is no easy way to tie that function Address control. You can very well call the "reset" function on textbox control on the form!!!
So if you want to create a pure object oriented user controls then i guess better choice is using MS Ajax framework.

Resources