ASP.NET Rich UI - What do you use?

Question

I'm looking for feedback on what other people use on their ASP.NET projects to provide a rich user interface experience while still remaining as productive as possible.

I'm developing an ASP.NET 3.5 web based application however I'm looking to make the UI in this project as rich as possible e.g.

• minimisation of postbacks and full page refreshes

• Use of AJAX where appropriate

• Ability to apply own theme/skin to any third party components.

I am very good at CSS/Javascript,am getting more and more proffcient in Jquery and have a pretty good knowledge of ASP.NET. However in terms of the Xhtml and client side technologies I have to be aware that not everyone coming to work on future projects will be as clued up on the Xhtml/CSS/Script side. Hence another key requirement is

• If possible get good design time support in Visual studio for the above

At the moment I'm looking into the bog standard search ane edit type screens e.g. search for some data and drill down and edit. Using ListView/GridView out of the box with no AJAX isn't an option as the user experience is too poor.

but am struggling between what I see as three different options.

1. Use the out of the box controls ASP.NET controls but with an updatepanel to minimise postbacks. I am not sure about this though as I have read the update panel is not very efficient (e.g. if you have a grid and put it into edit more ALL of the grids markup will be fetched from the server again.)
2. Give up on the ASP.NET controls and use a third party grid like Developer express grids. I've had a play with these and like the searching and grouping parts of this but when it comes to editing I'm not so sure.
3. Come up with a cunning plan of my own. I'm thinking of a web service returning JSON etc etc. This appeals to me but if I was going down this route I would need to convince my bosses that this could be productive and tie into as much exsiting stuff as possible. I've looked briefly at ADO.NET Data Services for instance.

Anyway as I said the aim of this question is to try and get a feel for what other people use on their ASP.NET projects to provide a rich user interface experience while still remaining as productive as possible.

Answer 1

For a grid you could use DataTables. It has multi column filtering and sorting, row based events, paging, and can work with the DOM or accept data via Ajax call.

If you are looking for a good resource for jQuery and the postback cycle you should read Dave Ward's blog. He covers different techniques regarding PageMethods and web services.

You also be interested in mirco-templates, where you can use a template language such as jTemplates to process client side updates to the DOM. Using this type of technique can reduce your reliance on ViewState and postbacks.

Finally, there is a nice plugin called SimplyModal that will allow you to create modal dialog boxes. Here's a good example.

Answer 2

We use a combination of updatepanels and raw ajax.

Updatepanels are as you say not very efficient, but they are nice when a large portion of the screen needs to be refreshed.

For javascript/ajax we mainly use jQuery (totally sweet) , and use MS Asp.Net Ajax to communicate with web services on the web server. The web services typically return our own custom ServiceResult objects tagged with [DataContract(Namespace = "")] with properties tagged with [DataMember]. when these objects are received on the js side they are js-objects. One of the props is the datacontainer which is a json-serialized object that can be deserialized on the js-side using

Sys.Serialization.JavaScriptSerializer.deserialize(resultObject.ResultString)

Answer 3

Do you have a budget? We use the Telerik AJAX components at my employer, and have been pretty happy with the features and performance.