Repairing a Corrupted Database

When we are regularly using databases, sometimes those will get corrupted. This happened to one of my applications, it was a Windows Mobile application with SQL Server CE database. Since it is running in a mobile it is bit difficult for us to fix the database using the desktop machine. I used the following .Net Compact framework code to fix the corrupted database while the database is in the mobile.

1. private void btnRepair_Click(object sender, EventArgs e)
2. {
3.     Cursor.Current = Cursors.WaitCursor;
4.     Cursor.Show();
6.     // txtDBPath will contain the path to the database.
7.     engine = new SqlCeEngine(@"Data Source=" + txtDBPath.Text + ";Password=DBPassword");
8.     try
9.     {
10.         if (!engine.Verify())
11.         {
12.             Cursor.Current = Cursors.Default;
13.             Cursor.Hide();
15.             DialogResult result = MessageBox.Show("Database is corrupted. Do you want to repair?", "My App", MessageBoxButtons.YesNo, MessageBoxIcon.Question, MessageBoxDefaultButton.Button1);
16.             if (result == DialogResult.Yes)
17.             {
18.                 Cursor.Current = Cursors.WaitCursor;
19.                 Cursor.Show();
21.                 // You can also use RepairOption.DeleteCorruptedRows.
22.                 engine.Repair(null, RepairOption.RecoverCorruptedRows);
24.                 Cursor.Current = Cursors.Default;
25.                 Cursor.Hide();
27.                 MessageBox.Show("Database repaired successfully.", "My App");
28.             }
29.         }
30.         else
31.         {
32.             Cursor.Current = Cursors.Default;
33.             Cursor.Hide();
34.             MessageBox.Show("Database is not corrupted.", "My App");
35.         }
36.     }
37.     catch (Exception ex)
38.     {
39.         Cursor.Current = Cursors.Default;
40.         Cursor.Hide();
41.         MessageBox.Show(ex.Message, "Error!");
42.     }
43. }

Next time you get a corrupted SQL CE database try it out.

Rounding a value Down

If you did work with .Net Math classes you may have noted that you can quite easily round value upwards. But what about rounding values down?

For example if you tried to round the value 1.23501 into 2 decimal places using the Round method provided by the Math class as below, the result you will get is 1.24. Meaning .Net had rounded the value up.

1. double dbl = Math.Round(1.23501, 2);
2. 
   

If the value is rounded down it should be 1.23, but in .Net I couldn’t find an easy way to get this done. So I did create a small code to get it done. It is very simple only a method with one statement as shown below.

1. double RoundDown(double Number, int Digits)
2. {
3.     try
4.     {
5.         return Math.Truncate(Number) +
6.             (Math.Floor(Math.Round((Number % 1), Digits) * Math.Pow(10, (Math.Round((Number % 1), Digits).ToString().Length - 3)))) *
7.             (1 / Math.Pow(10, Math.Round((Number % 1), Digits).ToString().Length - 3));
8.     }
9.     catch (Exception)
10.     {
11.         MessageBox.Show("Error ! Please check values.");
12.         return 0.0;
13.     }
14. }
15. 
    

Ohh, I think this is complicated right? Please find a bit of self explanatory code below.

1. double RoundDownExplained(double Number, int Digits)
2. {
3.     try
4.     {
5.         // Get the whole number from the double value.
6.         // For example we'll take Number = 788.34567 and Digits = 3.
7.         // WholeNumberPart = 788.
8.         double WholeNumberPart = Math.Truncate(Number);
9.         // Getting the decimal part from the doouble value.
10.         // DecimalNumberPart = 0.3457.
11.         double DecimalNumberPart = Math.Round((Number % 1), Digits);
12.         // Finding the number of decimal places so we can multiply by 10 to make it suitable for Floor().
13.         // MultiplicationValue = 3.
14.         int MultiplicationValue = Math.Round((Number % 1), Digits).ToString().Length - 3;
15.         // Create the double value to round down.
16.         // RoundedDownValue = 345.
17.         double RoundedDownValue = Math.Floor(DecimalNumberPart * Math.Pow(10, MultiplicationValue));
18.         // Finding the value to devide the result to make it decimal again.      
19.         // DivisionValue = 0.001.            
20.         double DivisionValue = 1 / Math.Pow(10, MultiplicationValue);
21.         // Creating the decimal part with rounded down value.
22.         // RoundedDownValue_Float = 0.345.
23.         double RoundedDownValue_Float = RoundedDownValue * DivisionValue;
24.         // Creating the full rounded down value.
25.         // return = 788.345.
26.         return WholeNumberPart + RoundedDownValue_Float;
27.     }
28.     catch (Exception)
29.     {
30.         MessageBox.Show("Error ! Please check values.");
31.         return 0.0;
32.     }
33. }
34. 
    

