Sunday, February 20, 2011

Remembering Page Methods

Ok, I know ASP.Net web forms are all out of style now, even though if you are in a heavily data centric environment (one where you have grids upon grids upon grids) web forms still make the most sense in a lot of scenarios. So a lot of us are stuck with web forms and will be for as long as they are supported.

Anyway, one of the must under utilized capabilities in web form .Net apps are page methods. I sometimes forget the even exist in our jQuery / Ajax centered world. The preferred "best practice" method I'm sure would be to build a web service in WCF that you connect to through jQuery to do an Ajax call without a post back, but sometimes the quick and dirty approach that page methods offer is still useful.

So Zeeshan Umar has a good blog post about good old Page Methods here that the following code snip is based on.

I didn't add much to his example, so feel free to go right to his, but here is my own quick demo that I worked through just to remind myself that page methods still exists and how to use them based on Zeeshan's post.

The sample is just one aspx page with its code behind. This example demos submitting a registration form similar to what Zeeshan did-

The PageMethodsTest.aspx page (scroll bar at bottom, highlight all to copy/paste)

The PageMethodsTest.aspx.cs code behind.

Simple! Thanks for the reminder and quick code demo Zeeshan.

Bonus! Of course you can do all this with jQuery. One bonus using jQuery instead of Microsoft's ASP.Net AJAX is that you can leave the script manager off of your page. You can also easily call page methods ON OTHER PAGES (within the same project anyway), so then page methods really do become a poor man's quick and dirty alternative to WCF and ASMX for small task.

Here is an example HTML page that calls the above PageMethodTest.aspx RegUser method-


Here is a useful blog post from Encosia for more info on jQuery / page method calls-

Thursday, February 17, 2011

JavaScript: Available Window Height and Width

Ok, here is another junior varsity tip for using Javascript to get the true available window height and width. Note I stole this code from somewhere (though I tweaked it). I'd give credit if I remembered where I got it from, I don't.

function HSAvailWidth() {
  if (typeof window.innerWidth != 'undefined')
    return window.innerWidth;
  if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth !== 0)
    return document.documentElement.clientWidth;
  return document.getElementsByTagName('body')[0].clientWidth;
function HSAvailHeight() {
  if (typeof window.innerHeight != 'undefined')
    return window.innerHeight;
  if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientHeight != 'undefined' && document.documentElement.clientHeight !== 0)
    return document.documentElement.clientHeight;
  return document.getElementsByTagName('body')[0].clientHeight;

Or with jQuery...

$(window).height(); $(window).width();

Note: different browsers will have different available viewport height/widths because the browser tool bars very is size.

More here...

Tuesday, February 15, 2011

Very Cool jQuery Sorting/Suffling Plugin called Isotope

Check this jQuery plugin called Isotope out.

It has some pretty cool animation features, worth a look.

This Looks Interesting

A new Javascript/jQuery framework called the iX Framework looks pretty cool. It looks like it can do a lot (but not all) of what Telerik controls can do (though without the back end .Net integration). Might be work a look. $99 bucks for now.

Friday, February 04, 2011

Quick Tip: Generate Unique ID's in Javascript

Here is a little code snippet I use to create unique id's in Javascript when I'm dynamically adding dom elements.

function HSCreateID(apd) {
  return apd + '' + new Date().getTime();

More on the Date().getTime() function in Javascript-