jQuery 1.6 is launched and it is ready for consumption.
Check this article to find out What’s new with jQuery 1.6.
Posted by Virendra Dugar on May 7, 2011
jQuery 1.6 is launched and it is ready for consumption.
Check this article to find out What’s new with jQuery 1.6.
Posted in jQuery | Leave a Comment »
Posted by Virendra Dugar on October 16, 2010
I found a good article on how to “Set Max Length for ASP.NET MultiLine Textbox using jQuery“.
Thanks,
Virendra Dugar
Posted in jQuery | Tagged: jQuery | 1 Comment »
Posted by Virendra Dugar on May 23, 2010
This particular article is about a pretty common functionality which I think most of the software engineers face in their projects. Even I came across the same situation many times. Previously I used to achieve the functionality via JavaScript, which really worked flawlessly. But as a software engineer, I think one should always adapt the new technology. So, this time I tried to achieve the same via JQuery as its booming now and one need to upgrade himself. So what functionality are we talking about? See below given images.
Okay. So you must have got the idea about the functionality. Yes, you guessed it right. It’s about selecting all the items of checkbox list, when select all is checked. You can find thousands of solution using Jquery when you google it. Then why you are here. Well, in fact I googled a lot but didn’t even come across to a single article which solves my purpose. Let me explain the requirement of the functionality here.
So let’s go directly to the code.
Prerequisite: I assume that you know the basics of JQuery. Read this article for information on Introduction to JQuery.
<table cellpadding="2" cellspacing="2" width="50%">
<tr>
<th align="left" style="font-family:Arial;">
<h3>
Checkbox Select All Demo using JQuery</h3>
</th>
</tr>
<tr>
<td>
<asp:CheckBox ID="chkSelectAll" runat="server" Text="Select All" Font-Size="9pt"
Font-Names="Arial" />
</td>
</tr>
<tr>
<td>
<asp:CheckBoxList ID="chkItems" runat="server" Width="200px" Font-Size="9pt" Font-Names="Arial"
BorderStyle="Solid" BorderColor="Black" BorderWidth="1px">
</asp:CheckBoxList>
</td>
</tr>
</table>
Well, I have placed a checkbox “Select All” with ID “chkSelectAll” and a checkbox list with ID “chkItems”.
<script type="text/javascript">
$(document).ready(function() {
$("#<%=chkSelectAll.ClientID %>").click(function() {
$("#<%= chkItems.ClientID %> input:checkbox").attr('checked',this.checked);
});
$("#<%=chkItems.ClientID %> input:checkbox").click(function(){
if($("#<%= chkSelectAll.ClientID %>").attr('checked') == true && this.checked == false)
$("#<%= chkSelectAll.ClientID %>").attr('checked',false);
if(this.checked == true)
CheckSelectAll();
});
function CheckSelectAll()
{
var flag = true;
$("#<%=chkItems.ClientID %> input:checkbox").each(function() {
if(this.checked == false)
flag = false;
});
$("#<%= chkSelectAll.ClientID %>").attr('checked',flag);
}
});
</script>
Well above given code solves my purpose. Let’s go through the code function by function.
$("#<%=chkSelectAll.ClientID %>").click(function() {
$("#<%= chkItems.ClientID %> input:checkbox").attr('checked',this.checked);
});
This code binds click event to “Select All” checkbox. It will search for all the checkbox inside the chkItems (as checkbox list, when rendered becomes a table. See the view source.) and set the checked attribute to the value of “Select All” checkbox. 2 Lines of code can serve your purpose. That’s why I love JQuery.
Next function binds the click event to every checkbox of checkbox list.
$("#<%=chkItems.ClientID %> input:checkbox").click(function(){
Inside the function, it first check for the status of “Select All”. If it’s true and the clicked checkbox is unchecked (see Image 3), then it will uncheck the “Select All” checkbox.
if($("#<%= chkSelectAll.ClientID %>").attr('checked') == true && this.checked == false)
$("#<%= chkSelectAll.ClientID %>").attr('checked',false);
Next task is, if the clicked checkbox item status is checked, then we need to check the status of all the items of checkbox list and if every item is checked, then we must check the “Select All” checkbox.
if(this.checked == true)
CheckSelectAll();
This will call a function “CheckSelectAll”. This function iterates thorugh the checkbox list and finds all the items are checked or not. If yes, then it sets the status of “Select All” checkbox accordingly.
function CheckSelectAll()
{
var flag = true;
$("#<%=chkItems.ClientID %> input:checkbox").each(function() {
if(this.checked == false)
flag = false;
});
$("#<%= chkSelectAll.ClientID %>").attr('checked',flag);
}
each() method of JQuery will perfomes the iteration for specified item.
That’s it. Hope this will help you in your work.
Enjoy,
Virendra
Posted in jQuery | Tagged: jQuery | Leave a Comment »
Posted by Virendra Dugar on January 20, 2010
jQuery 1.4 was recently released. There are many new features, enhancements and performance improvements included in 1.4!
You can download jQuery 1.4 right now, here:http://code.jquery.com/jquery-1.4.js
Check this article to know 15 New Features of JQuery 1.4
Enjoy..
Posted in jQuery | Tagged: jQuery | Leave a Comment »
Posted by Virendra Dugar on January 20, 2010
I will start this article, with one of the problem which I come across recently.
There were more than 10000 records listed in the repeater. When I click the very last record for editing, asynchronous postback happens and data is loaded for editing in Area 1 . But the problem was with the page position. I was not able to see the control’s of Part1, as page was maintaining it’s scroll position after async postback. This is what I don’t want. As it’s not at all user friendly. End-User will never come to know that record has been opened in edit mode. I set the “MaintainScrollPositionOnPostback” property to false but it was not working due to AJAX. Somehow, I want page position to be set to (0,0) so that I can see Area 1 controls.
The solution was to set Page position back to 0,0, at the end of ajax request. Here is what I did. See below code.
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
window.scroll(0,0);
}
</script>
Javascript provides a function scroll() which basically scrolls page position to the specified value. It takes two arguments Top and left. I passed it 0,0 and it worked for me.
Enjoy..
Posted in Ajax, ASP.NET | Tagged: Ajax, ASP.NET | Leave a Comment »
Posted by Virendra Dugar on November 24, 2009
JQuery is a Java script libarary/ Java Script framework that simplifies the interaction process or access process of traversing in HTML document. It provides methods to make animations, add ajax interaction to the page, provides an easy way to apply CSS to any items and provides an easy mechanism for binding and unbinding events. Huge code written using Java script can easily replaced by few lines of code in JQuery.
Initially it’s was released in January 2006 but the very first stable version of JQuery 1.0 was released in August 2006. This version had support for CSS, events and Ajax. After that many version of JQuery were released but the latest version is JQuery 1.3.2. You can download this from JQuery website.
1. Allows to access elements in the document
If one need to access the DOM tree without any JavaScript libarary, one has to write many lines of code. JQuery provides a selector mechanism to access any part of DOM.
2. Easily apply CSS
As it’s known that CSS is the most powerful and mostly used for good appreance of any webpage. JQuery provides CSS Selectors which allows to change the CSS classes or individual style for any portion of the document. This can be done even after the page is rendered.
3. Make Animation
For better user experience, animation can do the job for you. JQuery provides many methods to perform animations like show,hide, fade, wipe, start, stop etc. Doing all this with JQuery is fun as No huge lines of code, no complex logic.
4. Ajax Interaction
In today’s world, Ajax is one of the most popular technology used in almost every website for better user experience. Jquery provides support for ajax also which allows to access server side event without refreshing the web page.
5. API to change document’s content
JQuery provides API (Application Program Interface) which allows to change the content of the document. Changing Text, inserting images, ordering of list can be done with few keystrokes with JQuery API. Entire structure of HTML can be rewritten or extended.
6. Event handling
Any technology is a failure if it cannot responsed to the user when any event takes place. Jquerys’s event handling is one the decent feature. It quickly responsed to any event such as user clicking a button.
To start with JQuery, first download the Jquery from it’s official website (http://JQuery.com). Make sure you download the latest copy of the JQuery.
<script src="Script/jquery.js" type="text/javascript"></script>
I have copied the jquery.js and placed it in script directory of the project. In this demo, I am going to show you how easily you can change the CSS and do animation.
Let’s first take a look at HTML
<h2> History of JQuery</h2> <div id="content"> Initially it's was released in January 2006 but the very first stable version of JQuery 1.0 was released in August 2006. This version had support for CSS,events and Ajax. After that many version of JQuery were released but the latest version is JQuery 1.3.2. You can download this from JQuery website. </div>
As you can see, I have placed a div tag with it’s ID set to content. Now, I will show you how you can find the div and apply CSS to it using JQuery.
<style type="text/css">
.ApplyColor
{
background-color: Gray;
font-family: Arial;
font-size: 10pt;
color: White;
}
h2
{
font-size: 20pt;
}
</style>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#content').addClass('ApplyColor');
});
</script>
.ready() is a jQuery event handler. This particular event handler will execute when the document is ready to be accessed and scripts have completed loading. A .ready() handler can be placed anywhere on the page and you can even have multiple ready handlers in the page.
Now, if you run this page, you will see the div with content id is having gray background and white color foreground.
Let’s go to the animation part with JQuery.
Place a button and some text in Paragraph tag. Using JQuery, I will add a click event handler.
<asp:Button ID="btnShow" runat="server" Text="Show" />
<p style="display: none;background-color:Red">
Hello
</p>
Now add this Jquery code to document.ready event
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#btnShow').click(function() {
$("p").show("");
return false;
});
});
</script>
Above code will find the btnshow and add a click event handler to it. When the button is click then Jquery will find the p tag and make a call to show function which will display the content of the p tag on the screen.
Like wise there are many more functions for animation. You can find the whole list over here.
This is just an overview of starting with Jquery. Many more complex things can be done via jquery with ease. Go to this main page of Jquery and learn as much as you can.
Happy Programming…
Virendra Dugar
Posted in jQuery | Tagged: jQuery | Leave a Comment »
Posted by Virendra Dugar on November 16, 2009
The idea behind writing this article is to share solution to one problem that I faced recently for one my project. The problem was how we can copy an assembly (.DLL) file from Global Assembly Cache (GAC). Well, if it simply copy and paste then I am wasting my and your valuable time over here. There is no point have an article such as this. When you read the article heading, it looks pretty simple but it is not. Let’s first start with the basics.
Assembly: According to MSDN “Assemblies are the building blocks of .NET Framework applications; they form the fundamental unit of deployment, version control, reuse, activation scoping, and security permissions. An assembly is a collection of types and resources that are built to work together and form a logical unit of functionality. An assembly provides the common language runtime with the information it needs to be aware of type implementations.“
There are two types of assembly
Click here to find more details about assembly.
GAC (Global assembly cache): GAC is a place where .NET assemblies are stored, specifically used to be shared by multiple applications on that computer.
GACUtil is a command line tool which allows you to place, to remove assembly from GAC.
To install an assembly called VirendraAssembly in the GAC, you can use the command.
gacutil /i VirendraAssembly.dll
To uninstall an assembly called VirendraAssembly in the GAC, you can use the command
gacutil /u VirendraAssebmly.dll
I will not go into the details of gacutil you can find from this link.
But have you ever tried to copy DLL from GAC (Global assembly cache)? Well, first time when someone asked me, I said go to GAC (c:\Windows\Assembly) folder, Select the assembly you want to copy, then right click on it and select copy option and paste it at your desired location. Well, I tried the same way but unfortunately there is no option available to copy when you make a right click on any assembly. Only available options are uninstall and properties option.
See the below screen shot.