The complete code of the application I created is below with a screenshot of the application running. Hope this helps to you.

1. using System;
2. using System.Text;
3. using System.Windows.Forms;
5. namespace WindowsFormsApplication1
6. {
7.     public partial class Form1 : Form
8.     {
9.         public Form1()
10.         {
11.             InitializeComponent();
12.         }
14.         double RoundDown(double Number, int Digits)
15.         {
16.             try
17.             {
18.                 return Math.Truncate(Number) +
19.                     (Math.Floor(Math.Round((Number % 1), Digits) * Math.Pow(10, (Math.Round((Number % 1), Digits).ToString().Length - 3)))) *
20.                     (1 / Math.Pow(10, Math.Round((Number % 1), Digits).ToString().Length - 3));
21.             }
22.             catch (Exception)
23.             {
24.                 MessageBox.Show("Error ! Please check values.");
25.                 return 0.0;
26.             }
27.         }
28.         double RoundDownExplained(double Number, int Digits)
29.         {
30.             try
31.             {
32.                 // Get the whole number from the double value.
33.                 // For example we'll take Number = 788.34567 and Digits = 3.
34.                 // WholeNumberPart = 788.
35.                 double WholeNumberPart = Math.Truncate(Number);
36.                 // Getting the decimal part from the doouble value.
37.                 // DecimalNumberPart = 0.3457.
38.                 double DecimalNumberPart = Math.Round((Number % 1), Digits);
39.                 // Finding the number of decimal places so we can multiply by 10 to make it suitable for Floor().
40.                 // MultiplicationValue = 3.
41.                 int MultiplicationValue = Math.Round((Number % 1), Digits).ToString().Length - 3;
42.                 // Create the double value to round down.
43.                 // RoundedDownValue = 345.
44.                 double RoundedDownValue = Math.Floor(DecimalNumberPart * Math.Pow(10, MultiplicationValue));
45.                 // Finding the value to devide the result to make it decimal again.      
46.                 // DivisionValue = 0.001.            
47.                 double DivisionValue = 1 / Math.Pow(10, MultiplicationValue);
48.                 // Creating the decimal part with rounded down value.
49.                 // RoundedDownValue_Float = 0.345.
50.                 double RoundedDownValue_Float = RoundedDownValue * DivisionValue;
51.                 // Creating the full rounded down value.
52.                 // return = 788.345.
53.                 return WholeNumberPart + RoundedDownValue_Float;
54.             }
55.             catch (Exception)
56.             {
57.                 MessageBox.Show("Error ! Please check values.");
58.                 return 0.0;
59.             }
60.         }
62.         private void button1_Click(object sender, EventArgs e)
63.         {
64.             try
65.             {
66.                 label1.Text = RoundDown(double.Parse(textBox1.Text), int.Parse(textBox2.Text) + 1).ToString();
67.             }
68.             catch (Exception)
69.             {
70.                 MessageBox.Show("Error ! Please check values.");
71.             }
72.         }
73.         private void button2_Click(object sender, EventArgs e)
74.         {
75.             try
76.             {
77.                 label2.Text = RoundDownExplained(double.Parse(textBox1.Text), int.Parse(textBox2.Text) + 1).ToString();
78.             }
79.             catch (Exception)
80.             {
81.                 MessageBox.Show("Error ! Please check values.");
82.             }
83.         }
84.     }
85. }
86. 
    

Error Accessing Path

Today is a day full of errors, when I fixed one error another error came while trying to run my hosted application. This time it was “Access to the path 'C:\inetpub\wwwroot\……’ is denied.

