I've been having some fun playing around with the ASP.NET AJAX Beta release this weekend.
For example, below is a SimpleService.asmx web-service with a "GetMessage" method that takes a string as an argument:
Now when I run the page and enter a name "Scott", the page will use AJAX to call back and dynamically update the HTML of the page without requiring any postbacks or page refreshes.
A cleaner approach to generate HTML using templates
As you can see from the example above, I can easily return HTML markup from the server and inject it into the page on the client. The downside with the approach I am taking above, though, is that I am embedding the HTML generation logic directly within my server web method. This is bad because: 1) it intermixes UI and logic, and 2) it becomes hard to maintain and write as the UI gets richer.
What I wanted was an easy way to perform my logic within my web service method, retrieve some data, and then pass the data off to some template/view class to generate the returned HTML UI result. For example, consider generating a Customer/Order Manager application which uses AJAX to generate a UI list of customers like this:
I want to write server code like below from within my WebService to lookup the customers by country and return the appropriate html list UI. Note below how the ViewManager.RenderView method allows me to pass in a data object to bind the UI against. All UI generation is encapsulated within my View and out of my controller webmethod:
It turns out this wasn't too hard to enable and only required ~20 lines of code to implement the ViewManager class and RenderView methods used above. You can download my simple implementation of it here.
My implementation allows you to define a template to render using the standard ASP.NET User Control (.ascx file) model - which means you get full VS designer support, intellisense, and compilation checking of it. It does not require that you host the usercontrol template on a page - instead my RenderView implementation dynamically cooks up a dummy Page object to host the UserControl while it renders, and captures and returns the output as a string.
For example, here is the Customer.ascx template I could write to generate the customer list output like the screen-shot above which generates a list of customer names that have links to drill into their order history:
And its associated code-behind file then looks like this (note: I could add view-specific formatting methods into this if I wanted to):
For passing in the data to the template (for example: the customers collection above), I initially required that the UserControl implement an IViewTemplate interface that I used to associate the data with. After playing with it for awhile, though, I instead decided to go with a simpler user model and just have the UserControl expose a public "Data" property on itself (like above). The ViewManager.RenderView method then does the magic of associating the data object passed in to the RenderView method with the UserControl instance via Reflection, at which point the UserControl just acts and renders like normal.
The end result is a pretty powerful and easy way to generate any type of HTML response you want, and cleanly encapsulate it using .ascx templates.
Finishing it Up
You can download the complete sample I ended up building here. Just for fun, I added to the above customer list example by adding support for users to click on any of the customer names (after they search by country) to pop-up a listing of their orders (along with the dates they placed the order). This is also done fully with AJAX using the approach I outlined above:
Click here to download the ViewManager.RenderView implementation if you want to check it out and try it yourself.
Hope this helps,