<Martani/> Blog

You cannot make Ajax calls on ASP.NET user controls can you? So what’s the solution? give up? absolutely not.

While believing arrogantly that I am a genius or that C# is the most beautiful piece of software ever created (and will be), ideas had been floating in my head non-stop, and most of the problems I faced just got solved, of course with nasty non advised tricks :-), keep reading.

I needed to call a web method on a usercontrol, and all I wanted was the result of the processing returned by this method, so I tried the ASP.NET AJAX PageMethods but the result was PageMethods is not defined!

Cool, if we need the result of the web method in our JavaScript, we can profit of the ASP.NET server controls and the UpdatePanel for Ajax calls, here are the steps:

1. Inserting an UpdatePanel on you usercontrol, and within it, inserting a Label and a button or a timer (or whatever way you want to callback you usercontrol)

The label above will be a placeholder of our Ajax call result, it has a class name ResultPlaceHolder so that it will be found easier using jQuery, as you should know, ids and names on server controls get messed up in client side with ASP.NET.

2. Setting up the result from within the Timer tick method (or the click method of your button)

3. Exploiting these fresh results in your JavaScript, the best way would be by setting an interval for a function that checks the results in the placeholder every given moments.

And voila, this is a nasty nonadviced method to do Ajax calls to webcontrols’ methods, a la “vite fait”. Enjoy.

Selecting distinct values in a Linq query while working on non trivial data need more than a simple call to the extension method Distinct().

Say I have the following xml data, and I want to select only distinct data elements based on their date attribute.

As you can see there are some duplicates regarding the date attribute, the following Linq query will return all the data elements as an IEnumerable of HistoryDataElement.

If we want distinct results based on the date attribute for example, we have to create a comparison class that implements the interface IEqualityComparer<T>.

Here is a very simple implementation:

With this class in place, we can just pass a new instance of this class to the Distinct method to get the desired results :

Notice that this way, you are eliminating all the duplicates that have the same property date, so only the first element of the matching elements is retrieved even If the other properties differ, this is cited by code in the Equals method of the IEqualityComparer<T>.

Applying a multilingual interface on your webpages and allowing the change at the client side without the need for a server postback has never been easier using the technique I’ll describe in this post.
While developing Bloginto, I came across the situation of implementing an English-Arabic-French interface with the possibility to change the language on the fly (on the client side), so I used a trick so close to culture resource files in the .NET.
My first priority was to write the minimum of code using jQuery, and as you will see, it is *really* minimal.

1. Preparing the resources for the language

We will encapsulate the language resources with Javascript arrays, here is an example:
The getLanguageResources function returns an array that contains an associative key/value arrays of the desirable languages, notice how the same key is used for the different translations.

2. Preparing the HTML markup

We need to put placeholders for the multilingual text to show in the markup, I choose a <span> tag here, but obviously you can use whatever elements fits best. The trick is to have all these multilingual spans use the same name attribute (this is not a necessity neither, you can use whatever attribute you wish), and have them use another attribute, for example caption which value is the key of the text to show in the resource arrays.
We will also add two buttons to test the language change, here is the final markup :
Notice how the radio buttons for changing the language have values which are the keys of the resource language (the arrays).

3. jQuery magic

Now we will apply some jQuery code to associate the spans with their corresponding text from the language selected by the radio buttons
Here we attach a click event to the radio buttons, and we simply call the function changeLanguage whenever a button is clicked, we pass the value of the “value” attribute of that button to the function which represents the specified language (‘fr’ or ‘en’)
The changeLanguage function loads the corresponding array of the languages from the getLanguageResources function, then iterate through every element that has the attribute name “lbl”, and change its text to the value in the resource language array which key is the caption of that specified element (span), pretty simple!
As you can see, all the magic is done with 2 lines of jQuery, if you guessed that the “.attr()” method will do the same instead of “.each()” then you’ve guessed wrong, attr() applies only to the first element in the selection set. See .attr() specification here.

4. Demo

Her is a working demo http://jsfiddle.net/uUgWD/.

Bloginto is a Google Chrome extension that brings feeds from the Digg like websites called Bloginy for both the Algerian http://bloginy.com and the Moroccan http://bloginy.ma

Today I’m pleased to announce that the version 2.0 of the extension is here, you can install it from https://chrome.google.com/extensions/detail/jppmcmbnmodlmgbfdddmeopgagancoak or update it from the settings section in Google Chrome if you have already installed the previous version.

This new version $(‘was’).completely(‘jQuery’, ‘fied’), cleaner and reliable code has been introduced to make sure handling all the error cases by showing pretty informative messages to the user. Enough talking, here are the new features :

As you can see from the settings page :

• You can choose the default view, the Algerian or the Moroccan Bloginy, this has been present in the previous versions, but it has an impact on the notifications of the unread and new arriving feeds, you will notified only when feeds from the default feed arrive.
• The notification themselves : the number shows the unread feeds count, it will refresh automatically and change when you read feeds or new ones become available.
• Because you can vote on articles directly from the extension now, there is a section where you can save your user name and password for both, Bloginy.com and Bloginy.ma.
• Timeouts for the request, you should make this bigger if you have slow internet, and the feeds timeout, this is the frequency of checking new articles on the website.
• While reading feeds, you can mark them as read, and the extension offer you to hide read feeds, or just mark them with a different color.
• And most of all, it is now multilingual, you can change the language from Arabic to French to English, and it works on the fly (God bless jQuery), if you need to know how this is done, here is the code that does it all :p

  $("span[name='lbl']").each(function(i, elt){
      $(elt).text(l[$(elt).attr("caption")]);
  });   

  where l is the resources language;