Full error is as follows,

Access to the path 'C:\inetpub\wwwroot\Mining2 Setup\Images\temp\tempImage.png' is denied.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.UnauthorizedAccessException: Access to the path 'C:\inetpub\wwwroot\Mining2 Setup\Images\temp\tempImage.png' is denied.

The issue here was generated by a code written in my application which tries to access an image named tempImage.png in the said folder (Images\temp).

The reason for this is when you install IIS 7 the account used by the application pool (IIS_IUSRS) is not given access to the folder Images\temp. Since it is created by the application I just installed.

To sort out the issue give write permission to the folder Images\temp for the account IIS_IUSRS using the security tab in the folder properties page.

Error when Installing MSI

Recently when trying to install a setup I made for a project on a new server having Windows Server 2008 R2 I continuously encountered an error as of below.

“The installer was interrupted before “Application” could be installed. You need to restart the installer to try again.”

The server had IIS 7, .Net Framework 3.5 and 4 installed. After putting in some time onto this I found out that this is because the II6 Management Compatibility services was not installed for the Web Server role.

To fix it simply open the Server Manager and open up Web Server role and click on Add Role Services.

Then select IIS 6 Management Compatibility node and all the child nodes below in under the Management Tools parent node and press next.

When the installation is complete the setup will work as desired.

Changing the Control Style at Runtime using the ASPX

Recently I changed the style of some controls in my ASPX page at runtime based on the values set on another control in my page. For example the color of the table is changed based on the radio button that was selected and the color of the button is changed according to the text that was typed in the textbox. Hope this is helpful.

1. <html xmlns="http://www.w3.org/1999/xhtml">
2. <head runat="server">
3.     <title>Changing the Control Style</title>
4.      <style type="text/css">
5.         .Style1
6.         {
7.             background-color: Red;
8.         }
9.         .Style2
10.         {
11.             background-color: Blue;
12.         }
13.     </style>
14. </head>
15. <body>
16.     <form id="form1" runat="server">
17.         <asp:RadioButton ID="RadioButton1" runat="server" Text="Red" GroupName="1" Checked="True" AutoPostBack="True" />
18.         <asp:RadioButton ID="RadioButton2" runat="server" Text="Blue" GroupName="1" AutoPostBack="True" />
19.         <!-- Styling the table based on the radio button selection. -->
20.         <table class="<% if(RadioButton1.Checked) { %> Style1 <% } else { %> Style2 <% } %>">
21.             <tr>
22.                 <td> &nbsp; See the change... </td>
23.             </tr>
24.             <tr>
25.                 <td> &nbsp; </td>
26.             </tr>
27.         </table>
28.         <asp:TextBox ID="TextBox1" runat="server" MaxLength="3"></asp:TextBox>
29.         <!-- Styling the button based on the textbox value. -->
30.         <input id="Button1" type="submit" value="button"
31.                class="<% if(TextBox1.Text=="") { %> Style1 <% } else { %> Style2 <% } %>" />
32.     </form>
33. </body>
34. </html>
35. 
    

Output looks as below.

Firing TreeView TreeNodeCheckChanged Event

Normally in ASP.Net TreeView you can enable it to show checkboxes in its node levels. So if you need to do any actions when a node is checked or unchecked you need to use the TreeNodeCheckChanged event. But the problem is TreeNodeCheckChanged event will not fire when a checkbox is clicked. The cause for this is because the TreeNode class which represents a node in the TreeView will not add onClick event on the checkbox.

But if you carefully check it the event is getting fired at the next page postback. Since I needed to do some actions when the checkbox statuses are changed I made the page post back when a checkbox is checked or unchecked by the following java script. What it does is simply it will check the element which caused the event is a checkbox and do a postback of the page.

