ASP.NET Debugging : AJAX

ASP.NET MVC and JSON and when do you use Async

Tom — Fri, 03 Apr 2009 13:00:00 GMT

I wanted to post somewhat of a discussion starter around some of the new technologies that ASP.NET has recently released.

ASP.NET MVC

This technology has one huge benefit of allowing you to do unit testing on your site. But there are also a number of other advantages to it, for example, you can have a web page call commands inside a controller. This allows multiple pages to call the same command which helps keep things clean. It also does a pretty good job of separating the code from the presentation layer. But I did find myself doing a lot of coding like I used to with classic ASP or even IDC where we loop through results and have <%= %> snippets all over the aspx page.

JSON/AJAX

These technologies have really opened the door to a lot more asynchronous commands on the web. They allow you to do lots of small submissions and updates without the need to submit and refresh the whole page.

jQuery

This is a really interesting new functionality in that it really isn’t anything new but just a way of collecting things in a cleaner way. The way it is designed really gives us an ability to do things that you generally don’t consider doing. For example, you can make images clickable without having any link code in the html. It can also give some interesting ways to hide some of your IP (although they can always see it using something like netmon).

Silverlight

I think with Silverlight 3, we have really raised the bar for making Silverlight a choice for developing an application. Especially if you combine it with RIA, there are a lot of great applications of Silverlight that before would be much harder to create. I know Silverlight 3 is just in developer beta, but I have been using it quite a bit lately and I think it is really going to change things. The deep linking and search engine optimization functionality really help make this a good solution as well.

So when would you use which?

That is what I’d like to hear from everyone. If you have a page, when do you decide that you should do something async? When do you decide that you should just submit the entire page? Have you considered using Silverlight yet? What functionality makes it attractive to you? Is it the off-line functionality?

My take

I wanted to give some of my thoughts on these things, but remember that they are just thoughts as a lot of these technologies I haven’t used enough to know which is best for what situation.

I think that most of these technologies allow for very fast creation of a site. I think a lot of it boils down to what you are comfortable with or what you have available. If you have designers at your disposal, Silverlight is a great choice as they can create the Xaml to make your application look amazing.

I think one of the powerful things about MVC is that you can combine it with AJAX, jQuery, JSON to get a bunch of these things in the same application. But it still is a question as to when to use what. For me, I really like using jQuery to control the UI and then have it call commands through AJAX/JSON. It also allows you to update a page with new content without having to refresh the page. Which makes the user experience a lot cleaner.

As for Silverlight, in general I think it is a wildcard out of the bunch. You can do all the same things you can with these other technologies but within the same framework. So I think if you want to have the best of all worlds and learn the smallest amount, this may be a good way to go.

So what are your thoughts? And do you have any other functionality that you would like that see that isn’t available yet?

ASP.NET Troubleshooting

Tom — Tue, 24 Mar 2009 19:31:03 GMT

So with how long ASP.NET has been out for now, I am really curious to know how people go about tracking down issues in their project.

I’d like to know things like:

How do you know there is a problem
What tools do you use to confirm that the problem really is a problem
How do you gather data about the problem
How do you determine if the problem is your code or something else (like the network, hard drive failure, etc)
If the problem is your code, how do you ensure your fix resolves the problem (how do you test the fix)

If there are any others, I’d also like to hear them.

Also, if you do anything in the Cloud now, I’d love to hear how you troubleshoot that. And it can be from any cloud service provider.

And have any of these things changed with some of the new ways to program that have come out. For example, AJAX, MVC, Silverlight, IE8, jQuery, etc.

Creating an Auto-complete textbox

Tom — Mon, 27 Oct 2008 13:00:00 GMT

It seems that auto-complete is very popular these days with different sites. So I wanted to show you how you can create your own Auto-complete textbox on your web sites. There are two ways that this can be accomplished depending on what you are using and what you want to use.

Ajax control toolkit