One more thing that is noticeable is, go to DOS prompt and fire DIR command to see the listing of C:\Windows\Assembly folder and you will be surprised to see the listing. See below screen shot.

Where C:\Windows\Assembly folder looks like this.See Screenshot below:

Surprised!! Well, what you see on the DOS Prompt is the internal structure of GAC folder then why windows is not showing such structure of the GAC. Well, this is because off SHFusion.dll (Assembly cache Viewer). On the Dos Prompt fire Dir /AH command. It shows desktop.ini. SHFusion.dll uses this desktop.ini file to show abstract view of GAC.
There are 4 ways to show the same structure for GAC in windows as we will in DOS.
Rename the Desktop.ini file
As I mentioned previously, SHFusion.dll make use of desktop.ini to determine how to display the content of the GAC folder. From DOS prompt, fire these commands to rename the desktop.ini file.
attrib desktop.ini -h -r -s rename desktop.ini desktop.ini.bak
Now, go to C:\Windows\Assembly folder to see its content. Screen will look something like below screenshot

You can also see the particular folder content. Select GAC and you will see something like this.

If you want to see both the view together run this series of commands on DOS Prompt.
Assuming you are on c:\ drive.
cd Windows\Assembly attrib -r -h -s desktop.ini mkdir OriginalView move desktop.ini OriginalView attrib +s OriginalView attrib +r +h +s OriginalView/desktop.ini
Now, go to assembly folder. You will internal structure of GAC and plus one more folder named OriginalView. When you go in this folder, you will see original view of GAC.
By Modifying the Registry
The following steps will modify the registry. If you make any incorrect entry in registry, that can cause some serious problems. Sometimes you may need to install operating system again. Use registry editor at your own risk. I prefer, before you follow these steps, take a backup of registry.
We need to add a key in registry that will disable the abstract view of the GAC.
To open registry editor, Go to Run and type regedit. Locate following registry, in the registry editor.
HKEY_Local_Machine\Software\Microsoft\Fusion\