1. <script type="text/javascript">
2.     function TreeViewCheckBoxClicked(Check_Event) {
3.         var objElement;
4.         try {
5.             // Get the element which fired the event.
6.             objElement = window.event.srcElement;
7.         }
8.         catch (Error) {
9.             //srcElement is failing, objElement is null.
10.         }
12.         if (objElement != null) {
13.             // If the element is a checkbox do postback.
14.             if (objElement.tagName == "INPUT" && objElement.type == "checkbox") {
15.                 __doPostBack("", "");
16.             }
17.         }
18.         else {
19.             //    If the srcElement is failing due to browser incompatibility determine
20.             // whether the element is and HTML input element and do postback.
21.             if (Check_Event != null) {
22.                 if (Check_Event.target.toString() == "[object HTMLInputElement]") {
23.                     __doPostBack("", "");
24.                 }
25.             }
26.         }
27.     }
28. </script>

To make this work you need to bind the onClick event with the javascript shown above as shown below.

1. protected void Page_Load(object sender, EventArgs e)
2. {
3.     // Adding the onClick script to the TreeView.
4.     TreeView1.Attributes.Add("onClick", "TreeViewCheckBoxClicked(event)");
5. }

Even though I have done this in Page Load this can be done in other places of code as well, for example if you are adding the TreeView by code you can use this right before adding it to the page.

The above will make the page post back when ever a checkbox in the TreeView is clicked, but nothing special will happen. You need to implement the code for TreeNodeCheckChanged event to get some task done out of it, for example I am using the following code to check or uncheck the child nodes depending on the action done for the parent node.

1. protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
2. {
3.     // Loop through all the child nodes and change the checked status as required.
4.     foreach (TreeNode tn in e.Node.ChildNodes)
5.     {
6.         if (e.Node.Checked)
7.             tn.Checked = true;
8.         else
9.             tn.Checked = false;
10.     }
11. }

Changing GridView Column Headers

If you are wondering a way to change the column header appearing in the .Net GridView control in run time then this post will help you to get it done.

For example think that you need to change the normal grid headers shown in Screen A into something like shown in Screen B.

Screen A

Screen B

I have removed few columns from the grid header and then I did add few customized column headers. The added “Edit” column and “Id” column are spanning to 2 rows, the “Temp Columns” column is spanning to 2 columns.

I think the code is self explanatory. This way you will be able to create complex gridview headers.

1. protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
2. {
3.      if (e.Row.RowType == DataControlRowType.Header)
4.      {
5.          // Remving the first two colummn headers.
6.          e.Row.Cells.RemoveAt(0);
7.          e.Row.Cells.RemoveAt(0);
9.          // Creating the gridview row object.
10.          GridViewRow headerGridRow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Selected);
11.          headerGridRow.ID = "hdrGridRow";
12.          TableCell HeaderCell;
14.          // Creating and adding the first header cell.
15.          HeaderCell = new TableCell();
16.          HeaderCell.Text = "Edit";
17.          HeaderCell.ID = "cellEdit";
18.          HeaderCell.Font.Bold = false;
19.          HeaderCell.HorizontalAlign = HorizontalAlign.Center;
20.          HeaderCell.RowSpan = 2; // Spans across 2 rows.
21.          HeaderCell.ColumnSpan = 1;
22.          HeaderCell.BackColor = System.Drawing.Color.LightGray;
23.          HeaderCell.BorderColor = System.Drawing.Color.White;
24.          HeaderCell.ForeColor = System.Drawing.Color.Red;
25.          headerGridRow.Cells.Add(HeaderCell);
27.          // Creating and adding the second header cell.
28.          HeaderCell = new TableCell();
29.          HeaderCell.Text = "Id";
30.          HeaderCell.ID = "cellId";
31.          HeaderCell.Font.Bold = false;
32.          HeaderCell.HorizontalAlign = HorizontalAlign.Center;
33.          HeaderCell.RowSpan = 2;
34.          HeaderCell.ColumnSpan = 1;
35.          HeaderCell.BackColor = System.Drawing.Color.LightGray;
36.          HeaderCell.BorderColor = System.Drawing.Color.White;
37.          HeaderCell.ForeColor = System.Drawing.Color.Red;
38.          headerGridRow.Cells.Add(HeaderCell);
40.          // Creating and adding the third header cell.
41.          HeaderCell = new TableCell();
42.          HeaderCell.Text = "Temp Columns";
43.          HeaderCell.ID = "cellTempColumns";
44.          HeaderCell.Font.Bold = false;
45.          HeaderCell.HorizontalAlign = HorizontalAlign.Center;
46.          HeaderCell.RowSpan = 1;
47.          HeaderCell.ColumnSpan = 2; // Spans across 2 columns.
48.          HeaderCell.BackColor = System.Drawing.Color.LightGray;
49.          HeaderCell.BorderColor = System.Drawing.Color.White;
50.          HeaderCell.ForeColor = System.Drawing.Color.Red;
51.          headerGridRow.Cells.Add(HeaderCell);
53.          // Adding the header row to the gridview.
54.          GridView1.Controls[0].Controls.AddAt(0, headerGridRow);
55.      }
56. }
57. 
    

