Archive for the ‘Web’ Category

Today a friend of mine started getting this error while he tried to deploy his solution to a server. This only started when ‘Precompiling during publishing’ option is selected.

image

“Error 20 It is an error to use a section registered as allowDefinition=’MachineToApplication’ beyond application level. This error can be caused by a virtual directory not being configured as an application in IIS.”

After having a look, I identified this was caused by a temporary copy of a Web.Config file. Earlier developer created a copy of the Web.Config and placed it inside a folder named Backup within the solution. This backup config file had authentication tag (<authentication>), which is a tag that can be only used in global Web.Config file or the Web.Config file in applications root. Due to the presence of authentication tag, compiler started complaining that there is a virtual directory not configured as a application in IIS.

The solution for my friend’s issue was to simply exclude the copy of the Web.Config file from project by right clicking the file. Then the project started deploying happily.

Request Filtering

I recently got this error in one of my applications. When troubleshooting, I found my application is configured to have the default value of 30000000 Bytes for the content length, which was not sufficient for me in some of the file uploading functionalities.

Simply adding / increasing the number in the configuration file corrected this error.

Request Content Length in Bytes.

Default Value – 30000000 Bytes (~28MB)

Maximum Value – 4284229877 Bytes (3.99GB)

  1. <system.webServer>
  2.   <security>
  3.     <requestFiltering>
  4.       <requestLimits maxAllowedContentLength=100000000></requestLimits>
  5.     </requestFiltering>
  6.   </security>
  7.   …
  8. </system.webServer>

 

To obtain more information read this article.

imageimage

Sometime back I started getting this error in all the forms in which AJAX tools were used. The thing worried me most is that there were no changes made to the project source code. Later a friend of mine found that it is happening because of the wrong AjaxControlToolkit.

As I feel this dll swap happens when a control is dragged from the Visual Studio toolbox because the toolbox is referenced to a newer version of the toolkit than the project was using.

If you are also getting this error simply delete all the AJAX related files and folders in your projects’ bin directory. Once you are done there should not be any folders such as ar, cs, de, etc. Also remove the AjaxControlToolkit.dll. Then copy the version of the toolkit dll your project was using earlier to the Bin directory. Now clean and build your project to see the error disappear.

If you are still getting the error after correctly doing all this you might be getting the error due to another reason causing the same error. Since there are many reasons for this same error you better check the internet for other reasons to find out the exact reason causing the error for you.

Recently I encountered a positioning error in AJAX calendar extender. When I use the calendar extender inside of other container controls the popup calendar started appearing few inches above the button. You will be able to get an idea of the problem by the following image.

image

Since I couldn’t get it fixed by changing the properties I thought to find a solution for this.

One way to correct this is by applying a CSS style sheet to change the calendar positioning manually. I found this method while searching the web. This way since you need to enter the location of the calendar you need to try several times to get the correct positioning. If you are using this method simply place the following CSS style in your page and apply the style as shown. Remember you need to change the value to suit your form.

  1. <style type="text/css">
  2.     .fromDtPos
  3.     {
  4.         left: 245px !important;
  5.     }
  6. </style>

Apply the style to your calendar extender.

  1. <cc2:calendarextender id="calExpiry" runat="server" targetcontrolid="txtExpiry"
  2.     format="dd MMM yyyy" popupbuttonid="imgExpiry" enabled="True" cssclass="ajax__calendar fromDtPos">
  3. </cc2:calendarextender>

My preferred way to do this is by using the JavaScript that I wrote below. Since you do not need to enter the position manually this will be easier. Also this code will work irrespective of the number of parent containers it is having above of the control.

