Abdulla AbdelHaq Blog

Microsoft Parallel Computing Session - JorDev UserGroup

2012-01-19T00:24:00Z

Hi,

in 26th October 2011, I gave a session about 'Building Multicore application with Microsoft Parallel Computing". how to convert our normal sequential code to be parallized code and run into different multicore which makes our code run faster.

Part 1

Part 2

Part 3

Part 4

Part 5

~ Abdulla Abdelhaq

How To : Create Custom Paging Grid Using JSON + JQuery + ASP.NET

2011-12-29T09:28:00Z

In this article, I am going to create a light weight grid that display data from DB in a custom paging way just like Facebook & twitter without postback using JSON & JQuery.

Let's take this case, you have a comments table that contains large number of records and want to display them in a web page. before start typing the code, we need to take the below points into considerations:

Since we have large number of records and cannot be retrieved all in the page load, we are going to create custom paging stored procedure that retrieved small chunks of data page per page.
The page should be light and fast, so we need to kill the ASP.NET Evil(the viewstate) by using Jquery to draw the html table & JSON to Ajaxify the page and make it faster and light than using the regular Ajax Code (JSON is an Object Notation String based where the regualre Ajax is an XML based which makes it faster, lighter and easy to deal with).

The DataBase Part

Using SQL Server 2008, create a new table name it [CommentsTable] as you can see in the below figure:

Create New Stored Procedure and name it [GetComments_Paging] and write the below code :

CREATE PROCEDURE [dbo].[GetComments_Paging]

  @PageNum INT,
  @RowCount INT

AS
BEGIN

SELECT [t1].*
FROM (SELECT ROW_NUMBER() OVER (ORDER BY [t0].[CommentId]) AS [ROW_NUMBER],[t0].CommentId,
    [t0].CommentTitle,[t0].CreatedOn,[t0].UserName,[t0].CommentBody
     FROM CommentsTable AS [t0]) AS [t1] WHERE [t1].[ROW_NUMBER]
     BETWEEN @PageNum AND @PageNum + @RowCount ORDER BY [t1].[ROW_NUMBER]

END

As you noticed, the stored procedure takes two input parametrs (@PageNum to indicate which page index you want to retrieve) and (@RowCount to specify how many records you want to retrieve) .

The WebSerivce Part

We need to create a class (clsComments) to be the container of the comments data and to use it with the JSON code. as below

Then we will create a webservice called (CommentService.asmx) and as below:

It is important to know that we need to add [System.Web.Script.Services.ScriptService] attribute typically above the class name to allow this Web Service to be called from Javascript.

The ASP.NET Part

add the below HTML code

Now we will let JSON call our CommentService.asmx and Jquery will bind the results inside ResultsTable Div.

and test whether the page is doing a post back or not, add the below code behind

public partial class _Default : System.Web.UI.Page
{
protected const int rowsCount = 2;

    protected void Page_Load(object sender, EventArgs e)
    {
        lblDate.Text = DateTime.Now.ToLongTimeString();

    }
}

Now run the page and click on More Comments button and notice how the comments get displayed page per page without postback as below

hope someone will found it useful.

~ Abdulla AbdelHaq

How to : Create Custom Ajax Extender Control

2010-11-20T23:52:00Z

I have already published this article before on aspalliance.com website and I received a good feedback and it is now listed on the most popular articles on aspalliance, so I would like to publish it here again on my blog.

Ok then,in this article, I will demonstrates how to create a new Ajax extender from scratch, which expands the properties of ASP.NET controls, by adding custom Tooltip behavior that targets all types of web controls dragged to your page. first I am going to provide a short overview of Ajax extender controls and then delves deep into the creation of a new Ajax extender with the help of Visual Studio. After that, I'll provide a detailed analysis of the code along with relevant screenshots. At the end of the article, we will examine how to make use of the created extender control.



