Saturday, October 13, 2012

In my earlier post I demonstrate how you can insert smiley images in richtextbox when a user types the corresponding emotion code.

Now let me show how you can easily do the same in asp.net with simple javascript code.
  • First of all download some smiley images and paste them in your website's root folder
  • Put a div element inside your aspx page with contentEditable property set to true and onkeyup="replacewithimg(this);"





  • In head section of your aspx page add the following javascript



Explaination:


  • txt & img are two Arrays which holds the emotion text and emotion image element source code respectively side by side


  • replacewithimg is a function which accept div as a parameter in which the client is typing. This function is called when user press and release a key. In this function I created a for loop which checks whether any emotion text is there in div or not, if it is there then the javascript's replace() function will replace it with corresponding img tag which is stored in img array and after replacing the text set div's innerHTML to var innHTML which contains the updated innerHTML.


[Note: regular.gif, tongue.gif and Sad.gif are the names of my smiley images, Please update them if you have different names]

Download Demo Website

Friday, October 12, 2012

In this tutorial m going to demonstrate how you can add the functionality in RichTextBox to automatically insert smiley faces for emotions symbols typed in the RichTextBox like for :-) =
I know you have seen such functionality in chat clients like g-talk, Facebook  yahoo messenger etc.

Believe me it's quite simple and interesting as compared to other complicated demos available on web.

OK let me start the step-by-step guide...

Step 1: Download some smiley faces [Download]


Step 2: Create a new windows form application project in visual studio


Step 3: Add a RichTextBox control to existing Form1


Step 4: Copy all the images which you have downloaded using "Step 1" and navigate to >> visual studio select Project>>SmileyDemo Properties...

There select Resources and paste all copied images on the right side pane.
[Note : SmileyDemo is the name of your project]



Step 6: Now open Code View of Form1 (Juss right click on form and select View Code)


Step 7: Now I'm going to create a Hashtable to hold the smiley symbol [like ":-)"] and smiley image side by side (a key-value relation) and don't forget to include using System.Collections;


Step 8: Create a function to add all elements to your Hashtable, keep symbols as keys and images as values in Hashtable.
Step 9: Now I'm going to create a function to check whether any of the symbol(which we have defined in Hashtable) is there in RichTextBox control or not. If yes then we have to replace that with the corresponding Image available in Hashtable.

[Note : IndexOf function will search our symbol(basically a string) in RichTextBox's Text and return the index number where it found.

Next we need to select the symbol using RichTextBox's Select() function with starting position of selection & lenght of characters which will be selected.
ClipBoard.SetImage() function will copy the desired image
"(Image)emotions[emote]" is nothing but to get the image object corresponding to "emote" key from our Hashtable emotions and we need to typecast it to Image format.
Now what - we have some selected text in our RichTextBox, all we need to do is juss call the Paste() function of RichTextBox which will paste the copied image at the right place.]

Step 10: Now on Form1's load event call the function which we have created in "Step 8"


Step 11: Double click on RichTextBox to generate TextChanged event handler of our RichTextBox control and call the function which we have created in "Step 9".


That's it...Compile and run and see the magic 


Download Demo

Download Source Code

Wednesday, October 10, 2012

This is what I faced a small problem when using GridView.
I have a LinkButton element in the gridview and my goal is when user clicks on the button, I need to raise the grid view command event and in that event, I need to get the row values. But, the questions is how to get the current row in the grid view command event?  Below is the solution for it.
GridViewRow row = ((LinkButton)e.CommandSource).NamingContainer as GridViewRow;
Note: LinkButton class I used in the above code is assuming that the command event raised when clicked on the LinkButton control. If your requirement is not linkbutton then please place the corresponding control name.Most of the times and most of the developers never use the property available to each and every object named NamingContainer. But, there are lot of advantages with this property. Especially when we write and render controls to page dynamically then this property will help a lot. And there are many properties which will help us to solve so many problems. Use the intellisense and try to know most of the properties available for a .NET control. Hope this will help you and you got what you need.

Monday, October 8, 2012

This the question asked by so many people around me and I also faced issues couple of times of my early stages of learning.This is simple but how to get value and names as a collection and bind to drop down list is a bit difficult. 

Below is the simple logic to read all enums and create a list item and bind to drop down list. 
[Note: There are many ways to get this done, but I believe below is the best way]
Let's say I have a DropDownList in my aspx page, and an enumeration (List of User types for example). I need to bind enum values to my dropdownlist.
Here is the solution
Note : In ToString("d")  d is a format parameter which return an integer when used with enum type;
In ToString("f")  f is also a format parameter which return flag when used with enum type

Hope it help someone ..... :-)

Download Demo website