This method is described very well on the following blog post: ASP.NET MVC Tip #37 – Create an Auto-Complete Text Field. The best thing about this method is that you can use a webservice as the backend for what you call to get the data back. This enables you to have a database of possible results and populate the box as the person types. For example, if you were going to write a web site that allows someone to post a blog, you could have a Auto-Complete textbox for the tags on the post. Pulling down the list of tags they have used in the past.

JQuery

Another way to accomplish this is to use JQuery. With this javascript library, you can get this to work pretty easily. To see how, check out: UI/Autocomplete on JQuery.com. This also has some advantages, less code and easier to setup. But would take some more to make it more powerful, like adding Ajax to make a call to the server. But if you have a known list, this could be really nice and would be quick.

Silverlight

You can also use Silverlight to make an Auto-complete textbox. This method is described by Nikhil on his blog here: Silverlight AutoComplete.

I hope this gives you some options to add this useful method to your web sites. Feel free to post other methods here as well.

The PDC this year…

Tom — Mon, 29 Sep 2008 13:00:00 GMT

Not sure how many people are planning on attending the PDC (Professional Developers Conference) this year, but it is going to be a fantastic conference.

We announced some huge announcements on the PDC web site. http://www.microsoftpdc.com/

We have a major lineup of executive keynote speakers representing most of the core Microsoft businesses.
We’ll have 20+ Windows 7 sessions, and we’ll be giving out the Win7 bits.
We also announced our in-depth symposia sessions including parallel computing and S+S.

If you have any questions about the PDC, feel free to check out the site listed above, or you can Ask the Brain.

The conference runs from October 27th to October 30th with the pre-conference on October 26th. You can see the full agenda here.

We have also just announced that all partners and customers attending the PDC will receive a very special gift this year: a 160GB external USB2 hard drive with all of the bits! That is a very cool gift and very useful as well. I’d love to hear if anyone is going or thinking about going to the PDC!

Slow performance of a GridView inside an UpdatePanel

Tom — Mon, 15 Sep 2008 13:00:00 GMT

Here is an interesting problem we ran into recently. The customer had a large GridView that was being updated by AJAX inside on UpdatePanel and seeing bad performance.

The reason is that the Client-Side Javascript has to walk the entire DOM of the Content of the UpdatePanel to tear down the HTML DOM as the Page goes through an Asynchronous update.

First Solution

To alleviate the Expensive Stack Walks to destroy DOM Elements and its related Time Delay, the developers suggested that we remove the Unnecessary payload from the DOM of the UpdatePanel during an Asynch Postback.

The Way you would implement this is to:

1. Hook up an Event handler to the beginRequest Event .

EX:

<script language ="javascript" type ="text/javascript">
  Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(clearDisposableItems)
</script>

2. Destroy an DOM Elements that you don’t want the Framework to tear down by tearing it down manually.

EX:

function clearDisposableItems( sender , args ) {
  if (Sys.Browser.agent == Sys.Browser.InternetExplorer ) {
    $get('<%=GridViewID.ClientID%>').tBodies[0].removeNode(true);
  } else {
    $get('<%=GridViewID.ClientID%>').innerHTML="";
  }
}

This gave us a slight decrease in the time taken for async Updates, about 3 seconds less. But, we are still far away from the optimal turn-around time of a few seconds.

In a sample that I setup on my machine using about 500 rows in a GridView, the turn-around times were in the order of sub-seconds when the GridView had text labels instead of textboxes.

When I changed the text labels to textboxes, there was an exponential jump in the time taken to process the Form even before the request was submitted to the Server.

Sub-second response times changed to 25 seconds!!

The main reason for this slow-down is due to the number of Controls that are present in the Grid. We cannot optimize the Javascript to give good performance in this scenario.

Alternative methods

So what can we do if we need a GridView with controls? Well, the best suggestions are:

Enable paging to allow the control to stay smaller but still give all the information required.
Change the UI to allow for an optimal number of rows that give acceptable performance.