Brief explanation about creating a new Ajax extender
What is Ajax extender control? Ajax extender control is a control whose purpose is to add a behavior to the existing ASP.NET controls. These behaviors usually are client side behaviors that will extend the functionality of an existing ASP.NET control. I mention the sentence "an existing ASP.NET control" twice, to ensure the concept of Ajax Extender controls. The difference between Ajax extender control and custom server controls is that the custom server controls allow you to create a new server control that will work separately without extending any other controls. One of the interesting features that Ajax extenders offer is calling web services; we can hit the server and get some data from it without making the end-user notice. For example, the AutoComplete Extender Control uses the web service for filtering the typed text from Database without any flickers. You can find a lot of resources and articles that talk about Ajax extenders, especially here in aspalliance.com. ASP.NET Ajax controls project To create a new Ajax extender, open your Visual Studio, and then create a new ASP.NET AJAX Control Project, as illustrated in Figure1. Figure1 By default, this will create three files: · <your extender name>Behavior.js file: an embedded JavaScript file, where we will locate our client-side logic. · <your extender name>Designer.vb file: a class that enables design-time functionality. You should not need to modify it. · <your extender name>Extender.vb file: a server-side control class that will manage the creation of your extender, and allow you to set the properties at design-time. It also defines the properties that can be set on your extender. These properties are accessible via code and at design time and match properties defined in the Behavior.js file. Ajax Library Shortcuts There are several shortcuts methods for writing client-side functionality, such as: · $addhandler: enables you to assign a handler function to an event · $clearhandlers: clears all the handlers that you have created · $removehandler: removes a specific event handler · $get: a shortcut for document.getElementById · $find: allows you to access the class object, and use the methods and properties Ajax Extender Logic Ajax extender logic is quite simple; the following steps explain this process with code samples. Create a property in the Extender.vb class, similar to what I did in Listing 1. Listing 1 <ExtenderControlProperty()> _ <DefaultValue("")> _ Public Property MyProperty() As String Get Return GetPropertyValue("MyProperty", "") End Get Set(ByVal value As String) SetPropertyValue("MyProperty", value) End Set End Property Declare a property variable at initializeBase function in the Behavior JavaScript file, as illustrated in Listing 2. Listing 2 this._myProperty = null; //Property Variable Write get/set property for the above variable, as in Listing 3, and remember it is case sensitive. Listing 3 get_MyProperty: function() { return this._myProperty; } , set_MyProperty: function(value) { this._myProperty = value; } , Create a JavaScript function, which will be the container of your client-side logic. Listing 4 _myFunction : function(e) { alert(this._myProperty); } Finally, add an event handler using the Ajax Library Shortcut $addhandler inside the initializefunction, as you can see in Listing 5. We added an event handler for the mouse over event, but note that we have removed the "on" prefix word and that is the role. We have created a delegate function that will be mapped to the _myFunction function, which will be fired when the mouse is going to be over the extended control. Listing 5 $addHandler(this.get_element(), 'mouseover', Function.createDelegate(this,this._myFunction)); Build the project, and that is it; you have created a simple Ajax Extender control.
Tooltip Extender Variables & Properties
Let us get back now for our new tool tip extender. We want to make this Tooltip look different than the regular Tooltip; i.e. page developer would customize the tool tip background color, change font name/color, and it will be better if we can delay the disappearing time of the tool tip. Look at Figure 2 which illustrates what the extender will look like after finishing this article. Figure 2 Now let us start building the Tool tip extender. As I mentioned, the ASP.NET Ajax Control Project Template will automatically create three files: (MyExtenderToolTipBehavior.js,MyExtenderToolTipDesigner.vb, and MyExtenderToolTipExtender.vb). Listing 6: Tooltip Extender Class <Designer(GetType(MyExtenderToolTipDesigner))> _ <TargetControlType(GetType(WebControl))> _ Public Class MyExtenderToolTipExtender Inherits ExtenderControlBase <ExtenderControlProperty()> _ <DefaultValue("")> _ Public Property ToolTipText() As String Get Return GetPropertyValue("ToolTipText", "") End Get Set(ByVal value As String) SetPropertyValue("ToolTipText", value) End Set End Property <ExtenderControlProperty()> _ <DefaultValue(200)> _ Public Property ToolTipWidth() As System.Web.UI.WebControls.Unit Get Return GetPropertyValue("ToolTipWidth", Unit.Pixel(200)) End Get Set(ByVal value As System.Web.UI.WebControls.Unit) SetPropertyValue("ToolTipWidth", value) End Set End Property <ExtenderControlProperty()> _ <DefaultValue("#5E8DD0")> _ Public Property ToolTipBgColor() As String Get Return GetPropertyValue("ToolTipBgColor", "#5E8DD0") End Get Set(ByVal value As String) SetPropertyValue("ToolTipBgColor", value) End Set End Property <ExtenderControlProperty()> _ <DefaultValue("Verdana")> _ Public Property ToolTipFontName() As String Get Return GetPropertyValue("ToolTipFontName", "Verdana") End Get Set(ByVal value As String) SetPropertyValue("ToolTipFontName", value) End Set End Property <ExtenderControlProperty()> _ <DefaultValue("White")> _ Public Property ToolTipFontColor() As String Get Return GetPropertyValue("ToolTipFontColor", "White") End Get Set(ByVal value As String) SetPropertyValue("ToolTipFontColor", value) End Set End Property <ExtenderControlProperty()> _ <DefaultValue(250)> _ Public Property DisappearDelay() As Integer Get Return GetPropertyValue("DisappearDelay", 250) End Get Set(ByVal value As Integer) SetPropertyValue("DisappearDelay", value) End Set End Property End Class Listing 6 is the Tool tip extender class; you can see many properties and attributes in there. Since it is a tool tip at the end, it should be targeting all web controls types. Therefore, theTargetControlType(GetType(WebControl) attribute will be used to allow our extender to target any web control in the page. This attribute will insert all the extender properties as new collection properties in the target control. The DisappearDelay property will delay the disappearing time of the tool tip in milliseconds, the default value attribute is set to be 250 milliseconds. Now we need to set the position of the tool tip to be an absolute position, the z-index should be equal to 100, and that will occur in the embedded Style Sheet file, as you can see in Listing 7. Listing 7 .tooltipdiv{ position:absolute; padding: 2px; border:1px solid black; font-size:12px; font-weight:normal; line-height:18px; z-index:100; } You should add the style sheet file to the extender web resources assembly, as in Listing 8. Listing 8 <Assembly: System.Web.UI.WebResource("MyExtenderToolTip.MyExtenderToolTipCss.css", "text/css")> In addition, we need to add it to the client cascade style sheet resources, as you see in Listing 9. Listing 9 <ClientCssResource("MyExtenderToolTip.MyExtenderToolTipCss.css")> The client-side logic will be located in the behavior JavaScript file, discussed in the next section.
Behavior JavaScript File
The major goal is to extend the behavior of the ASP.NET control, so the Behavoir.js file will play a key role in that process. As I explained in "Brief explanation about creating a new Ajax extender" section, we should create a property variable in the initializeBase function for each public property in the Extender Class, as you see in Listing 10. Listing 10 this._toolTipText = ''; this._toolTipWidth = '200px'; this._toolTipBgColor = '#5E8DD0'; this._toolTipFontName='Verdana'; this._toolTipFontColor='White'; this._disappearDelay=250; If you recall, we need to write a get/set client-side property for each variable, which is shown in Listing 11. Listing 11 get_ToolTipText: function() { return this._toolTipText; } , set_ToolTipText: function(value) { this._toolTipText = value; } , set_ToolTipWidth: function(value) { this._toolTipWidth = value; } , get_ToolTipWidth: function() { return this._toolTipWidth; } , set_ToolTipBgColor: function(value) { this._toolTipBgColor = value; } , get_ToolTipBgColor: function() { return this._toolTipBgColor; } , set_ToolTipFontName: function(value) { this._toolTipFontName = value; } , get_ToolTipFontName: function() { return this._toolTipFontName; } , set_ToolTipFontColor: function(value) { this._toolTipFontColor = value; } , get_ToolTipFontColor: function() { return this._toolTipFontColor; } , set_DisappearDelay: function(value) { this._disappearDelay = value; } , get_DisappearDelay: function() { return this._toolTipFontColor; } , Now lets do the trick, as you can see in Listing 12, we have created a new HTML Div element in initialize function, which will be the tool tip. Listing 12 var newDiv = document.createElement('div'); newDiv.id = this.get_element().id + '_fixedtipdiv'; newDiv.style.visibility='hidden'; newDiv.style.width=this._toolTipWidth; newDiv.style.backgroundColor=this._toolTipBgColor; newDiv.style.fontFamily=this._toolTipFontName; newDiv.style.color=this._toolTipFontColor; newDiv.className='tooltipdiv'; document.body.appendChild(newDiv); We will add an event handler when the mouse is over and out of the content. These handlers will be located at the initialize function, as you see in Listing 13. Note that I have removed the "On" prefix word from the event name. If you download the source code, you will see the _fixedtooltip function, and the _delayhidetipfunction in more details; these two JavaScript functions are responsible of show/hide the tool tip.In addition, many JavaScript functions are responsible for creating the client-side behavior for the extender. Listing 13 $addHandler(this.get_element(), 'mouseover',Function.createDelegate(this, this._fixedtooltip)); $addHandler(this.get_element(), 'mouseout', Function.createDelegate(this,this._delayhidetip)); Now let us test our new extender.
Using the Extender
To add the extender in your Toolbox, follow the subsequent steps. Right click on the toolbox window then choose "Add Tab." Type the name you want for the new tab then right click over it, and click "Choose Items." Click on Browse button in the ".NET Framework Components" tab, go to the tool tip extender project, open the bin folder, and choose MyExtenderToolTip.dll. The result is shown Figure 3. Figure 3 That is it, all you need now is to drag the extender, and target the web control over which you want to display the custom tool tip. As you see in Figure 4 and Figure 5, I dragged two tool tip extenders, one for the textbox and the other for the button. Moreover, I customized the Tooltip to match my requirements. Figure 4 Figure 5 Figure 6 shows you how the extender properties are added as new collection properties in the Textbox control. Figure 6


Conclusion
The article covered the concept of the Ajax extenders, and how you can create a new extender. In addition, we have created a new custom Tooltip Ajax extender from scratch. It is you turn now to create your own Ajax extender. I hope you found this informative.

~ Abdulla AbdelHaq

Introducing .NET 4.0 & ASP.NET 4.0 [ JorDev ]

2010-03-05T16:21:00Z

This is the Session that I did via JorDev (Jordan .NET User Group), in Princess Sumaya University for Technology - Loaui Shammout Auditorium Feb 25, 2010

1. Title : Introducing .NET 4.0 & ASP.NET 4.0

2. Topics :

Dynamic Languages Run time (DLR)

CLR Improvement : The ARM Feature

Code Contracts

Parallel Computing

.NET Co- Evolution

VS 2010 new Features for ASP.NET Developers

ASP.NET SEO Improvements

ASP.NET Cleaner HTML

ASP.NET Core Improvement

PEX - Let Me Fix Your Code [JorDev User Group]

2009-11-12T19:14:00Z

Hello .NET Heroes,

This is my session on Microsoft PEX that I gave on JorDev User Group (Jordan .NET User Group), and for those who do not know What JorDev is? it is simply one of the biggest .NET User Group in Middle East.

Location : MIC (Microsoft Innovation Center)

Time : 6:25PM Wednesday, October 28th 2009

I was wondered before if there a kind of tool that check my code in few clicks, just like the spell checker of our word documents!

PEX is a Microsoft Research Project that help you to understand the behavior of .NET code, debugging issue and generating test cases for free.

You can view that playlist of the session from JorDev You Tube Channel

PEX Session on JorDev Channel

Or you can view it right away from the below videos.

The session was in Arabic, I am planing to translate it into English, but PEX team said that keep it in Arabic because it will target the Arabic speakers.

The session also posted on Microsoft Reseach - PEX home page http://research.microsoft.com/en-us/projects/pex/

You can download the presentation slides from here , or from the attachment link at the bottom of the article.

Note : Part1 is a brief introduction on Unit Testing, so if you want to see PEX directly, you can start from Part2

Part 1

Part 2

Part 3

Part 4

Part 5

I Hope Some One Will Find It Use Full.

~ Abdulla AbdelHaq

Jordan Remix the Technology.

2009-10-31T21:34:00Z

Today, the IT people in Jordan enjoyed in event called Jordan Remix !

Remix word comes from Remixing the technology together; .NET 2010, SharePoint 2010, Windows 7, Office 2010 and Windows Server 2008 R2. All these technologies were in one event, it really was a great day for me, remixing technology.

More than 400 people has attend the sessions at the hall, and more than 1500 people have watched it live on Jordan-Remix.com

All sessions were recorded, and I would like to share them with you.

http://www.jordan-remix.com

Enjoy :)