Class not registered

Recently when I tried to build and run an existing .Net application code I got the following error which generated from a component named “axShockwaveFlash1” which is an object used to embed flash content on to the application.

System.Runtime.InteropServices.COMException was unhandled   Message=Class not registered (Exception from HRESULT: 0x80040154 (REGDB_E_CLASSNOTREG))   Source=System.Windows.Forms   ErrorCode=-2147221164   StackTrace:        at System.Windows.Forms.UnsafeNativeMethods.CoCreateInstance(Guid& clsid, Object punkOuter, Int32 context, Guid& iid)        at System.Windows.Forms.AxHost.CreateWithoutLicense(Guid clsid)        at System.Windows.Forms.AxHost.CreateWithLicense(String license, Guid clsid)        at System.Windows.Forms.AxHost.CreateInstanceCore(Guid clsid)        at System.Windows.Forms.AxHost.CreateInstance()        at System.Windows.Forms.AxHost.GetOcxCreate()        at System.Windows.Forms.AxHost.TransitionUpTo(Int32 state)        at System.Windows.Forms.AxHost.CreateHandle()        at System.Windows.Forms.Control.CreateControl(Boolean fIgnoreVisible)        at System.Windows.Forms.Control.CreateControl(Boolean fIgnoreVisible)        at System.Windows.Forms.AxHost.EndInit()        at Tour_Management_System.Loading_Form.InitializeComponent() in D:\Projects\Acc\TMS_20100205_Desktop\Tour_Management_System 2010-01-19\Tour_Management_System\Form1.Designer.cs:line 99        at Tour_Management_System.Loading_Form..ctor() in D:\Projects\Acc\TMS_20100205_Desktop\Tour_Management_System 2010-01-19\Tour_Management_System\Form1.cs:line 30        at Tour_Management_System.Program.Main() in D:\Projects\Acc\TMS_20100205_Desktop\Tour_Management_System 2010-01-19\Tour_Management_System\Program.cs:line 18        at System.AppDomain._nExecuteAssembly(Assembly assembly, String[] args)        at System.Runtime.Hosting.ApplicationActivator.CreateInstance(ActivationContext activationContext, String[] activationCustomData)        at Microsoft.VisualStudio.HostingProcess.HostProc.RunUsersAssemblyDebugInZone()        at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)        at System.Threading.ThreadHelper.ThreadStart()   InnerException:

After some investigation I found that the reason for this was Flash Player’s incompatibility with 64 bit. Since my machine is running Windows 64 bit version it generates an error while trying to start Flash player. Good thing is Adobe is planning to release a Flash player which supports 64 bit soon.

For people who cannot wait until that (like me) can fix the problem in the following manner by running the application as an x86 application by changing the target platform in project properties.

Step 1 - Right click on your project and click on the properties.

Step 2 - Click on the Build tab and select x86 as the Platform target:.

Step 3 - Rebuild the application and run it, you will not get the error.

Changing the Tab Container

Are you seeking a way to customize the tabcontainer which comes with AJAX toolkit? AJAX tab container has several Cascade Style Sheet (CSS) properties which you can use to change the look of the tab container. But you need to make sure that you are not changing the keywords used in the CSS (ajax__tab_header, ajax__tab_outer, etc…).

You can change the look of the tabs by two methods. Tab container is using few images to give the 3D look it is having in its default view. so the first method is by changing the images and associating the new images to the tab container using a style sheet, second method is to change the tabs using the CSS without images, by using the CSS you can change the colors, sizes etc of the tabs.