Insert the below JavaScript into your page.

  1. <script type="text/javascript" language="javascript">
  2.     function showCalendar(sender, args) {
  3.         var processingControl = $get(sender._button.id); // Getting the control which triggered the calendar.
  4.         sender._popupDiv.parentElement.style.top = processingControl.offsetTop + processingControl.height + ‘px’;
  5.         sender._popupDiv.parentElement.style.left = processingControl.offsetLeft + ‘px’;
  6.  
  7.         var positionTop = processingControl.height + processingControl.offsetTop;
  8.         var positionLeft = processingControl.offsetLeft;
  9.         var processingParent;
  10.         var continueLoop = false;
  11.  
  12.         do {
  13.             // If the control has parents continue loop.
  14.             if (processingControl.offsetParent != null) {
  15.                 processingParent = processingControl.offsetParent;
  16.                 positionTop += processingParent.offsetTop;
  17.                 positionLeft += processingParent.offsetLeft;
  18.                 processingControl = processingParent;
  19.                 continueLoop = true;
  20.             }
  21.             else {
  22.                 continueLoop = false;
  23.             }
  24.         } while (continueLoop);
  25.  
  26.         sender._popupDiv.parentElement.style.top = positionTop + ‘px’;
  27.         sender._popupDiv.parentElement.style.left = positionLeft + ‘px’;
  28.     }
  29. </script>

Then call the function showCalendar on onClientShown event of the calendar extender as seen below.

  1. <cc2:calendarextender id="calExpiry" runat="server" targetcontrolid="txtExpiry"
  2.     format="dd MMM yyyy" popupbuttonid="imgExpiry" enabled="True" onclientshown="showCalendar">
  3. </cc2:calendarextender>

Both of the above methods will correct the appearance of the popup calendar of the AJAX Calendar Extender as seen below.

image

Recently in one of my machines I got the above HTTP error when running an application hosted on IIS 7. The detailed error was as below.

IIS Error

“This configuration section cannot be used at this path. This happens when the section is locked at a parent level. Locking is either by default (overrideModeDefault="Deny"), or set explicitly by a location tag with overrideMode="Deny" or the legacy allowOverride="false".”

After doing some troubleshooting I was managed to get this error fixed by reinstalling ASP.Net by running the aspnet_regiis –ir command.

For more information on running the command please refer to my old article Unable to start debugging on the web server.

When you put an Ajax Calendar Extender inside of a GridView you will see the calendar without any styling on it meaning the calendar will show only the dates overlapping with other items on your form. Sometimes some dates might even be missing. See the sample appearances below.

imageimageimage

This happens because the style sheets are not loaded at the correct time due to a bug in toolkit, there are several ways to fix this.

One is to add another calendar extender outside of the update panel and keep it hidden.

Another is to disable partial rendering in the script manager. But this will slow down your site reducing the benefits gained from AJAX.

  1. <asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="false" runat="server">
  2. </asp:ScriptManager>