Right click on Fusion Folder and select New ->DWord Value.

Add a new Dword named “DisableCacheViewer” and set its value 1.

Now go to C:\Windows\Assembly folder and you will see folders in GAC.
By Uninstalling SHFusion.dll
Go to Visual Studio Command Prompt and fire this command to uninstall the SHFusion.dll
regsvr32 -u C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\shfusion.dll

Following message will appear.

Now go to C:\Windows\Assembly folder and you will see folders in GAC.
To get back to the previous state of view register the SHfusion.dll using the following command, fire this command on Visual Studio Command prompt.
regsvr32 C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\shfusion.dll

And you will see following message on the screen.

Now go to Assembly folder again and it will show the abstract view of GAC.
Using SUBST Command
Go to Windows DOS Prompt and type following command and press enter.
SUBST L: “C:\Windows\Assembly”

This command will create a virtual drive “L” and this drive will have the internal view of GAC, where C:\Windows\Assembly will have the abstract view of GAC. Kindly ensure that the drive name that you type in SUBST command, it must not exist in your system. Go to My Computer and you will see the Drive named “L:”.
Now to delete this drive, run this command on command prompt.
SUBST L: /D
This will delete the L: drive.
By all above these four techniques, you can see the internal structure of GAC. Via Internal structure you can copy the DLL and paste it at desired location.
Now, let’s see what every folder contains in GAC. Mainly there are 5 Folders.
The folder GAC, GAC_32, GAC_64 and GAC_MSIL contains non-native images of the DLLs. They all contain the MSIL that will be complied into native images and placed in NativeImage_Framework Version folder.
http://www.codeproject.com/KB/dotnet/demystifygac.aspx
http://blogs.msdn.com/junfeng/archive/2004/09/12/228635.aspx
During this article, I have showed you various techniques to show internal structure of GAC and one can easily copy the DLL from the GAC folder and can paste it at desired location. I hope that readers will learn something new.
Kindly post your comments regarding feedback for this article.
Thanks,
Virendra Dugar
Posted in .NET Framework | Tagged: .NET Framework, GAC | Leave a Comment »
Posted by Virendra Dugar on October 6, 2009
I have already posted an article on new release of AjaxControl ToolKit.
Ajax Control Toolkit is not new for every dotnet developer. A new version of the AJAX Control Toolkit is now available for download from the CodePlex website. This new version of the AJAX Control Toolkit contains two new controls:
SeaDragon Java Script Code (SJC) – The SJC control allows you SeaDragon scripts are used to display an image, and to zoom in and out of that image using mouse button keys without resizing the window. I saw the demo and it’s really cool control.
AsyncFileUpload – Finally, we have a control which uploads file asynchronously. This new control enables you to perform file uploads without doing a postback. The control displays a throbber image during upload and raises client and server events when the upload is complete. Check the live demo here.
In this article, we are going to take a look at AsyncFileUpload control.
Note: This control will only work with .NET 3.5 or higher version.
As we know, File Upload control of ASP.NET does not work with in update panel. If we want to place it in update panel, then also postback trigger is required to upload the file. This cool control allows you to upload the file in asynchronous manner. Below are few key points about this control:
But it also comes with certain disadvantages.
Besides, these disadvantages control looks good.
Now let’s go thru some of the properties of this control.
Some Available Properties