Following are the default images that are shipped with the toolkit.

tab
tab-active
tab-active-left
tab-active-right
tab-hover
tab-hover-left
tab-hover-right
tab-left
tab-right
tab-line

 

In the following code I am changing the tabcontainer look by using CSS and then placing the updated images to the relevant (Images/Controls) folder.

1. .tabCont .ajax__tab_header
2. {
3.     font-family: verdana,tahoma,helvetica;
4.     font-size: 11px;
5.     background: url(../Images/Controls/tab-line.gif) repeat-x bottom;
6. }
7. .tabCont .ajax__tab_outer
8. {
9.     padding-right: 4px;
10.     background: url(../Images/Controls/tab-right.gif) no-repeat right;
11.     height: 21px;
12. }
13. .tabCont .ajax__tab_inner
14. {
15.     padding-left: 3px;
16.     background: url(../Images/Controls/tab-left.gif) no-repeat;
17. }
18. .tabCont .ajax__tab_tab
19. {
20.     height: 13px;
21.     padding: 4px;
22.     margin: 0px;
23.     background: url(../Images/Controls/tab.gif) repeat-x;
24. }
25. .tabCont .ajax__tab_hover .ajax__tab_outer
26. {
27.     cursor: pointer;
28.     background: url(../Images/Controls/tab-hover-right.gif) no-repeat right;
29. }
30. .tabCont .ajax__tab_hover .ajax__tab_inner
31. {
32.     cursor: pointer;
33.     background: url(../Images/Controls/tab-hover-left.gif) no-repeat;
34. }
35. .tabCont .ajax__tab_hover .ajax__tab_tab
36. {
37.     cursor: pointer;
38.     background: url(../Images/Controls/tab-hover.gif) repeat-x;
39. }
40. .tabCont .ajax__tab_active .ajax__tab_outer
41. {
42.     background: url(../Images/Controls/tab-active-right.gif) no-repeat right;
43. }
44. .tabCont .ajax__tab_active .ajax__tab_inner
45. {
46.     background: url(../Images/Controls/tab-active-left.gif) no-repeat;
47. }
48. .tabCont .ajax__tab_active .ajax__tab_tab
49. {
50.     background: url(../Images/Controls/tab-active.png) repeat-x;
51. }
52. .tabCont .ajax__tab_disabled
53. {
54.     color: #A0A0A0;
55. }
56. .tabCont .ajax__tab_body
57. {
58.     font-family: verdana,tahoma,helvetica;
59.     font-size: 10pt;
60.     border: 0px solid #999999;
61.     border-top: 0;
62.     padding: 8px;
63.     background-color: #f1f1f1;
64.     margin: 12px;
65. }
66. 
    

 

To apply the style to the tab container you can use the following code.

<asp:TabContainer ID="tcnManageUsers" runat="server" ActiveTabIndex="0" CssClass="tabCont">

Following is the full code of my tab container.

1. <asp:TabContainer ID="tcnManageUsers" runat="server" ActiveTabIndex="0" CssClass="tabCont">
2.      <asp:TabPanel runat="server" HeaderText="Add" ID="tplAdd" >
3.          <ContentTemplate>
4.              <uc1:CreateUser ID="AddCreateUser" runat="server" />
5.          </ContentTemplate>  
6.      </asp:TabPanel>
7.      <asp:TabPanel ID="tplEdit" runat="server" HeaderText="Edit" >
8.          <ContentTemplate >
9.             <asp:Button ID="btnSelectUser" runat="server" Text="Select User" OnClick="btnSelectUser_Click"/>
10.             <uc1:CreateUser ID="EditCreateUser" runat="server" />
11.          </ContentTemplate>
12.      </asp:TabPanel>
13.  </asp:TabContainer>
14. 
    

Creating Rounded Corners

When designing web sites it always looks nicer if you could round the sharp corners, for example see below, what looks nicer to you?

Sharp Corners

Rounded Corners

My feeling is the rounded corners are better looking than the normal one. But the problem is, there is no easy way to create this. You need some Cascade Style Sheet (CSS) knowledge to do this. The easy way to round the required corners is to use the following code.

