ASP.NET Ajax client-side framework failed to load And\Or 'Sys' is undefined

My ASP.NET application with AJAX controls suddenly started giving script errors in IE8, but it worked perfectly alright in Chrome and Firefox.

Microsoft JScript runtime error: ASP.NET Ajax client-side framework failed to load.
Microsoft JScript runtime error: 'Sys' is undefined

The error was as below in VS.

 In IE8, you can notice the error at left corner of status bar.

Spent 2 days, tried all different option including

a) Modifying web.config
b) Enabling Javascript in IE
c) Restoring IE default settings
d) Removing and adding AjaxControlToolkit.dll in VS2008.
e) Adding axd extension in IIS.

But no luck. I even created new web application with one page and one AJAX control, the same error appeared when i hit F5 in VS2008. But i browse the page in Chrome or Firefox it worked like charm. That concluded me there was nothing wrong in my app.
Exisiting applications hosted in different server showed script error in my IE8 window but worked on others machine.

Atlast, found the solution at http://stackoverflow.com/a/8522460, thanks to Chris Hammond.

Solution is, this could be a caching/compression issue and by putting in the following into Web.Config, resolves the issue.

  <system.web.extensions>
    <scripting>
      <scriptResourceHandler enableCaching="false" enableCompression="false" />
    </scripting>
  </system.web.extensions>
     

Adding instance of WebUserControl to ASP.Net website project

It can easily be done using namespaces. Here's an example:




WebControl1.ascx:



Notice that Inherits references the namespace (MyUserControls), and not just the class name (WebControl1)



WebControl1.ascx.cs:



namespace MyUserControls { public partial class WebControl1 : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) { } } } Notice that the class have been included in the namespace MyUserControls



Default.aspx.cs:



using MyUserControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { var control = (WebControl1) Page.LoadControl("~/WebControl1.ascx"); } } This approach potentially allow you to redistribute your user controls (or keep them in a separate project) without the hassle of referencing them in your .aspx files.

ASP.Net AJAX CalendarExtender - Get selected date from ReadOnly TextBox

In this article I will explain a very common issue faced while using the ASP.Net AJAX Control Toolkit CalendarExtender control.
Issue
Whenever for the ASP.Net Textbox if the ReadOnly property of the Textbox is set to true, the selected data is not available in the Text property of the Textbox on PostBack.

Reason

The reason behind this issue is that whenever value of an ASP.Net Textbox is set to ReadOnly and the value of the textbox is set client side using client side script like JavaScript, in such cases the value of the Textbox is not available in the Text property of the ASP.Net Textbox. The ASP.Net AJAX Control Toolkit CalendarExtender makes use of JavaScript to set the selected date in the Textbox.

Solution

The solution to the issue is making use of Request.Form collections. As this collection has values of all fields that are posted back to the server and also it has the values that are set using client side scripts like JavaScript.

Thus we need to do a small change in the way we are fetching the value server side.

C#

protected void Submit(object sender, EventArgs e)
{
string date = Request.Form[txtDate.UniqueID];
}

As you can see above I am fetching the value of the Textbox from the Request.Form collection using the UniqueID property of the Textbox which is nothing but Client Side name of the ASP.Net TextBox control
The screenshot below describes that the selected date value is now available server side when fetched using the Request.Form collection

Read Text value from ReadOnly TextBox

Some time we need to make textbox read-only for showing data. If we make textbox read-only at the designer setting as below, then the textbox always returns blank in the code behind.



Here I am giving you an example of the issue and the solution.
For date picker I used ASP.NET AJAX 's Calendar extender that can be attached to any ASP.NET TextBox control only. And in the textbox I don't want that user directly write any text.
For achieving this, if I make textbox read-only then at the server side textbox.text will come as blank(empty).
Solution




In code behind add an attribute.

txtDate.Attributes.Add("readonly", "readonly");

By doing this we can retrieve read-only textbox's value in the code behind.