~ Abdulla AbdelHaq

How To Embedded StyleSheet File with Custom Control.

2009-09-26T08:52:00Z

How to embedded StyleSheet file with custom control? Question has been opened many time on ASP.NET forum.

So in this article, I will try to demonstrate how to achieve this task.

In General

In general, if you want to embedded any thing with custom control, you need first to make its "Build Action" property to be "Embedded Resource", and then you need to add to the custom control assemblies using the <Assembly> attribute typically above class name, and finally you need to register in the page so it can be rendered.

I will illustrate all these things in details through the article.

Step One: make it as Embedded Resource

After you added the StyleSheet file to your Custom Control Class Library project, first thing you need to do is to make build action property for the stylesheet file as embedded resource, otherwise your page will not be able to see the stylesheet file.

To do this, from the VS do a right click on the stylesheet file, and click on Properties, and then change the "Build Action" property to be "Embedded Resource".

Step Two: Add it to the Custom Controls Assemblies

Second thing you need to do is to register the Css file to the custom control assemblies by adding the below code typically above class name

[assembly: WebResource("YourProjectName.StyleSheetFileName.css", "text/css")]

namespace YourNameSpace

{

public class MyCustomControl : CompositeControl

{

//Custom Control Rest Code

Step Three: Register Css File on the Page

Finally, we have to tell the Page that our custom control has Css file needed to be registered when the final HTML is generated for that page. So we need to write a bit of code in the OnInit method.

protected override void OnInit(EventArgs e)

{

base.OnInit(e);

string css = "<link href=\"" + Page.ClientScript.GetWebResourceUrl(this.GetType(),

"YourProjectName.CssFileName.css") + "\" type=\"text/css\" rel=\"stylesheet\" />";

Page.ClientScript.RegisterClientScriptBlock(this.GetType, "cssFile", css, false);

}

And that's it, you can now use the CSS StyleSheet file within your Custom Control.

I hope some one will found this very helpful.

~ Abdulla AbdelHaq

How to fix this .. The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

2009-09-16T14:25:00Z

Sometimes when you write inline code inside Javascript tag or inside style sheet tag within the header of the page just like code 1, the yellow error page will explode in your face telling you that The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Code 1

<%@ Page Language="VB" AutoEventWireup="false"

CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head >

<title>Inline Code inside JavaScript</title>

function fnTest()

{

var txt = document.getElementById("<%= TextBox1.ClientID %>")

alert(txt.value);

}

</script>

</head>

<body>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</form>

</body>

</html>

The weird thing is that the error is not occurred each time! I mean if you tried to write the same code in another page it will work and the error will disappear !!

I searched on the Net to find an answer and to know more about this weird thing, and I found a nice blog that talked about this issue

http://www.west-wind.com/weblog/posts/5758.aspx

He posts a solution for the problem, but the funny thing is that he also did not know the main reason for the error. and I found no one know the main reason!

I tried another solution and it worked for me. All I did is I moved the JavaScript tag to the bottom of the page, typically above the close form tag, and the error is gone!

Solution 1

<%@ Page Language="VB" AutoEventWireup="false"

CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head >

<title>Inline Code inside JavaScript</title>

</head>

<body>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

function fnTest()

{

var txt = document.getElementById("<%= TextBox1.ClientID %>")

alert(txt.value);

}

</script>

</form>

</body>

</html>

Or you can play around this by registering the JavaScript code from code behind.

Solution 2

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim strScript As New StringBuilder

strScript.Append("function fnTest()")

strScript.Append("{")

strScript.Append("var txt = document.getElementById('")

strScript.Append(Me.TextBox1.ClientID)

strScript.Append("');")

strScript.Append("alert(txt.value);")

strScript.Append("}")

Page.ClientScript.RegisterClientScriptBlock(Me.GetType, "MyScript", strScript.ToString, True)

End Sub

I really still do not know the error main reason, if anybody know about this then please write it as comment.

I hope someone will found this very helpful.

~ Abdulla AbdelHaq

RadioButton inside GridView, How to get it work as normal.

2009-08-11T06:47:00Z

As we all know, RadioButton control used in a situation when you want end-users to select only one option at a time from group of options.

Did you tried before to drag a RadioButton control inside a Gridivew templatefield, and then you attempt to select these RadioButtons , you will notice that the behavior of RadioButton control will be changed and it will work just like the behavior of checkbox control! the user will be able to select more than one radiobutton in the grid!

O.k you can use html radiobutton element instead of server radiobutton control in the templatefield, this will do the trick and the behavior will get back again, but what if you want to do some event in codebeind and collect the selected Radiobutton?! this time you need to add the run at server attribute to the html element to be able to see it in the codebehind, in that case, the behavoir will be changed again and the user can select more than one option from the radio buttons.

So what is the solution for that ?

In simplest scenario, when the situation is only radio button and text beside it, you can use the RadioButtonList control instead, but if the form gets to be more complex and you need to display other controls beside the radiobutton, then (gridview,repeater,datalist) should be your choice.

the below code will help you to accomplish that.

function fnCheckUnCheck(objId)

{

var grd = document.getElementById("<%= GridView1.ClientID %>");

//Collect A

var rdoArray = grd.getElementsByTagName("input");

for(i=0;i<=rdoArray.length-1;i++)

{

if(rdoArray[i].type == 'radio')

{

if(rdoArray[i].id != objId)

{

rdoArray[i].checked = false;

}

</script>

<asp:GridView ID="GridView1" runat="server"

AutoGenerateColumns="false" >

<asp:TemplateField HeaderText="Select/UnSelect">

<input id="grdRdo" name="grdRdo" type="radio" runat="server"

onclick="fnCheckUnCheck(this.id);" />

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField DataField="User_Name" HeaderText="Name" />

<asp:BoundField DataField="User_Department" HeaderText="Dep" />

</Columns>

</asp:GridView>

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)

For Each grdRow As GridViewRow In GridView1.Rows

Dim htmlRdo As New HtmlInputRadioButton

htmlRdo = DirectCast(grdRow.FindControl("grdRdo"), HtmlInputRadioButton)

If htmlRdo.Checked Then

' Do Something

Else

'Do something else

End If

End Sub

I hope someone will found this very helpful :)

~ Abdulla AbdelHaq

Displaying Arabic Number.

2009-06-27T11:47:00Z

Well, most applications that I worked with was multilingual that supports English UI and Arabic UI.

And one of the major issue that we have faced is displaying Arabic numbers without the need of changing the regional settings of the PC.

So the code below will help you to display Arabic number without changing any regional settings.

Code 1: the HTML code:

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<br />

<asp:Label ID="Label1" runat="server"></asp:Label>

<br />

<asp:Button ID="Button1" runat="server" Text="Convert to Arabic" />

</form>

Code 2: Code Behind

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

'Call Function

Me.Label1.Text = "Arabic Number : <b>" & TranslateNumerals(Me.TextBox1.Text.Trim) & "</b>"

End Sub

Public Shared Function TranslateNumerals(ByVal sIn As String) As String

Dim enc As New System.Text.UTF8Encoding

Dim utf8Decoder As System.Text.Decoder

utf8Decoder = enc.GetDecoder

Dim sTranslated = New System.Text.StringBuilder

Dim cTransChar(1) As Char

Dim bytes() As Byte = {217, 160}

' Start Converting characters into Arabic mode.

Dim aChars() As Char = sIn.ToCharArray

For Each c As Char In aChars

If Char.IsDigit(c) Then

bytes(1) = 160 + CInt(Char.GetNumericValue(c))

utf8Decoder.GetChars(bytes, 0, 2, cTransChar, 0)

sTranslated.Append(cTransChar(0))

Else

sTranslated.Append(c)

End If

TranslateNumerals = sTranslated.ToString

End Function

After you run the page, enter some English number and then click "Convert to Arabic" button to display the entered number in Arabic number mode.

Figure 1: Convert English Number into Arabic Number

I hope some one will find this very helpful

~ Abdulla AbdelHaq

Adding ToolTip for each List Item.

2009-06-06T19:43:00Z

In Some cases, you have a restricted design that forces you to place a DropDownList control inside a "td" or "div" element, which has a fixed width. if that DropDownList contains long pieces of text then the user will not be able to read the whole text as you can see in Figure1.

Figure 1

The best solution to overcome this problem is to add a ToolTip for the item to display the whole text. As we know the regular DropDownList does not support that which is the main goal of this post.

Lest us say that we have a DropDownList that contains three list items.

Code 1

<asp:DropDownList ID="DropDownList1" runat="server" Width="119px">
  <asp:ListItem Value="1">Technical Department</asp:ListItem>
  <asp:ListItem Value="2">Production Department</asp:ListItem>
  <asp:ListItem Value="3">HR Department</asp:ListItem>
</asp:DropDownList>

As I said, the regular DropDownList does not support a ToolTip for each list item, so we will add a new attribute for each list item which is the "title" attribute.

Code 2

foreach (ListItem _listItem in this.DropDownList1.Items)

{ 

  _listItem.Attributes.Add("title", _listItem.Text); 

}

As you can see in the above code, we wrote a foreach loop to walk through the DropDownList item-by-item to add the title attribtue.

You can enter any text to represent the ToolTip for the item as description; here in our example I am using the list item text to be its ToolTip.

We need to add a title attribute for the selected item too, as shown in below code.

Code 3

DropDownList1.Attributes.Add("onmouseover", _

 "this.title=this.options[this.selectedIndex].title");

if you view your code in a browser, right click on the page and choose view source, take a look at the HTML generated element for our DropDownList, in Code 4, note that a new title attribute is added for each item in the list.

Code 4

<select name="DropDownList1" id="DropDownList1"
onmouseover="this.title=this.options[this.selectedIndex].title"
style="width:119px;">
<option value="1" title="Technical Department">Technical Department</option>
<option value="2" title="Production Department">Production Department</option>
<option value="3" title="HR Department">HR Department</option>
</select>

Figure 2

The above figure shows you how our new tooltip works when the mouse goes over the list item.

Conclusion

in this article, we have added a new tooltip attribute for each item in the DropDownList which will help the users to read the whole text. I hope you found this useful and informative. If you have any questions, please write your comments below.

~ Abdulla AbdelHaq

VS Debug Problem with IE8

2009-05-31T23:23:00Z

Since this is my first post on Weblogs, I decide to write about a problem that has been opened frequently on ASP.NET official forum which is VS debugger crashes with IE8.

I had answered the same problem 4 times, so I hope that some one will found this post very helpful if he is facing the same problem.

How VS debugger could be crashed with IE8?

If you opened multiple instances of IE8 and you attempt to debug your project, you mostly will have the issue where VS debugger just stops and ignores your break points!

Why was that?

Well, IE 8 has a feature called Loosely-Coupled Internet Explorer (LCIE) which results in IE running across multiple processes.
http://www.microsoft.com/windows/internet-explorer/beta/readiness/developers-existing.aspx#lcie

Older versions of the Visual Studio Debugger get confused by this and cannot figure out how to attach to the correct process.

To overcome this issue, you need to disable the process growth feature of LCIE by follow the below steps:

1) Open RegEdit
2) Browse to HKEY_LOCALMACHINE -> SOFTWARE -> Microsoft -> Internet Explorer -> Main
3) Add a dword under this key called TabProcGrowth
4) Set TabProcGrowth to 0

If you run into the same problem on Vista or newer, you will also need to turn off protected mode.

And then go a head and start debugging your code :)

~ Abdulla AbdelHaq