Available Events:
Available Methods:
Let’s create a new website and add reference of newly downloaded AjaxControl ToolKit dll. On default.aspx page, Place a script manager and register the ajax control toolkit dll.
Now let’s place the AsyncFileUpload control.
< cc1:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" OnClientUploadError="uploadError" OnClientUploadStarted="StartUpload" OnClientUploadComplete="UploadComplete" CompleteBackColor="Lime" UploaderStyle="Modern" ErrorBackColor="Red" ThrobberID="Throbber" onuploadedcomplete="AsyncFileUpload1_UploadedComplete" UploadingBackColor="#66CCFF" />
We can place this within update panel or outside the update panel. As you can see, I have set the most of the properties and events which I have already explained above. Let’s place the Throbber control to show in progress image. It is not compulsory to have ThrobberID. If it is set then it will display the content of the control.
< asp:Label ID="Throbber" runat="server" Style="display: none">;
<img src="Images/indicator.gif" align="absmiddle" alt="loading" />;
</asp:Label>
I have also placed a label on the page, which shows the status of the uploading. Value of this control get’s updated via Client Side function.
< asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;"> < /asp:Label>
Let’s place the JavaScript functions.
<script type="text/javascript" language="javascript">
function uploadError(sender,args)
{
document.getElementById('lblStatus').innerText = args.get_fileName(), "<span style='color:red;'>" + args.get_errorMessage() + "</span>";
}
function StartUpload(sender,args)
{
document.getElementById('lblStatus').innerText = 'Uploading Started.';
}
function UploadComplete(sender,args)
{
var filename = args.get_fileName();
var contentType = args.get_contentType();
var text = "Size of " + filename + " is " + args.get_length() + " bytes";
if (contentType.length > 0)
{
text += " and content type is '" + contentType + "'.";
}
document.getElementById('lblStatus').innerText = text;
}
</script>
The UploadComplete function displayes the file name, it’s size and content type on the screen.
Below is server side code of UploadedComplete event.
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
System.Threading.Thread.Sleep(5000);
if (AsyncFileUpload1.HasFile)
{
string strPath = MapPath("~/Uploads/") + Path.GetFileName(e.filename);
AsyncFileUpload1.SaveAs(strPath);
}
}
That’s it. We are good to go now. Now just run the application.
This is a cool control which some good user experience but as stated above I cannot find a way to clear the content of the control even if you refresh the page. Another thing that is quite annoying is as soon as you select any file, it starts uploading. Another lacking feature is it does not show the progress in percentages. Despite, few disadvantages, I found this control pretty useful. Hope to see some enhancement in this tool.
Enjoy..
Posted in Ajax Control Toolkit, ASP.NET | Tagged: Ajax Control Toolkit, ASP.NET | 3 Comments »
Posted by Virendra Dugar on October 6, 2009
Good news for every developer. A new version of the AJAX Control Toolkit is now available for download from the CodePlex website. This new version of the AJAX Control Toolkit contains two new controls:
This new release also includes fixes for over 20 bugs in existing AJAX Control Toolkit controls.
Enjoy..
Posted in Ajax Control Toolkit | Tagged: Ajax Control Toolkit | 1 Comment »
Posted by Virendra Dugar on September 18, 2009
This question is almost asked in every interview, if you have worked with both the language. There are syntax difference, keyword difference in both the language. But the interviewer is not looking for such answers. One need to explain the functional difference between both the languages.
Here are some key difference in C# and VB.NET other than syntax differences.
Hiding: – This is a C# Concept by which you can provide a new implementation for the base class member without overriding the member. You can hide a base class member in the derived class by using the keyword “new”. The method signature, access level and return type of the hidden member has to be same as the base class member.
Comparing the two:-
1) The access level, signature and the return type can only be changed when you are shadowing with VB.NET. Hiding and overriding demands these parameters as same.
2) The difference lies when you call the derived class object with a base class variable. In class of overriding although you assign a derived class object to base class variable it will call the derived class function. In case of shadowing or hiding the base class function will be called.
Dim y As Integer = 5 Dim z As Integer z = Add(y) //This will set both Y and Z to 6. z = Add((y)) //This will set Z to 6 but Value of Y will not be change, as we have included extra parenthese while calling.
The Add function:
Public Function Add(ByRef x As Integer) As Integer x = x + 1 Return x End Function
I know this is not a complete list, so if you know any other difference kindly post your comments.
Enjoy..
Posted in C#, VB.NET | Tagged: C#, VB.NET | 2 Comments »