Color coding List item based on date

We had a need to maintain a set of books as library. I decided to go with SharePoint list with 'Issued Date' as DateTime column and 'Due Date' column as calculated column (Issued Date + 14 days).
The formula for 'Due Date' is =[Issued Date]+14

Added one more column of type 'Yes\No' with name 'Returned' to note if the book has been returned or not.

Ok, now i have to display the row in yellow(or light pink) if today's date is just 3 days or less away from 'Due Date', make it red if today's date is 'Due Date' or crossed. All other rows in green.
To do this on client side, CEWP had to be added to the page as the last WebPart.
The script to check for the date and change the row color was

<script type="text/javascript">
// Change these variables to suit your needs
var green = 3; // Items this many days out will be green
var yellow = 1; // Items that are this many days or more are yellow

var tbls = document.getElementsByTagName("TABLE");
var col = new Array();
for (var t in tbls) {
if (tbls[t].className == "ms-listviewtable") {
var rows = tbls[t].childNodes[0].childNodes;
var hRow = rows[0].getElementsByTagName("TH");
for (i=0;i<hRow.length;i++) {
col[i] = (hRow[i].innerText || hRow[i].textContent) + "";
col[i] = col[i].replace(/n/,"");
}
for (r=1;r<rows.length;r++) {
for (c=0;c<col.length;c++) {
if ((col[c] == 'Due Date') && (rows[r].childNodes[c+1].innerText == 'No')) {
colorIt(rows[r],rows[r].childNodes[c],green,yellow);
}
}
}
}
}

function colorIt(row,x,green,yellow) {
var strDate = x.innerText || x.textContent;
var dt1 = parseInt(strDate.substring(0,2),10);
var mon1 = parseInt(strDate.substring(3,5),10);
var yr1 = parseInt(strDate.substring(6,10),10);
mon1 = mon1 - 1;

var startDate = new Date(yr1, mon1, dt1);
var today = new Date();
var toDate = new Date(today.getFullYear(), today.getMonth() , today.getDate());
var dateDiff = (startDate - toDate )/86400000;;

if (dateDiff > green) {
row.style.backgroundColor='#66FF99';
} else if (dateDiff >= yellow) {
row.style.backgroundColor='Pink';
}
else
{
row.style.backgroundColor='#CC0066';
}
}
</script>

Color Coded SharePoint Calendar

Once i had to give different color for the Calendar items. Below are the steps i followed

1. Created one Calculated Column with title 'ColorTitle'
2. Added the formula

="<div style='border: 1px solid #009933; padding: 3px; margin: 0px; background-color: #FFFFB0; color: #009933'>"&Title&"</div>"

3. Edited the default view as below
     a. Chose 'ColorTitle' for Month View Title
     b. Chose 'ColorTitle' for Week View Title


Saved the view. Thats all :)

Note: You can change the color based on a field value by slightly modifiying the formula.

Hide fields of SharePoint Calendar

I wanted a Calendar in my team site without fields 'Recurrence' and 'Workspace'. Since it was production server, i cannot do any custom coding, installation or configuration and even i cannot use any tool to tweak the fields.
So, the solution is to do with JavaScript + CEWP.
Go to the Display.aspx form and EditForm.aspx through an  item in calendar and bring the page into edit more to include the CEWP.

One trick to bring the Displayform or editform to edit mode, just append "toolpaneview=2" after ".aspx" in the address bar of browser
.......DisplayForm.aspx?toolpaneview=2 or
-----EditForm.aspx?toolpaneview=2

Add CEWP to the bottom of page. Add the following script to the CEWP

<script type="text/javascript">
var trs = document.getElementsByTagName("TR");</P><p>
for (var r in trs) {
var row = (trs[r].innerText
trs[r].textContent)+"";
if (row.match(/^Workspace/)) { trs[r].style.display = "none"; }
if (row.match(/^Recurrence/)) { trs[r].style.display = "none";}
}
</script>