Thursday, November 15, 2007
$get and $find ASP.NET AJAX Functions
Absolutely useful! Here is a great explanation in detail about them in Matt Berseth' Blog.
Tuesday, November 13, 2007
Buttons Hover Effect With Javacript
I have a lot of pages that have buttons and I wanted to have mouse over effect without setting onmouseover and onmouseout in the html source. The best, of course, would be to use css style like a:hover, but I don't think this is going to work with older browsers. So, I used dynamically attaching to events for all buttons that have the same css class - 'inputButton' for example. I have two functions overBtn and outBtn that change the className of the button to 'inputButtonHover' on mouseover and back to 'inputButton' on mouseout. Here is the code:
<script type="text/javascript">
function overBtn( e )
{
var target = getTarget( e );
target.className = 'inputButtonHover';
}
function outBtn( e )
{
var target = getTarget( e );
target.className = 'inputButton';
}
function getTarget( e )
{
if ( window.event )
{
target = window.event.srcElement;
}
else if ( e )
{
target = e.target;
}
return target;
}
var buttons = document.getElementsByTagName( 'input' );
if( typeof window.addEventListener != 'undefined' )
{
//.. gecko, safari, konqueror and standard
window.addEventListener( 'load', MouseOverEffect, false );
}
else if( typeof document.addEventListener != 'undefined' )
{
//.. opera 7
document.addEventListener( 'load', MouseOverEffect, false );
}
else if( typeof window.attachEvent != 'undefined' )
{
//.. win/ie
window.attachEvent( 'onload', MouseOverEffect );
}
function MouseOverEffect()
{
for ( var i = 0; i < buttons.length; i++ )
{
if( ( ( buttons[i].type == 'submit' ) ( buttons[i].type == 'button' ) ) && ( buttons[i].className == 'inputButton' ) )
{
if ( buttons[i].addEventListener )
{
buttons[i].addEventListener( "mouseover", overBtn, false );
buttons[i].addEventListener( "mouseout", outBtn, false );
}
else if ( buttons[i].attachEvent )
{
buttons[i].attachEvent( "onmouseover", overBtn );
buttons[i].attachEvent( "onmouseout", outBtn );
}
else
{
buttons[i].onmouseover = overBtn;
buttons[i].onmouseout = outBtn;
}
}
}
}
</script>
<script type="text/javascript">
function overBtn( e )
{
var target = getTarget( e );
target.className = 'inputButtonHover';
}
function outBtn( e )
{
var target = getTarget( e );
target.className = 'inputButton';
}
function getTarget( e )
{
if ( window.event )
{
target = window.event.srcElement;
}
else if ( e )
{
target = e.target;
}
return target;
}
var buttons = document.getElementsByTagName( 'input' );
if( typeof window.addEventListener != 'undefined' )
{
//.. gecko, safari, konqueror and standard
window.addEventListener( 'load', MouseOverEffect, false );
}
else if( typeof document.addEventListener != 'undefined' )
{
//.. opera 7
document.addEventListener( 'load', MouseOverEffect, false );
}
else if( typeof window.attachEvent != 'undefined' )
{
//.. win/ie
window.attachEvent( 'onload', MouseOverEffect );
}
function MouseOverEffect()
{
for ( var i = 0; i < buttons.length; i++ )
{
if( ( ( buttons[i].type == 'submit' ) ( buttons[i].type == 'button' ) ) && ( buttons[i].className == 'inputButton' ) )
{
if ( buttons[i].addEventListener )
{
buttons[i].addEventListener( "mouseover", overBtn, false );
buttons[i].addEventListener( "mouseout", outBtn, false );
}
else if ( buttons[i].attachEvent )
{
buttons[i].attachEvent( "onmouseover", overBtn );
buttons[i].attachEvent( "onmouseout", outBtn );
}
else
{
buttons[i].onmouseover = overBtn;
buttons[i].onmouseout = outBtn;
}
}
}
}
</script>
Sunday, November 11, 2007
PopupControlExtender To Show On MouseOver
This is an example of how to do it. Set unique BehaviorID to PopupControlExtender and call showPopup/hidePopup with it:
<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" BehaviorID="pce" ............... />
<asp:Panel onMouseOver="$find('pce').showPopup();" onMouseOut="$find('pce').hidePopup();" />
NOTE: If you use it in a user control that could be used more than once on a page - give unique BehaviorID to each one.
<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" BehaviorID="pce" ............... />
<asp:Panel onMouseOver="$find('pce').showPopup();" onMouseOut="$find('pce').hidePopup();" />
NOTE: If you use it in a user control that could be used more than once on a page - give unique BehaviorID to each one.
Friday, November 9, 2007
Functional User Control Without Codebehind class
I needed a user control without codebehind. This is because if you use codebehind, this source compiles with the dll of the web assemly and changes the inherits page directive. But I needed a user control that does not compile nieghter in the main assebly, nor in its own.
The important here is to set ClassName directive. So that's how I got it:
<%@ Control Language="C#" AutoEventWireup="true" ClassName="MyUserControl" %>
<script runat="server" type="text/C#">
public MyUserControl( string sProperty )
{
m_sProperty = sProperty;
}
private string m_sProperty;
public string Property
{
get
{
return m_sProperty;
}
set
{
m_sProperty = value;
}
}
</script>
<%= m_sProperty%>
There are two ways to use it:
1) In aspx file should be something like that:
<%@ Register TagPrefix="custom" TagName="MyUserControl" Src="~/MyUserControl.ascx" %>
...
<custom:MyUserControl runat="server" id="MyUserControl1" Property="this is a test (1)" />
2) In aspx.cs file (codebehind) should be something like that:
ASP.MyUserControl MyUserControl2 = new ASP.MyUserControl( "this is a test (2)" );
Controls.Add( MyUserControl2 );
The important here is to set ClassName directive. So that's how I got it:
<%@ Control Language="C#" AutoEventWireup="true" ClassName="MyUserControl" %>
<script runat="server" type="text/C#">
public MyUserControl( string sProperty )
{
m_sProperty = sProperty;
}
private string m_sProperty;
public string Property
{
get
{
return m_sProperty;
}
set
{
m_sProperty = value;
}
}
</script>
<%= m_sProperty%>
There are two ways to use it:
1) In aspx file should be something like that:
<%@ Register TagPrefix="custom" TagName="MyUserControl" Src="~/MyUserControl.ascx" %>
...
<custom:MyUserControl runat="server" id="MyUserControl1" Property="this is a test (1)" />
2) In aspx.cs file (codebehind) should be something like that:
ASP.MyUserControl MyUserControl2 = new ASP.MyUserControl( "this is a test (2)" );
Controls.Add( MyUserControl2 );
Formatting Numbers With 2 Digits Of Precision
Here it is.. simple but I always forget it.
Example:
19.ToString( "F" );
19.ToString( "#0.00" );
Also, this is how to format a number with a leading zero if it is one digit. For example, 3 should be 03:
3.ToString( "00" );
See: Double.ToString Method (String)
Example:
19.ToString( "F" );
19.ToString( "#0.00" );
Also, this is how to format a number with a leading zero if it is one digit. For example, 3 should be 03:
3.ToString( "00" );
See: Double.ToString Method (String)
Tuesday, November 6, 2007
"aspnet_compiler.exe" exited with code 1.
I use Web Deployment Project to make one assembly of the asp project. But when trying to build the wdp I had this error (although the project comiled and run fine):
"aspnet_compiler.exe" exited with code 1.
And finally I got the problem. The reason was a missing </form> closing tag.
See: REGEX to find missing closing tag
"aspnet_compiler.exe" exited with code 1.
And finally I got the problem. The reason was a missing </form> closing tag.
See: REGEX to find missing closing tag
Monday, November 5, 2007
FileUpload Control Within An UpdatePanel
This will work by forcing a full postback. In order to do this, we use PostBackTrigger:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
<Triggers>
<asp:PostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<ews:DatePicker ID="DatePicker1" runat="server" UsingUpdatePanel="True" OnSelectionChanged="DatePicker1_SelectionChanged" /><br />
<asp:Label ID="Label1" runat="server"></asp:Label><br /><br />
<asp:FileUpload ID="FileUpload1" runat="server" /><asp:Button ID="Button1" runat="server"
Text="Upload" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
See: Triggers - a better control over postback , FileUpload example
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
<Triggers>
<asp:PostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<ews:DatePicker ID="DatePicker1" runat="server" UsingUpdatePanel="True" OnSelectionChanged="DatePicker1_SelectionChanged" /><br />
<asp:Label ID="Label1" runat="server"></asp:Label><br /><br />
<asp:FileUpload ID="FileUpload1" runat="server" /><asp:Button ID="Button1" runat="server"
Text="Upload" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
See: Triggers - a better control over postback , FileUpload example
Sunday, November 4, 2007
Wizzard Control With Master Page Problem
I had a page that had a wizzard control and it worked fine. But after I've added a master page, it got the following error (when I click on the Next or Previous Button):
"The command 'MovePrevious' is not valid for the previous step, make sure the step type is not changed between postbacks".
When I debugged the page, I saw that always ActiveStepIndex = 0 and somehow it had been lost during the postback. The problem was that I had changed the ID of the master page on its Load event. That was the problem. When I changed it to use Init, not Load, everything got fine again. So, it is important to know exactly how the events are being raised. The order is the following:
Init (master page)
Init (page)
Load (page)
Load (master page)
You see that first is executed Load of the page and after that the Load event of the master page. And because I changed the ID of the master page on Load (it reflects the name of the controls in the page) the page lost its data.
Conclusion - be sure how the events are raised in page lifecycle.
PS: The bad thing was that I had to find it on my own. There's no info about that on the net.
"The command 'MovePrevious' is not valid for the previous step, make sure the step type is not changed between postbacks".
When I debugged the page, I saw that always ActiveStepIndex = 0 and somehow it had been lost during the postback. The problem was that I had changed the ID of the master page on its Load event. That was the problem. When I changed it to use Init, not Load, everything got fine again. So, it is important to know exactly how the events are being raised. The order is the following:
Init (master page)
Init (page)
Load (page)
Load (master page)
You see that first is executed Load of the page and after that the Load event of the master page. And because I changed the ID of the master page on Load (it reflects the name of the controls in the page) the page lost its data.
Conclusion - be sure how the events are raised in page lifecycle.
PS: The bad thing was that I had to find it on my own. There's no info about that on the net.
Thursday, November 1, 2007
Visibility:hidden vs Display:none
These two style properties do two different things.
visibility: hidden hides the element, but it still takes up space in the layout.
display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
visibility: hidden hides the element, but it still takes up space in the layout.
display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
How To Write Source Code In Your Blog
I guess it would be pretty nice if we had the opportunity to write code such as xml and html in our blog posts, but anyway... I use Quick Escape to convert source code to escaped characters which can be pasted back into my posts.
Get Rid Of _ctl0 Prefix In UniqueID Of Master Page
Master Pages seemed to solve old problems pretty well but now we've got some new. If you wander how to get rid of the prefix _ctl0 that is the answer - just set an ID of the master page in Page_Init. For example if we have MyMaster.master file, we need to have similar to this code:
<script runat="server" type="text/C#">
protected void Page_Init( object sender, EventArgs e )
{
this.ID = "MyMaster";
}
</script>
NOTE: Do not use Load event! It causes problems with wizzard and multiview controls... more
<script runat="server" type="text/C#">
protected void Page_Init( object sender, EventArgs e )
{
this.ID = "MyMaster";
}
</script>
NOTE: Do not use Load event! It causes problems with wizzard and multiview controls... more
Don't use <xhtmlconformance mode="Legacy"/> with ASP.NET AJAX
I do not have time to research why ASP.NET AJAX Toolkit is not working with <xhtmlconformance mode="Legacy"/> in web.config file, but anyway, hope I could help someone having my problem...
I had a calendar extender, but I got the error (as a javascript error):
this._pagerequestManager is null or not an object
The problem was that I used YAF component (YetAnotherForum.net) which uses this mode:
xhtmlconformance mode="Legacy"
PS: Hah, what I just understood is that the difference between mode="Legacy" and mode="Transactional" (default) is the forming of UniqueID of the controls (UniqueID property includes the identifier for the server control's naming container... more). For example, if you do not name a control, its ClientID is ctl0 or ctl00 depending on the mode mentioned above. If that control contains child controls, they would have the prefix ctl0 ot ctl00 as well.
See xhtmlConformance Element in MSDN.
See more about this.
I had a calendar extender, but I got the error (as a javascript error):
this._pagerequestManager is null or not an object
The problem was that I used YAF component (YetAnotherForum.net) which uses this mode:
xhtmlconformance mode="Legacy"
PS: Hah, what I just understood is that the difference between mode="Legacy" and mode="Transactional" (default) is the forming of UniqueID of the controls (UniqueID property includes the identifier for the server control's naming container... more). For example, if you do not name a control, its ClientID is ctl0 or ctl00 depending on the mode mentioned above. If that control contains child controls, they would have the prefix ctl0 ot ctl00 as well.
See xhtmlConformance Element in MSDN.
See more about this.
Tuesday, October 30, 2007
Right vs Left Brains
The Right Brain vs Left Brain test ... do you see the dancer turning clockwise or anti-clockwise?
If clockwise, then you use more of the right side of the brain and vice versa.
Most of us would see the dancer turning anti-clockwise though you can try to focus and change the direction; see if you can do it.
Subscribe to:
Comments (Atom)