Internet Explorer 8 Beta 1 Hands-on Labs

Tom — Mon, 04 Aug 2008 13:00:00 GMT

Just wanted to pass along some really interesting labs that I came across the other day. These labs cover the following topics:

IE 8 Activities
AJAX
Developer Tools
Standards Support
IE 8 WebSlices

You can check out all these labs at Internet Explorer 8 Beta 1 Hands-on Labs for Tech-Ed 2008.

Note: These labs assume you are running Windows Vista. They will work on Windows XP but the visual experience and instructions may vary.

ASP.NET Scaling Strategies

Tom — Fri, 01 Aug 2008 13:00:00 GMT

So there is a very good article that came out in the April 2008 issue of the MSDN Magazine, Scaling Strategies for ASP.NET Applications. The main things in this article are:

Scaling ASP.NET Applications and databases
Optimizing code
Using efficient caching
Affinity and load balancing

One of the most useful things I found about the site is the analyze tool. This site will look at your web site and give you detailed analysis of your page. Telling you things you can do to make your site have better performance. The types of things it talks about are:

Total_html – number of web pages
Total_objects – number of objects on the page
Total_images
Total_css
Total_size
Total_script
Html_size
Images_size
Script_size
Css_size
Multim_size – size of multimedia files on site

They give a lot of useful tips to make your site perform better and have less data to download.

After this, there are a bunch of useful topics, but the most important thing mentioned is to use AJAX where possible. Not only does this make the web page look more like a desktop application, but since it is only going to update the specific content that needs to be changed. All the rest of the data will still be downloaded to the client. This greatly reduces the load to the server.

One thing that they talk about is the Performance Equation for the web

This is a useful for figuring out how your web site is going to perform. And you can use it to figure out how best to improve performance.

Feel free to read through that article and you can see more information about caching and database improvements as well. If anyone has other tools or methods that they use to help with scaling, I’d like to hear about them.

In case you missed MIX

Tom — Wed, 14 May 2008 18:01:13 GMT

There were a lot of great sessions at MIX this year and in case you missed them, I wanted to let you know where you can find them at. For individual sessions, you can go here.

But there is a better way to go through some of the really cool information that was there. On the website for MIX, they have created a University. This is a great place to learn about many of the new technologies. From Silverlight to AJAX to Media Center. There are some great details here including multiple demos and a Hands on Lab for most of of the areas.

Then if you look on the right side of the university page, you will see a link to some case studies. This is a great way to see how some other companies are using some of these new technologies.

By far, the coolest sample or demo on there is the DinnerNow site. This site is a sample that demonstrates so many of the different technologies that is it hard to list them all. According to the site: IIS7, ASP.NET Ajax Extensions, LINQ, Windows Communication Foundation, Windows Workflow Foundation, Windows Presentation Foundation, Windows PowerShell, and the .NET Compact Framework.

I would highly suggest that you try this sample and download the project. It can give you many insights into how all these technologies can come together to make something really great.

Ajax View: Remotely Monitoring Web 2.0 Applications

Tom — Thu, 24 Apr 2008 04:00:00 GMT

Microsoft research recently released a new tool to help developers with Ajax applications. You can check out the site for more information, Ajax View.

This is some really cool technology that basically puts a proxy in between the server and the end-users browser and allows instrumentation and other really useful things to happen.

You can see a simple walkthrough Ajax View's performance profiling.

If you haven’t looked at the various things that our research team is working on, I would highly suggest you check it out. Things like:

This is just a sample of some of the really cool work then are doing. Check out the main page at http://research.microsoft.com

A few minor issues with AJAX and their resolution

Tom — Sat, 01 Dec 2007 01:27:03 GMT

Problem 1 Trying to debug a Javascript file from the Visual Studio IDE, if you try to open it from the Script Explorer, it doesn't open Solution Try to open another script and then go back to the original one and it will open. Problem 2 Cannot set a breakpoint...(read more)