Friday, April 18, 2008

Tips about using JavaScript in Asp.Net

1- One of the most annoying issues you may face while using JavaScript in an Asp.Net application is referencing a server control in a page that inherits from a Master page.
As an example, say we have an asp textbox server control and we want to get it’s text, if you’ve tried to do this using the document.getElementById(‘controlId’) function, you’d get the error message “object expected” or “object is null”; so why we get those errors while we are sure that the control’s ID and the JavaScript syntax are correct?!
Well, the server controls’ IDs are changed in runtime, and they are concatenated with a prefix which is their content place holder, which in our case it would be the content of the master page and you can be sure from this if you run any page and view it’s source HTML using IE, try to search for any server control’s ID, you will find that it’s completely different from the one in the aspx file, so you have two choices in order to reference these controls correctly:
  • First: you can view the HTML source code of each page and find the new generated IDs for your controls and place them in the JavaScript function:
    document.getElementById(‘id’);

    But this way is very poor and not flexible at all.
  • The Second one: is using the encoding techniques to get the new generated ID programmatically; any asp server control contains a property called ClientID which provide us with the new generated ID for the control at run time, but we want to get this ID in the JavaScript code; so all we’ve to do is doing that:
    var txtBox = document.getElementById(‘<%=txtName.ClientID%>’);

    The symbols: <%=%>means that you can write any C# code inside them, so this way is very easy and flexible for anybody.



2- You want to debug your JavaScript code and don’t know how?!! Here you are the solution:
All you have to do is placing all your JavaScript code in a separate .js file, so you’ll be able to insert breakpoints inside the JavaScript code, and then enabling JavaScript debugging from your Internet Explorer; here you are the steps:
1- From Tools menu choose Internet Options, then Advanced Tab.
2- Then under Browsing uncheck the disable script debugging (Internet Explorer) & (Other).
3- That’s all, insert your breakpoints into your JavaScript file, press F5 to Debug and enjoy.

Saturday, April 12, 2008

Colorful Microsoft windows forms Controls

Get bored from the static appearance of windows forms 2.0 controls?! What about adding some exciting features for them in order to enhance the UI of our applications!

In this tutorial I’ll show you how to create gradient colors as a background for those controls, let’s make our target is the Panel Control.
1- Create a new “Class Library” project from Microsoft Visual Studio 2005 and name it as GradientPanelLibrary.
2- Add a CustomControl item to the current solution and name it as GradientPanel.
3- Switch to the code of the GradientPanel class and change the inherited class to be Panel instead of Control.
4- Now let’s add some properties for the fancy panel control, we’ll need the following properties:

///
/// The gradient first color
///
 
private Color Color1;
public Color BackColor1
{
get { return Color1; }
set { Color1 = value; this.Invalidate(); }
}

///
/// The gradient second color
///

private Color Color2;
public Color BackColor2
{
get { return Color2; }
set { Color2 = value; this.Invalidate(); }
}
///
/// The gradient fill mode
///
private LinearGradientMode Mode;
public LinearGradientMode FillMode
{
get { return Mode; }
set { Mode = value; this.Invalidate(); }
}

5- All we’ve to do now is overriding the OnPaint method in order to draw the Panel with the gradient colors, Here’s the code:

if (this.ClientRectangle.Height == 0 || this.ClientRectangle.Width == 0) return;

//get the graphics object of the control
Graphics g = pe.Graphics;

//The drawing gradient brush
LinearGradientBrush brush = new LinearGradientBrush(this.ClientRectangle, BackColor1, BackColor2, FillMode);

//Fill the client area with the gradient brush using the control's graphics object
g.FillRectangle(brush, this.ClientRectangle);


Now we can build the solution in order to generate the dll for our fancy Panel, then add this generated dll to the ToolBox, and then you can drag the GradientPanel Control from the toolbox and drop it into any windows forms to enhance your UI.Note that you can apply this technique to any control, so you’ll have special controls that make your UI is the best one.