It's very simple to convert a HTML color (Hexadecimal color) to System.Drawing.Color.
Just ask the System.Drawing.ColorTranslator class to do so.
Color myColor = System.Drawing.ColorTranslator.FromHtml("#660000");Remember to include the leading '#' sign.
You may also pass in color names instead of the hexadecimal color.
Same, if you want to convert the System.Drawing.Color to hexadecimal string.
string htmlColor = System.Drawing.ColorTranslator.ToHtml(System.Drawing.Color.Navy);URL: http://www.fusioncharts.com/free/Default.asp
Would you like to have nice animated flash chart displayed in your website?
I was looking for charting tool, and found this -- FusionCharts Free. It's a flash charting component and the good news is It's FREE.
It just came out with a newer version, FusionCharts Free V2. If I'm not mistaken, the version 1 was only free for personal use, so I couldn't recomment it to my company, unless we pay for it. Just now, I checked through the License Agreement again, it seems like it's now free for indivisual/research/commercial user. It's completely free to OEM and distributed with the open or closed source application. Of course, there are also some rules you need to follow. Well, it's really a good news to me, and I can propose this to my company, coz I really like the charts, they look nice!
It's using XML data, so it's quite easy for everyone to embed this chart in your application using your own language. There are bar charts, line charts, pie charts, area charts and etc. In the new version, they even include Gantt chart and Funnel chart. You may view the types of chart in the Chart Gallery.
Funnel Chart & Gantt Chart
You can download the FusionChart Free V2 here: Download
Remember to read the License Agreement / Terms of Use
I'll post some prototypes after I've embedded this chart in my application. 
URL: http://www.pagetutor.com/button_designer/index.html
I plan to build some CSS buttons by myself, instead of using Image Buttons in ASP.NET, especially for the rollover effect.
I've found this useful tool to design a CSS button, provided by PageTutor.com.
It's very simple for you to generate your own button. You just need to define the button style, you can even add the background image for the button. Then, you can click on Mouseover tab to define the mouseover effect. You'll get the CSS & javascripts codes, plus the button codes in the Code tab. It's just that simple and friendly to build a CSS button. Isn't it cool? This saved me a lot of hassles to study and build my own buttons.
You can also go to the Samples tab to look for some already defined buttons, and apply them in your applications. You may make some amendments on the samples to fit your applications too. Enjoy!
Reference: CoDe Magazine - Creating ASP.NET Custom Controls with Style
My Notes:
* A control's Render method will render a control in the last step of a control's life cycle, just before the control is disposed.
* The only parameter for Render method is an HtmlTextWriter object.
* HtmlTextWriter object writes HTML to the output stream. It provides a set of Write methods.
By default, ASP.NET renders HTML 3.2 for all non-Microsoft browsers that does support HTML 4.0 and CSS properly.
* It's better practice to use CSS.
<p style="color:red">My Text</p>is better than
<p><font color="red">My Text</font></p>
HttpBrowserCapabilities client = Page.Request.Browser;
if (client.Browser == "IE")
{
if (client.MajorVersion > 6)
{
writer.Write("You are using IE 7.0 or above.");
}
else
{
writer.Write("You are using IE 6.0 or below.");
}
}
else
{
writer.Write("You are not using IE");
}
if (writer.GetType().ToString() == "HtmlTextWriter")
{
//Render CSS
}
else
{
//Render HTML 3.2
}
#METHOD 1: Basic HTML output
writer.Write("<H2>" + _message + "</H2>");
#METHOD 2: Create HTML with Write & WriteLine
writer.WriteLine("<p>");
//Indent HTML by inserting a Tab
writer.Write(HtmlTextWriter.DefaultTabString);
//Make text red with Font tag
writer.Write("<font color=\"red\">");
writer.Write(_message);
writer.WriteLine("</font>");
writer.WriteLine("</p>");
#METHOD 3: Using Writer Helper methods to create HTML
writer.WriteFullBeginTag("p");
//Indent HTML by inserting a Tab
writer.Write(HtmlTextWriter.DefaultTabString);
//Make text blue with Font tag
writer.WriteBeginTag("font");
writer.WriteAttribute("color", "blue");
writer.Write(HtmlTextWriter.TagRightChar);
writer.Write(_message);
writer.WriteEndTag("font");
writer.WriteEndTag("p");
#METHOD 4: Writing Styles
//Write begin tag without closing >
writer.WriteBeginTag("p");
//Add a style
writer.Write(" style");
writer.Write(HtmlTextWriter.EqualsDoubleQuoteString);
writer.WriteStyleAttribute("color", "green");
writer.Write(HtmlTextWriter.DoubleQuoteChar);
//Output the '>' for the 'p' tag
writer.Write(HtmlTextWriter.TagRightChar);
writer.Write(_message);
//Write end tag
writer.WriteEndTag("p");
Ever got this message "Preparing to install... " when you are trying to launch your Visual Basic 6?
I had this problem when I have multiple user accounts in my machine, I'll get this message as VB6 was installed using another user account. There was a workaround for this, if you know the username and password for the user account who installed VB6.
1) Just right-click on the VB6 program, select "Run as..."
2) Enter the username & password who installed the VB6.
But it's kinda frustrating, coz everytime you need to run as another user for using VB6.
Finally, my colleague has taught me a way to fix this.
1) Go to C:\Windows\System32 folder, and look for msi.dll.
2) Rename the msi.dll to any other name.
3) Go to C:\Windows\System32\dllcache folder, and rename msi.dll too.
If you didn't do this step, the msi.dll in System32 folder will automatically be recreated.
If you couldn't find this dllcache folder, you may need to change a property in the Folder options.
In Windows Explorer --> Go to Tools menu --> Select Folder Options --> Click on View tab --> Uncheck the option "Hide protected operating system files (Recommended)".
4) Launch VB6, and now you are able to launch VB6 without getting the error message.
5) Rename the file to msi.dll in System32 folder and dllcache folder.
Done! ^_^
I always think it's really nice for some web sites to popup a dialog, while the background color fades out. It's actually quite easy to make it happen with ASP.NET Ajax Control Extender now. ^_^
Copy these classes to your css file:
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.modalPopup
{
background-color:#FFFFDD;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
During design time, add the following controls to the web page.
In the HTML page, add these attributes to the ModalPopupExtender:
<ajaxToolkit:ModalPopupExtender
id="ModalPopupExtender2"
runat="server"
OnOkScript="fnClickOK()"
CancelControlID="btnCancel1"
OkControlID="btnOK1"
DropShadow="true"
BackgroundCssClass="modalBackground"
PopupControlID="Panel2"
TargetControlID="btnClickToOpen">
For the popup Panel, define these attributes:
<asp:Panel
id="Panel2"
runat="server"
style="display: none"
CssClass="modalPopup">
Create this function in javascript, if you want to use the server-side postback, otherwise you can just create a javascript function where you will perform something when the user clicks on OK button in the popup dialog.
function fnClickOK(sender, e)
{
__doPostBack(sender,e);
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
btnOk1.OnClientClick = String.Format("fnClickOK('{0}','{1}')", btnOk1.UniqueID, "");
btnClickToOpen.OnClientClick = String.Format("fnClickOK('{0}','{1}')", btnClickToOpen.UniqueID, "");
}
}
protected void btnOk1_Click(object sender, EventArgs e)
{
lblName.Text = "Hello, " + txtName.Text +
". You have selected " + DropDownList1.Text;
}
protected void btnClickToOpen_Click(object sender, EventArgs e)
{
DropDownList1.Items.Clear();
DropDownList1.Items.Add("Red");
DropDownList1.Items.Add("Purple");
DropDownList1.Items.Add("Black");
ModalPopupExtender2.Show();
}
* If you want to refer to an external javascript file, you just need to add this line of code in the HTML file:
<script language="javascript" type="text/javascript" src="AjaxPrototype.js"></script>
I've just learnt how to do this collapsible panel with ASP.NET Ajax Control Extender, it's actually quite simple. ^_^
At the beginning, create these controls on the screen:
| Control | Control Name |
| ScriptManager | ScriptManager1 |
| CollapsiblePanelExtender | CollapsiblePanelExtender1 |
| Panel | TitlePanel |
| Panel | ContentPanel |
| Image | Image1 |
| Label | Label1 |
Define these CSS classes:
.collapsePanel
{
width:640px;
height:0px;
background-color:White;
overflow:hidden;
}
.collapsePanelHeader
{
width:640px;
height:20px;
background-color:Silver;
font-weight:bold;
float:left;
padding:5px;
cursor:pointer;
vertical-align:middle;
}
Remove the width and height for the TitlePanel and ContentPanel, and set the CssClass attribute:
| TitlePanel | collapsePanelHeader |
| ContentPanel | collapsePanel |
In the HTML page, add these attributes to the CollapsiblePanelExtender:
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1"
runat="server" TargetControlID="ContentPanel"
ExpandControlID="TitlePanel"
CollapseControlID="TitlePanel"
Collapsed="true"
TextLabelID="Label1"
ExpandedText="Hide Details..."
CollapsedText="Show Details..."
ImageControlID="Image1"
ExpandedImage="Images/Expanded.gif" CollapsedImage="Images/Collapsed.gif"
SuppressPostBack="true">
</ajaxToolkit:CollapsiblePanelExtender>
It's done.
URL: http://www.aspspider.com/
This is a ASP.NET web hosting with SQL Server Express, FREE version.
I've registered to this web hosting when I started to learn ASP.NET, it was quite hard for me to find other free web hosting at that time.
At the beginning, you are given 10MB disk space, where you can increase the disk quota up to 200MB.
The registration was closed for quite some time, and I just found out it's open again now. For those who are interested in getting this free web hosting, you may click on this link: Register Now
[Updated on 26 April 2008]Reference to: MaxDesign - Liquid Layouts
I've been almost the whole week to do this simple task, to locate three buttons in the home page using CSS. I was using HTML table to organize the page layout, but found out using CSS makes the page load faster, thus I decided to learn CSS for my project. After about a week of research, finally I've found this, and it really saves me! This tutorial is very simple, you can just follow step by step and you'll get your page layout done.
There are some definitions regarding liquid layout and fixed-width layout, then you'll know which one you should be using.
Copy these to your css file:
1: /* COLUMNS */
2: #leftColumn 3: {4: float: left;
5: width: 30%;
6: margin-left: 4%;
7: text-align:center;
8: display:inline;
9: border:dotted 1px #ccc;
10: } 11: 12: #middleColumn 13: {14: float: left;
15: width: 30%;
16: margin-left: 1%;
17: text-align:center;
18: border:dotted 1px #ccc;
19: } 20: 21: #rightColumn 22: {23: float: left;
24: width: 30%;
25: margin-left: 1%;
26: text-align:center;
27: border:dotted 1px #ccc;
28: } 29: 30: #footer 31: {32: clear: both;
33: text-align:center;
34: border:dotted 1px #ccc;
35: margin-top:1em;
36: } 37: 38: #leftColumn p, #middleColumn p, #rightColumn p, #footer p
39: {40: margin: 2em;
41: }1: <div id="leftColumn">
2: <p><img src="Images/bluehouse01_large.gif"
3: alt="Single Company Analysis" />
4: <br />
5: Option 16: </p>
7: </div>
8: 9: <div id="middleColumn">
10: <p><img src="Images/bluehouse02_large.gif"
11: alt="Group Companies Analysis"/>
12: <br />
13: Option 214: </p>
15: </div>
16: 17: <div id="rightColumn">
18: <p><img src="Images/bluehouse03_large.gif"
19: alt="Form C Data Search"/>
20: <br />
21: Option 322: </p>
23: </div>
24: 25: <div id="footer">
26: <p>You have selected option 1, and this will allow you to perform analysis for abc company.
27: </p>
28: </div>
Then you'll get the output.
Ever wonder how to make the rounded corners in your web site?
I've read about using images to make it, and some need javascripts. You can use ASP.NET AJAX tool for this rounded corners box. I just found this, where you don't need to use any images nor javascript, and it works.
Copy this to your css file. e.g. test.css
1: /* ROUNDED CORNERS - Grey border */
2: #xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
3: #xsnazzy h1 {font-size:2.5em; color:#fff;}
4: #xsnazzy h2 {font-size:2em;color:#06a; border:0;}
5: #xsnazzy p {padding-bottom:0.5em;}
6: #xsnazzy h2 {padding-top:0.5em;}
7: #xsnazzy {background: transparent; margin:1em;}
8: 9: .xtop, .xbottom {display:block; background:transparent; font-size:1px;}
10: .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
11: .xb1, .xb2, .xb3 {height:1px;}
12: .xb2, .xb3, .xb4 {border-left:1px solid #ccc; border-right:1px solid #ccc;}
13: .xb1 {margin:0 5px; background:#ccc;}
14: .xb2 {margin:0 3px; border-width:0 2px;}
15: .xb3 {margin:0 2px;}
16: .xb4 {height:2px; margin:0 1px;}
17: 18: .xboxcontent
19: {20: display:block;
21: border:0 solid #ccc;
22: border-width:0 1px;
23: }Copy this to the HTML file:
1: <div id="xsnazzy">
2: <b class="xtop">
3: <b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b>
4: </b>
5: <div class="xboxcontent">
6: <p><h2>This is an example of rounded corner box without using images or javascript.</h2></p>
7: </div>
8: <b class="xbottom">
9: <b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b>
10: </b>
11: </div>
In order to use the css file, you need to include this line of code in the head block.
1: <head>
2: <link href="Test.css" rel="stylesheet" type="text/css" />
3: <title>Rounded Corners example</title>
4: </head>
I just started to create my CSS file for my project, and just want to check out if there are any recommended ways of doing this right. I just did a simple search in code project site, and found a lot of related articles which are useful. (Well, more to read now....)
I'll add more to the list when I've found more information here.
1. Internet Explorer & CSS issues
2. Ten ways to speed up the download time of your web pages (some key points here, a must read article.)
3. Ten CSS tricks you may not know (There are some tricks here that you shouldn't miss too)
4. CSS Help Pile - A huge pile of CSS-related tips, tricks & resources.
5. 53 CSS-Techniques You Couldn't Live Without (Here, you can learn the specific technique that you want to use in your web site. Another Must Read article.)
6. Layout Gala: a collection of 40 CSS layouts - Here you'll get some reference CSS layout sites.
7. MaxDesign - Sample CSS Page Layouts (with step by step layout tutorial too)
8. CSSplay - There are some demos, menus, layouts, boxes examples.
When I was searching for CSS, and I came to this web site, where you get to learn about HTML & CSS here. If you wanna design your web site, you may learn the basics from here too.
There are some useful sections, including Tutorials, References, Articles and Examples.
I plan to start learning CSS from here, and wish I can design my web application to be better and faster performance with CSS. This is a new thing to me, and I hope I can complete these tutorials in two day time, with still doing some other tasks at work.
URL: http://asp.net/AJAX/Documentation/Live/default.aspx
After looking around in the Internet, I was almost lost. There are tons of resources that are interesting and useful, but I don't know where to start. Moreover, time is short, I can't take my own sweet time to sit down and study from the beginning. I need some intensive course to let me start working on my current project. Many resources are not related to ASP.NET too. Though there are ASP.NET Ajax Learning Video, the videos are for the Ajax Controls, and there's no sound for the video clips, so I can only guess and watch the codes. That doesn't help much in the introduction and explanation. Moreover, I think it's time consuming to watch the video tutorials than only reading text. I also downloaded the Ajax Sample Applications, but I haven't find it useful to me, coz I need more explanation.
Finally, after two day searching around and reading, I've come to this site - Microsoft ASP.NET AJAX documentation. I guess this is where I should start and move on, at least I found an Ajax sample application that I can follow what it teaches me to do.
Well, it's time to stop wandering around and stick to this, and go! ^_^