1. <html xmlns="http://www.w3.org/1999/xhtml">
2. <head runat="server">
3.     <title></title>
4.     <style type="text/css">
5.         .CornerTopLeft
6.         {
7.             float: right;
8.             width: 100%;
9.             margin-top: 10px;
10.             background: url(../Images/TopLeft.png) 0 0 no-repeat rgb(237,28,36);
11.             border: 1px double #f1f1f1;
12.         }
13.         .CornerTopRight
14.         {
15.             float: right;
16.             width: 100%;
17.             background: url(../Images/TopRight.png) 100% 0 no-repeat;
18.         }
19.         .CornerBottomLeft
20.         {
21.             float: right;
22.             width: 100%;
23.             background: url(../Images/BottomLeft.png) 0 100% no-repeat;
24.             height: 100%;
25.         }
26.         .CornerBottomRight
27.         {
28.             float: right;
29.             width: 100%;
30.             background: url(../Images/BottomRight.png) 100% 100% no-repeat;
31.         }
32.         div#Content
33.         {
34.             margin: 15px;
35.         }
36.     </style>
37. </head>
38. <body bgcolor="rgb(232,232,232)">
39.     <form id="form1" runat="server">
40.     <div class="CornerTopLeft">
41.         <div class="CornerTopRight">
42.             <div class="CornerBottomLeft">
43.                 <div class="CornerBottomRight">
44.                     <div id="Content">
45.                         Your content here.....
46.                         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
47.                         <asp:Button ID="Button1" runat="server" Text="Button" />
48.                     </div>
49.                 </div>
50.             </div>
51.         </div>
52.     </div>
53.     </form>
54. </body>
55. </html>
56. 
    

The above code is self explanatory so I didn’t put any comments there. To make it work you need the following 4 images placed on your Images directory.

TopLeft.png –

TopRight.png –

BottomLeft.png –

BottomRight.png –

If I am to explain the code, the corners are curved by using 4 different DIVs and placing the above images on them. For example the following DIVs does the trick.

<div class="CornerTopLeft">
<div class="CornerTopRight">
<div class="CornerBottomLeft">
<div class="CornerBottomRight">

1. <div class="CornerTopLeft">
2.         <div class="CornerTopRight">
3.             <div class="CornerBottomLeft">
4.                 <div class="CornerBottomRight">
5.                     <div id="Content">
6.                         Your content here.....
7.                         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
8.                         <asp:Button ID="Button1" runat="server" Text="Button" />
9.                     </div>
10.                 </div>
11.             </div>
12.         </div>
13.     </div>
14. 
    

The content you need to put in the middle should be wrapped by these DIVs. In the above code I used another DIV for placing content having the ID Content.

Inserting curved images to the corners of the DIVs are done by using a style per DIV. The CSS classes which are used to change these DIVs are as of below.

1. <style type="text/css">
2.         .CornerTopLeft
3.         {
4.             float: right;
5.             width: 100%;
6.             margin-top: 10px;
7.             background: url(../Images/TopLeft.png) 0 0 no-repeat rgb(237,28,36);
8.             border: 1px double #f1f1f1;
9.         }
10.         .CornerTopRight
11.         {
12.             float: right;
13.             width: 100%;
14.             background: url(../Images/TopRight.png) 100% 0 no-repeat;
15.         }
16.         .CornerBottomLeft
17.         {
18.             float: right;
19.             width: 100%;
20.             background: url(../Images/BottomLeft.png) 0 100% no-repeat;
21.             height: 100%;
22.         }
23.         .CornerBottomRight
24.         {
25.             float: right;
26.             width: 100%;
27.             background: url(../Images/BottomRight.png) 100% 100% no-repeat;
28.         }
29.         div#Content
30.         {
31.             margin: 15px;
32.         }
33.     </style>
34. 
    

The filling of the required area is done by assiging a color at the background tag in CornerTopLeft style which will be applied to CornerTopLeft DIV.

background: url(../Images/TopLeft.png) 0 0 no-repeat rgb(237,28,36);

Note the last div#Content which was placed to style the Content DIV making the contents placed centered so the final output will be nicer.