The extension itself allows the marking/hiding of the read posts, live voting and twittering the posts directly from the extension. You can toggle hidden posts by clicking on the button at the top. To vote, you simply click on the “like” icon, to twitter… well you click on the twitter icon and to mark a post as read, you click on the description of the post.

Finally, I hope Bloginy will get a little active after making the voting available directly and eventually allowing multiple languages that may match the users tastes.

The code source is available on Google Code at this address : https://code.google.com/p/bloginto-chrome/

$(‘feed > back’).is({always: ‘welcome ;)’}) ;
Ramadan Mubarak for all, and that’s my present for you guys to spend more time “engaged” with the community.

Google pack is a set of software made available free by Google including programs by Google like Chrome and Picasa or other vendors like Mozilla Firefox and Adobe Reader. What is strange about the Google pack is its webpage, where it shows the applications you have installed on your computer and the applications that are not installed already.

The question that pops first is, how does a webpage knows what software is installed on my computer? I decided to see how does it work, inspecting Google’s coming-from-hell javascript files and trying to figure out how things are put together. To be honest, my motivation was first to know if I can use Google’s technique to leverage any information about other installed software on someone’s computer or not, and the answer I simply: no you cant, don’t bother.

Google’s pack webpage http://pack.google.com/ links to a javascript file and have some application parameters initialized at the page loading, with a notable array of guid ‘s and application names:

It turns out that Google stores information of the applications in the Windows registry (not exactly the same technique on other systems) at the path HKEY_LOCAL_MACHINE\SOFTWARE\Google\Google Updater\AppData\. My research was mainly about how does the Javascript code figure out how to fetch these information from the registry and if it is possible to make it read information from other locations in the registry.

Using burp proxy to intercept and change the applications guid on the fly in the html page, I didn’t come to any result, and it turns out that the only information that is read from the registry was only from  inside HKEY_LOCAL_MACHINE\SOFTWARE\Google\Google Updater\AppData\.

So the only trick left was to analyze the javascript file http://pack.google.com/cominst.js?2 (go ahead, take a look), if you want to try the code yourself, you can use the console in firebug under firefox or the Developer Tools (Ctrl + Shit + I) under Google chrome.

The javascript code defines some objects used to manipulate all the operations from reading the list of applications available, to fetching the applications already installed etc…

First a script on the page creates a _CI_Pack object named pack, this pack object have a property named plugin that contains a Plugin object which is the main piece of code we are looking for. This plugin is an embed object installed on the page with the function Plugin.createCIObject that inserts the following code on the page :

This plugin then exposes an attribute called ciobj which is the one reading information from the registry.

In fact this plugin preloads all the information from the registry found in HKEY_LOCAL_MACHINE\SOFTWARE\Google\Google Updater\AppData\ in advance, and the guids that are presented in the pack object have no effect on these information, that’s why we can’t inject or make the plugin read other keys outside this path.

You can read the guid of the applications loaded by the pluing using this code :

How the plugin discover the installed applications :

The plugin object uses a simple method to know if the application is installed or not, installed applications have a version number associated with their corresponding object, if the application is not installed, the version number have the value of null, Google checks if the version number is not null, and hence figures out if the application id already installed or not.

Note that every object in pack.plugin.ciobj.Applications have the two properties exposed for javascript which are Id and Version. The script is really complicated due to the shortening in the variable names, and this function is the one responsible for returning the installed apps function getInstalledList(b, c).

And that’s it, maybe when someone else wonders someday how Google Pack fetch the information of installed applications on the visitor’s computer, he won’t hopefully waste 3 or such days trying to figure out how that javascript file works.

Say you want to insert a link for your tweet inside that same tweet, or want to link a facebook update inside the update itself. The issue with this is that: first you can’t know what will be the link to your new tweet/update, and second, once you post something on these sites you can’t change it (unlike Google Buzz for example).

I am used to celebrate my tweets which rank is of the form xxxx where 0<x<10 (I expect some technical knowledge for my reader :p), for example my 1111th and 6666th tweet, and usually the form of the tweet was :

wohoo, my xxxxth tweet [and a link to this same tweet here]

The idea was to use a link shortening service and do the following, we can use bit.ly

• Check if the url http://bit.ly/WHAT_EVER_YOU_WANT_HERE is not already taken, by typing it into the browser and checking that a Page Not Found error occurred which means the suffix WHAT_EVER_YOU_WANT_HERE is available.
• post your tweet/update with the above link.
• then take the link of the new tweet/update, shorten it with bit.ly and custom the shortened url using the same suffix of the link above.

And by doing this, you finally have a circular link, targeting the same tweet/update which contains the same link targeting the same… you get the point.

Here is an example of a tweet:

A test tweet with a circular linkhttp://bit.ly/WHAT_EVER_YOU_WANT_HERE