I am a quite new to web development and I am trying to do some small form updates without causing a postback. For example making a control visible when a drop down list is changed.
I have so far come across some features that achieve this like the RequiredFieldValidator inside an update panels. However, these are specific to a single task.
What are my options to achieve these client side updates in Visual Studio? At the moment I don't know any JavaScript, so I would prefer another solution if it exists.
If you don't know JQuery you should or at least any other Javascript library this will give you an edge and also pump up your resume. The learning curve of these JS frameworks is so short that you'll be creating awesome UI's in no time. I suggest that you take at least two hours to get to know JQuery you won't regret it.
Here's a few great article on using ASP.NET with JQuery:
http://dotnetslackers.com/articles/ajax/using-jquery-with-asp-net.aspx
http://www.dotnetspark.com/kb/1532-gridview-and-jquery-asp-net-tutorial.aspx
http://www.beansoftware.com/ASP.NET-Tutorials/Using-jQuery-ASP.NET.aspx
Here are a few of the best tutorials on JQuery:
http://www.ajaxline.com/best-jquery-tutorials-march-2010
For display functionality like you have described, javascript really is the best solution. Take a look at jQuery, it makes writing javascript a lot easier, and you should be up and running with it in no time for tasks like your basic show/hide functionality.
Unfortunately, AJAX stands for 'Asynchronous Javascript and XML' so getting this behaviour without using Javascript is going to land you in a bit of a pickle.
Update Panels do work and are very easy, but they're also very slow in comparison as even if you only see the contents of your panel update, the entire ASP page has to be executed.
I'd urge you to take a deep breath and head over to JQuery.Com and practise the tutorials there. Javascript is easier then you think and JQuery takes a lot of the hardships of cross-browser compatibility out of the picture, leaving you to focus on the real tasks.
Good Luck!
Related
We are planning to extend an existing ASP.NET application (a real huge one) to have a slicker UI. One of the requiremnents is to have a way to execute server side code without a postback (As an example, say a user clicks on a link or hovers on a link, a popup comes up which executes server side code or makes calls to the database)
We plan to add more functionality that closely aligns with the behavior of a yahoo or a google customized page.
Is UpdatePanels a way to go or should a lot of it be implemented using JavaScript? One of the main requirements is to keep the pages as light as possible and to have good performance. We don't plan on using any 3rd party components.
What technologies are suggested that will help us add UI heavy features in the future?
Edit: Thanks everyone. It appears that the approach to take is to use a JS library such as JQuery and AJAX (from initial research the PageMethod/WebMethod way of doing it)?
Any more suggestions?
I think that UpdatePanels are actually pretty clunky. (Actually, I think ASP.NET is pretty clunky now that I've moved to ASP.NET MVC). If the page is going to be highly interactive, I'd suggest using some sort of javascript framework, like jQuery, Dojo, MooTools, etc. that will allow you to do AJAX easily as well as manage the user experience client-side. MS is distributing jQuery with Visual Studio and has promised to support it, so you might want to consider that when making your decision.
Stephen Walter did a great talk about the next version of ASP.NET Ajax 4.0. It's not an immediate solution but it's interesting to see where Microsoft is going with their Ajax framework.
There's a lot more to ASP.NET AJAX than the UpdatePanel, and a fair amount of it can be done without heavy JavaScript work. UpdatePanel is quite inefficient in terms of the amount of data send over the wire. As with everything, only optimise when you need - but bear in mind that the UpdatePanel is one of the first places to look for your slowdowns.
Just to give you a different answer than everybody else: why not try silverlight?
I still find myself hand coding Visual Studio projects more than using the variety of UI-driven menus and dialogs. For example:
web projects: hand code html/css in Source View vs dealing with the Design View / Properties Window
flushing out class files: code by hand using stuff like the prop-TAB-TAB Create Property keyboard shortcut and good ole Ctrl+[X|C|V] instead of the Class Diagram feature
Do I need to give the dialogs and menus another shot, or is this the current state of IDEs? Intellisense is the best thing since sliced bread IMO.
Steve
I'd be quite content to have Microsoft remove the design view from Visual Studio. I find myself cursing it every time I accidentally hit the button and wait ages for the broken rendering engine to kick in. This is from the perspective of a web developer mind you - I'm sure it's essential for developing windows apps.
Generally I think most of the RAD tools are not particularly useful, and in the long run end up being problematic as they're not very flexible. When developing web forms asp.net applications the listview and repeater are generally the only controls that I use. Hand coding html/css would be the preference for most designers anyway. Tools like Dreamweaver are nice initially when you're learning, but you do get to a stage where you realise you're using them as a glorified text editor.
Intellisense as you mention is utterly bad arse, and the one thing that I would miss if I switched to something like e or Textmate.
I am not a .NET programmer, and I understand Visual Studio does provide a lot of nifty code generation tools. However, I think it's rather important that a developer knows the code in his application. If you feel comfortable hand-coding it because you feel more in control that way, I don't think that should bother you at all.
Also, as someone who writes a lot of HTML/CSS by hand, I know that Visual Studio's Design View does not churn out 'quality' front end code a lot of the time.
I personally hand code html/css as well as my class definitions 99% of the time. Exceptions would be things that would be hard to hand-code otherwise (does anyone hand-code WCF proxies?)
It's all about YOU. What makes YOU more productive. What makes more scenes for YOU.
It's good to know and learn alternative ways to achieve your goal. You can give it try but if it slows you down return to the way YOU used to code.
I certainly find the the UI designer only works for the simplest of pages, and even for them only for a few design iterations. I find this for two reasons
1) When laying out a page, there are often several legitimate choices, and I don't like the choices VS makes. For instance, it will set the width of tables using pixel sizes, while for most fluid pages percentages make more sense. Nothing wrong with what it does, but for whatever reason I find myself fighting it more often than not.
2) It hard-codes a lot of style information, and even creates synthetic styles in an in-page style sheet. I'd rather have a concise and comprehensive CSS for the site as a whole, minimizing overrides on each page (or in each element!). Again, I fight it more often than not.
Well the designer for WPF/Silverlight is pretty cumbersome to use. So I pretty much hand code xaml and C#. At the moment I do not do much asp but with MVC, I would assume I would hand code that.
With visual studio having intellisense for a lot different syntaxes now, it is easier then ever to hand code, well, code. :) I mean intellisense works for C#, CSS, javascript, asp, and XML (if set up right). It is pretty easy to code now days. The youngsters have it so easy now days. They do not know how hard it was to code back in the day.
I'd say it absolutely, 100% depends on what you're writing.
If it's a basic CRUD interface for a simple database, then I'd say yes, 80% is way too much.
If it's a Web Application with plenty of JQuery UI and no persistent data source, then 80% is probably less than I'd expect.
As Vadium said, it also depends on what makes you more productive. Personally, I fly along with Intellisense, but I'm not too good on using UI tools to build an app.
I always feel dumber using Visual Studio, but I have to finish my project sometime this century to get paid.
Not sure if this belongs in community wiki...
Can somebody give some general guidelines on how to successfully build an ASP.NET site that isn't dependent on JavaScript? My understanding is that I should build a functional site initially without JavaScript, and use it to enhance the user experience. That is easier said than done... how can I make sure my site works without JavaScript short of disabling JavaScript and trying it? Or is this something that comes with experience?
Try ASP.NET MVC! sure most of the examples use JavaScript for the AJAX functionality, but it's easy to build a fully functioning site that doesn't use JavaScript.
Since ASP.NET MVC doesn't use server controls with all their embedded JavaScript, it's a great way to build a site with very minimal and lightweight HTML, while still writting your data access and business logic in C#, VB.NET, or any other .NET language.
I've built working ASP.Net sites with little or no JavaScript, so it's definitely possible (just a royal pain.) The trick, and this sounds silly, is to use as few <ASP:> type tags as possible. Those all spawn various levels of JavaScript. Regular old-school HTML elements work just fine with no scripting.
So, on the extreme end, you write, say, your form using all plain-vanilla HTML elements, and then you have that form submit point at another page that accepts the form submit and hands it off to your server-side scripting.
To put it another way, pretend that all you get with ASP.NET is a snazzy server-side programming language and you're writing HTML in 1998.
Now, having done this, I can tell you that what this ends up as is a classic ASP webpage with cleaner programming syntax. ;) Most of the features that make ASP.NET "better" than classic ASP hang on JavaScript, so writing a JavaScript-free ASP.NET system is an exercise in shooting oneself in the foot repeatedly.
However, the one thing you should absolutely do is make sure the first page or two do work without JavaScript. Unlike 10 years ago you can safely assume that any browser hitting your page has JavaScript, and unlike about 8 years ago, your visitors probably don't have JavaScript turned off for speed reasons, but they very well might have something like the NoScript plugin for Firefox dialed all the way to 11. So, your first couple of pages need to work well enough to a) tell the new visitor that they need JavaScript, and b) still look and work good enough to make it look like adding your site to the white list is worth it. (In my experience, most people get the first one done, but in such as way as to totally drop the ball on the second. To put it another way - if your super fancy web 2.0 mega site starts looking like craigslist if noScript is fired up, I'm probably not going to bother letting you run scripts on my machine.)
If you want to use many of the ASP.NET controls (i.e. the DataGridView), ASP.NET pages are generated with lots of JavaScript in order to handle the events on the controls (i.e. selecting a row in the DataGridView). I think you're going to lose so much of ASP.NET that trying to have ASP.NET work without JavaScript enabled is impractical.
Disabling Javascript is the best way to test how a web site performs with out it. Good news, IE8's developer tools provide a quick and easy way to do just that. Now, having said that, often times the only thing that you can do is put up a message with a noscript tag to the effect that your site requires javascript for best function.
Many ASP.NET functionalities & controls won't work when JavaScript has been disabled. Think of LinkButton's onclick event which contains a call to a JavaScript function.
LinkButton is just an example. But there are many other things too.
If your concern is with JavaScript being disabled in user's browser then you can check for that and handle your site accordingly.
If you do decide to build the site without JavaScript then you will end up building a somewhat static web site. If your need is just to build a static website then you can go on with this approach.
Write everything with basic html forms and css, and then you will know that it works without javascript.
Once you are happy with it, then look at unobtrusive javascript, so you can modify the way the application works when javascript is enabled.
Last time I looked at some stats about this around 1% disable JavaScript, so why spend hours and hours on this when what you should do is show a message telling the user that your site requires javascript.
Use your time to be productive instead of trying to write around perceived limitations.
I need to make a client able to drag and drop images into category-folders in an ASP.NET 3.5 web-app.
I was hoping that an option existed, that was almost as easy to use as the Reorderlist from Ajax Control Toolkit, and where I did not have to look into JQuery or similar handcoding.
What are your recommendations?
Similar questions have been asked before, like this 6 months ago...: ASP.net AJAX Drag/Drop? where MooTools is recommended, but 6 months is a long time in the ASP.NET/Ajax world, so maybe a better and even simpler option exists now?
Commercial components are also an option - well up to 200$ anyway.
My experience with the Reorder List in the Ajax Control Toolkit, as with many other 3rd party providers, is that most of them don't seem to be worth the effort. Definitely try them before you buy.
Unfortunately a lot of the samples/components out there are all too client-based and always seem to fall short on real-world uses and the sorts of interaction you need with ASP.Net applications (e.g. handling postback). Dragging a div around isn't that complicated, but that's all a lot of examples do. If your needs don't exactly mirror their offering try something else.
The Manning book ASP.NET AJAX in Action is a good reference on code for performing drag and drop. It uses Microsoft.Web.Preview, but this hasn't been updated in quite some time which is a worry. I have created a pretty good drag and drop UI with MS's PreviewDragDrop, it does work cross-browser, and it's pretty easy to code. Preview DLL's aside, the Manning book is great for understanding Microsofts AJAX API.
However, since jQuery is going to be shipped and supported with Visual Studio, I would recommend using it over anything else in a vain attempt to future-proof yourself.
A final piece of advice is never outsource your core competency. If this page is a core part of your offering you're better off implementing it yourself using library code like jQuery or Microsoft.Ajax rather than relying on a 3rd party component. However, if it's just a minor part of your site, then go ahead and use 3rd party controls.
Ref: My Version of Microsoft.Web.Preview.dll is 1.1.61025.0.
i have been very very happy with telerik's treeview control and use it for almost any asp.net application which needs a treeview drag and drop.
they allow free development licenses (not production though) so i guess you should give it a try. go to www.telerik.com and have a look
This is another Mootools suggestion, but you might find the Mif.Tree plugin useful. It's an MIT license. There are also code examples for each of the demos and API docs.
Robert>>
After spending 4-5 painful days of hacks, double-hacks and hacks to get around other hacks, I have come to the same conclusion as you. Especially the reorderlist from the ajax control toolkit drove me to the very edge of insanity.
It seems to me there is no real way around learning JQuery and simply doing the stuff myself. I used to shy away from doing client-side code, but with AJAX so much code has moved away from being just serverside.
JQuery has just been moved to the top of my personal study program.
Jquery has drag and drop controls.
Link
Maybe that will help...
I wonder if someone knows if there is a pre-made solution for this: I have a List on an ASP.net Website, and I want that the User is able to re-sort the list through Drag and Drop. Additionally, I would love to have a second list to which the user can drag items from the first list onto.
So far, I found two solutions:
The ReorderList from the Ajax Control Toolkit, which requires a bit of manual work to make sure changes are persisted into the database, and that does not support drag/drop between lists.
The RadGrid from Telerik which does all I want, but is priced far far beyond my Budget.
Does anyone else have some ideas or at least some keywords/pointers to do further investigation on? Espectially the Drag/Drop between two lists is something I am rather clueless about how to do that in ASP.net.
Target Framework is 3.0 by the way.
The Mootools sortables plugin does just that, and best of all, it's free ;)
http://demos.mootools.net/Sortables
This is just personal opinion, but the problem I find with ready-made controls in cases like this is that they are extremely bloated, because they're trying to fit everybody's purpose. If all you need is a sortable list then a simple Scriptaculous list or jQuery list with a quick WebMethod callback should fit the bill quite nicely, and you can obviously stick this into your own user control.
As I say, just my opinion, but I wouldn't go spending money on something that's going to add tons of overhead to my page, when I could spend (literally) 10 minutes writing one for free.
I've evaluated the Telerik grid as well as Infragistics version. In the end we took an approach similar to what tags2k suggested. We just wrote our own javascript and called .Net PageMethods to do the server side work.
We found both of the "out of the box" solutions to be bloated. Unless you put paging in at like 20 records per row they really stunk performance wise.
Checkout Raj Kaimal's ajax control extender:
http://weblogs.asp.net/rajbk/Contents/Item/Display/517
It works like a charm.