My chosen method is to add the styles manually to the style sheet. To move forward this way simply copy the following styles which are used by the calendar extender to your style sheet.

  1. .ajax__calendar_container {padding:4px;cursor:default;width:170px;font-size:11px;text-align:center;font-family:tahoma,verdana,helvetica;}
  2. .ajax__calendar_body {height:139px;width:170px;position:relative;overflow:hidden;margin:auto;}
  3. .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years {top:0px;left:0px;height:139px;width:170px;position:absolute;text-align:center;margin:auto;}
  4. .ajax__calendar_container TABLE {padding:0px;margin:0px;font-size:11px;}
  5. .ajax__calendar_container TD {padding:0px;margin:0px;font-size:11px;}
  6. .ajax__calendar_header {height:20px;width:100%;}
  7. .ajax__calendar_prev {cursor:pointer;width:15px;height:15px;float:left;background-repeat:no-repeat;background-position:50% 50%;background-image:url(../images/arrow-left.gif);}
  8. .ajax__calendar_next {cursor:pointer;width:15px;height:15px;float:right;background-repeat:no-repeat;background-position:50% 50%;background-image:url(../images/arrow-right.gif);}
  9. .ajax__calendar_title {cursor:pointer;font-weight:bold; margin-left:15px; margin-right:15px;}
  10. .ajax__calendar_footer {height:15px;}
  11. .ajax__calendar_today {cursor:pointer;padding-top:3px;}
  12. .ajax__calendar_dayname {height:17px;width:17px;text-align:right;padding:0 2px;}
  13. .ajax__calendar_day {height:17px;width:18px;text-align:right;padding:0 2px;cursor:pointer;}
  14. .ajax__calendar_month {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
  15. .ajax__calendar_year {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
  16.  
  17. .ajax__calendar .ajax__calendar_container {border:1px solid #646464;background-color:#ffffff;color:#000000;}
  18. .ajax__calendar .ajax__calendar_footer {border-top:1px solid #f5f5f5;}
  19. .ajax__calendar .ajax__calendar_dayname {border-bottom:1px solid #f5f5f5;}
  20. .ajax__calendar .ajax__calendar_day {border:1px solid #ffffff;}
  21. .ajax__calendar .ajax__calendar_month {border:1px solid #ffffff;}
  22. .ajax__calendar .ajax__calendar_year {border:1px solid #ffffff;}
  23.  
  24. .ajax__calendar .ajax__calendar_active .ajax__calendar_day {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
  25. .ajax__calendar .ajax__calendar_active .ajax__calendar_month {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
  26. .ajax__calendar .ajax__calendar_active .ajax__calendar_year {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
  27.  
  28. .ajax__calendar .ajax__calendar_today .ajax__calendar_day {border-color:#0066cc;}
  29. .ajax__calendar .ajax__calendar_today .ajax__calendar_month {border-color:#0066cc;}
  30. .ajax__calendar .ajax__calendar_today .ajax__calendar_year {border-color:#0066cc;}
  31.  
  32. .ajax__calendar .ajax__calendar_other .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff;color:#646464;}
  33. .ajax__calendar .ajax__calendar_other .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff;color:#646464;}
  34.  
  35. .ajax__calendar .ajax__calendar_hover .ajax__calendar_day {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
  36. .ajax__calendar .ajax__calendar_hover .ajax__calendar_month {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
  37. .ajax__calendar .ajax__calendar_hover .ajax__calendar_year {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
  38.  
  39. .ajax__calendar .ajax__calendar_hover .ajax__calendar_title {color:#0066cc;}
  40. .ajax__calendar .ajax__calendar_hover .ajax__calendar_today {color:#0066cc;}
  41.  
  42. /* styles for invalid dates as defined by startDate and endDate*/
  43. .ajax__calendar .ajax__calendar_invalid .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff; color:#646464; text-decoration:line-through; cursor:default;}
  44. .ajax__calendar .ajax__calendar_invalid .ajax__calendar_month {background-color:#ffffff;border-color:#ffffff; color:#646464; text-decoration:line-through; cursor:default;}
  45. .ajax__calendar .ajax__calendar_invalid .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff; color:#646464; text-decoration:line-through; cursor:default;}
  46.   .ajax__calendar .ajax__calendar_invalid .ajax__calendar_today{visibility:hidden; cursor:default;}

Note that the above CSS uses the “arrow-left.gif” and “arrow-right.gif” for the previous and next buttons. If you want, you can use any other image which suits you. In case you need the originals they are below. To correctly show the previous and next buttons you need to place these images on to the “Images” folder under your project. If the folder is different in your project please change the image paths in the above CSS.

  • arrow-left.gif – arrow-left
  • arrow-right.gif – arrow-right

After doing all this remember to link the style sheet to your web page.

  1. <link href="Styles/Site.css" rel="stylesheet" type="text/css" />

If you have done everything correctly your calendar will be shown properly while residing inside of the grid.

image

Ways to reload a page using Java script.

When doing web development if you need to reload / refresh a page using Java script, you can use one of the following three methods.

  1. <script language="javascript" type="text/javascript">
  2.     function ReloadMethod1() {
  3.         window.location.href = window.location.href;
  4.     }
  5.     function ReloadMethod2() {
  6.         window.location.reload();
  7.     }
  8.     function ReloadMethod3() {
  9.         history.go(0);
  10.     }
  11. </script>
  12. <input type="button" value="Reload" onclick="window.location.href=window.location.href" />
  13. <%–Calling Javascript function on button click.–%>
  14. <input type="button" value="Reload" onclick="ReloadMethod2()" />
  15. <input type="button" value="Reload" onclick="window.location.reload()" />
  16.  
  17. <!– ASP Buttons –>
  18. <asp:Button ID="Button1" runat="server" Text="Reload" OnClientClick="window.location.href=window.location.href" />
  19. <%–Calling Javascript function on button click.–%>
  20. <asp:Button ID="Button2" runat="server" Text="Reload" OnClientClick="ReloadMethod2()" />
  21. <asp:Button ID="Button3" runat="server" Text="Reload" OnClientClick="ReloadMethod3()" />

Today while trying to do some formatting on Excel using .Net I came up with an error.

One of the things I tried is to make Excel columns automatically size according to the content having on them. As all of you might know we can get this done in Excel by simply double clicking on the column’s right margin. While doing this in code I got the following exception.

ExcelSheet.get_Range("A1", "E10")’ threw an exception of type ‘System.Runtime.InteropServices.COMException’
base {System.Runtime.InteropServices.ExternalException}: {"Exception from HRESULT: 0x800401A8"}

The code involved in generating this error is as below.

  1. (ExcelSheet.get_Range("A1", "E10")).EntireColumn.AutoFit();

Later I found the reason for this error. Error will occur when we use AutoFit () on empty cells. Because initially I did not have anything in my excel sheet I kept on getting this. So to overcome this error use the same code to auto fit the cell contents simply after the cells are populated with values.

If you cannot get AutoFit () to work the reason might be the same thing. make sure the cells you apply auto fit have some values on them.

The best thing is to use AutoFit () after all data are entered into Excel sheet.

If you are into programming you should have definitely worked with calculated fields in SQL. But for others I will briefly explain what they are.

Calculated columns are columns which depend on other columns. It gets its value by calculating which can involve values of other columns. The calculation formula is the only thing stored in the column.

So each time the column is referenced the calculation is done. But if you use the keyword “persisted” while creating the column then the values will be kept in the table. Whenever a referenced value is updated the computed column is also automatically updated to highlight the change. Also by using persisted you can index a computed column.

You can create a table with persisted computed column as follows.

  1. CREATE TABLE Customer
  2. (
  3. CustomerId INT IDENTITY(1, 1) NOT NULL,
  4. CustomerFirstName NVARCHAR(100) NOT NULL,
  5. CustomerLastName NVARCHAR(100) NOT NULL,
  6. CustomerFullName AS CustomerFirstName + ' ' + CustomerLastName PERSISTED
  7. )

One thing to remember is that you cannot directly insert values to a computed column.

I think you got a basic idea of computed columns. Now I would like to show how to create a computed column dynamically. For example think that you need to add a computed column to a table using a stored procedure. It is not a big deal.

I need to insert a TotalOrder column to the table named FoodOrder.

  1. CREATE TABLE FoodOrder
  2. (
  3. OrderId INT IDENTITY(1, 1) NOT NULL,
  4. OrderDate SMALLDATETIME NULL,
  5. CustomerName NVARCHAR(100) NOT NULL,
  6. TotalStarter INT NULL,
  7. TotalMainCourse INT NULL,
  8. TotalSoftBevarage INT NULL,
  9. TotalLiquer INT NULL,
  10. TotalDessert INT NULL
  11. )

This can be done using the following query.

  1. DECLARE @sExecuteCommand VARCHAR(250), –Keepa the command to be executed.
  2. @sColumns VARCHAR(150) –Keeps the columns to be included in the formula.
  3.  
  4. SET @sColumns = 'TotalStarter+TotalMainCourse+TotalSoftBevarage+TotalLiquer+TotalDessert+'
  5. SET @sExecuteCommand = 'ALTER TABLE FoodOrder ADD TotalOrder AS ' + SUBSTRING(@sColumns, 1, LEN(@sColumns)-1) — Creating the computed column.
  6. EXEC (@sExecuteCommand)

Note that a cursor or a loop can be easily used to populate the variable “sColumns” with the columns required for the formula.

Hope this helps.

You can create nice looking expandable regions using just HTML and some Java scripting. This is specially useful if you are to create a site without any major programming languages. Today I thought to share an expandable region that I created to give you an idea to get it done.

When the code works it will look like the following.

imageimage

You should be excited by now, to get it working you need the following code inserted into a body section of a HTML file. Please note I have added the CSS also in to the page body, but if you have a separate CSS file please separate the CSS .

  1. <style type="text/css">
  2.     a.headingStyle
  3.     {
  4.         text-decoration: none;
  5.         margin-left: 0.5em;            
  6.     }
  7.     a.headingStyle:hover
  8.     {
  9.         text-decoration: underline;
  10.     }
  11.     a.headingStyle span.charStyle
  12.     {
  13.         font-family: monospace;
  14.         font-weight: normal;
  15.     }
  16.     .contentStyle
  17.     {
  18.         display: none;
  19.         margin-left: 1.5em;
  20.         margin-right: 0.5em;
  21.         margin-bottom: 0.5em;
  22.         border-width: thin;
  23.         border-style: outset;
  24.         background-color:#D2E3FF;
  25.     }
  26.     .upArrowStyle
  27.     {
  28.         height:32px;
  29.         background-image: url('Up_Arrow_32x32.png');
  30.         background-repeat:no-repeat;
  31.     }
  32.     .downArrowStyle
  33.     {
  34.         height:32px;
  35.         background-image: url('Down_Arrow_32x32.png');
  36.         background-repeat:no-repeat;
  37.     }
  38. </style>
  39.  
  40. <script type="text/javascript">
  41.     function display(item) {
  42.         if (document.getElementById) {
  43.             // Retrieving the first child item.
  44.             var firstChildItem = item.firstChild;
  45.             // Getting the correct child item with inner HTML text.
  46.             firstChildItem = item.firstChild.innerHTML ? item.firstChild : item.firstChild.nextSibling;
  47.             // Toggling the + or – according to the state after click.
  48.             firstChildItem.innerHTML = firstChildItem.innerHTML == '+' ? '-' : '+';
  49.             // Toggling the display image after click.
  50.             item.className = item.className == "downArrowStyle" ? "upArrowStyle" : "downArrowStyle";
  51.             // Get the sub item to toggle visibility.
  52.            var nextSubItem = item.parentNode.nextSibling.style ? item.parentNode.nextSibling : item.parentNode.nextSibling.nextSibling;
  53.             // Toggle visibility of the sub item.
  54.             nextSubItem.style.display = nextSubItem.style.display == 'block' ? 'none' : 'block';
  55.         }
  56.     }
  57.  
  58.     // Displaying everything if item could not be found.
  59.     if (!document.getElementById)
  60.         document.write('<style type="text/css"><!–\n .dspcont{display:block;}\n //–></style>');
  61. </script>
  62.  
  63. <!– If Java scripts are blocked, display everything expanded. –>
  64. <noscript>
  65.     <style type="text/css">
  66.         .dspcont
  67.         {
  68.             display: block;
  69.         }
  70.     </style>
  71. </noscript>
  72. <div>
  73.     <!– If + or – is required to be displayed besides the image simply change display:none; to display:block; in following sections. –>
  74.     <h1>
  75.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
  76.             <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 1</span>
  77.         </a>
  78.     </h1>
  79.     <div class="contentStyle">Title 1 content goes here.</div>
  80.     <h1>
  81.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
  82.             <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 2</span>
  83.         </a>
  84.     </h1>
  85.     <div class="contentStyle">
  86.         <h2>
  87.             <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
  88.             <span style="display:none;">+</span><span style="margin-left:34px;">Sub Title 1</span></a></h2>
  89.         <div class="contentStyle">
  90.             Sub title 1 content goes here.</div>
  91.         <h2>
  92.             <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
  93.             <span style="display:none;">+</span><span style="margin-left:34px;">Sub Title 2</span></a></h2>
  94.         <div class="contentStyle">
  95.             Sub title 2 content goes here.</div>
  96.     </div>
  97.     <h1>
  98.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
  99.         <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 3</span></a></h1>
  100.     <div class="contentStyle">Title 3 content goes here.</div>
  101. </div>

Remember to correct the image URLs, otherwise they will go missing.

I need to thank M. C. Matti for his great article which gave me this idea. Also you can use this method to create expandable regions in other sites which use different technologies. For example if you need to add this to a SharePoint site, just use a Content Editor web part and paste the code using Source Editor in web part properties.

Hope this helps.