Anthem.NET and .NET 4.0

Solution for making Anthem.NET works in .NET 4.0 project.

Problem

Anthem.NET Ajax library written by Jason Diamonds supports only ASP.NET 1.1 and ASP.NET 2.0. This library is totally depending on the classic client id generation. When we upgraded our project to .NET 4.0, we found that the pages that use Anthem.NET doesn’t work anymore.

Please refer to the following links below to see ASP.NET 4.0 breaking changes.

ASP.NET 4.0 breaking changes

ClientIDMode.

Solution

The solution for this issue is very simple. You can set the compatibility mode to 3.5 in web.config and then Anthem.NET will work without changing anything.

Here is the code that you copy.


<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">

<controls>

<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

<add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

</controls>

</pages>

Download

I converted the existing project to .NET 4.0 as well. You can download it from the link below.

Script#: C# to Javascript Converter

Have you heard about Script#? I heard about this toolkit last week even Nikhil started this project last year. I knew that there is a Java-to-Javascript converter called GWT (Google Web Toolkit) in Java World since long time back and I thought that it might be good if we, the C# developers, also have that kinda tools for ASP.NET web development. Now, the dream come true. Nikhil created Script# project that can convert the C# code to Javascript. I think it is pretty interesting (and strange ) tool and I wonder how Script# will convert the C# code to Javascript. Anyway, I started learning about Script# on last Friday. I’m gonna share what I have learnt about it so far. If you are already familiar with this tool, please share your thoughts about this tool. Thanks.

Introduction

Script# is a compiler that generate the Javascript instead of MSIL (Microsoft Intermediate Language) from C# sourcecode. Like GWT (Google Web Toolkit) that can convert the Java code to browser-compliant JavaScript and HTML, Script# is able to convert the C# codes to Javascript (either human-readable format or compact one). It is the best tool for those who hate to write the Javascript in HTML view.

Sourcecode Download : SSharp.zip

Example 1 : Getting Started with Script#

  • Download the ScriptSharp.zip from this link.
  • Extract it and double-click ScriptSharp.msi to install the Script# (You should note that Script# is currently available for Microsoft Visual Studio 2005. If you wanna use Script# with Visual Studio 2008, please check-out this post.)
  • Launch the Microsoft Visual Studio 2005 IDE and let’s create very sample Script# project
    Note: I recommended you to run the VS 2005 IDE as an administrator if you are using Windows Vista series.

  • Click “Script#-Enabled Web site” Project Template from “New Web Site” dialog (File>New>Web Site)
  • We will create one button named “clickMeButton” and the div called “greetingDIV” within
    tag.
    <div>
    <input type="button"  id="clickmeButton" value= "Click Me" />
    <br />
    <br />
    <div id="greetingDIV" class="divbox">
    Hello buddy!!
    </div>
    </div>
    

  • Go to the design-view and right-click on “Scriptlet” control as picture belowScript# - Scriptlet Control
  • Select “Edit C# Code” on content menu.
  • Paste the following code in Scriptlet Editor
    using System.DHTML;
    using ScriptFX;
    using ScriptFX.UI;public class MyScriptlet : IDisposable {private DOMEventHandler _clickHandler;
    
    private MyScriptlet(ScriptletArguments arguments) {
    _clickHandler = new DOMEventHandler(OnClickMeButton_Click);
    
    DOMElement clickMeButton = Document.GetElementById("clickmeButton");
    clickMeButton.AttachEvent("onclick", _clickHandler);
    }
    
    public static void Main(ScriptletArguments arguments) {
    MyScriptlet scriptlet = new MyScriptlet(arguments);
    
    }
    
    public void Dispose() {
    if (_clickHandler != null) {
    DOMElement okButton = Document.GetElementById("clickmeButton");
    okButton.DetachEvent("onclick", _clickHandler);
    _clickHandler = null;
    }
    }
    
    private void OnClickMeButton_Click() {
    DOMElement divGreeting = Document.GetElementById("greetingDIV");
    divGreeting.Style.Display = "block";
    }
    }
    

    Script# - Scriptlet Editor

  • Click “Save and Close” on Scriptlet Editor
  • Build the web application and Press “F5” to run the application
  • (There is one button on the page.) Click this button.
  • “Hello Buddy!” message will be shown as picture below.Script# - Example 1

That’s.. You just created one script#-enabled webpage. Do you want to know what code Script# generated from your C# code? It’s easy. Just go to “View Source” and you will see the following script which is generated by Script#.

<script type="text/javascript">
//<!&#91;CDATA&#91;
window.main = function main() {
Type.createNamespace('Scriptlet');

////////////////////////////////////////////////////////////////////////////////
// Scriptlet.MyScriptlet

Scriptlet.MyScriptlet = function Scriptlet_MyScriptlet(arguments) {
this._clickHandler = Delegate.create(this, this._onClickMeButton_Click);
var clickMeButton = $('clickmeButton');
clickMeButton.attachEvent('onclick', this._clickHandler);
}
Scriptlet.MyScriptlet.main = function Scriptlet_MyScriptlet$main(arguments) {
var scriptlet = new Scriptlet.MyScriptlet(arguments);
}
Scriptlet.MyScriptlet.prototype = {
_clickHandler: null,

dispose: function Scriptlet_MyScriptlet$dispose() {
if (this._clickHandler) {
var okButton = $('clickmeButton');
okButton.detachEvent('onclick', this._clickHandler);
this._clickHandler = null;
}
},

_onClickMeButton_Click: function Scriptlet_MyScriptlet$_onClickMeButton_Click() {
var divGreeting = $('greetingDIV');
divGreeting.style.display = 'block';
}
}

Scriptlet.MyScriptlet.createClass('Scriptlet.MyScriptlet', null, IDisposable);

// ---- Do not remove this footer ----
// Generated using Script# v0.4.2.0 (http://projects.nikhilk.net)
// -----------------------------------

ScriptFX.Application.current.run(Scriptlet.MyScriptlet);
}
ScriptHost.initialize(&#91;
'App_Scripts/ssfx.Core.js',
'App_Scripts/ssfx.UI.Forms.js'
&#93;);
//&#93;&#93;>
</script>

Don’t you think that the generated Javascript code looks so similar to your C# code that you wrote in Scriptlet Editor? Yes. This is one of the advantages of using Script#. It can generate the human-readable Javascript that has the same structure as your C# code. If you are not sure how to write the object-oriented code in Javascript, you can just write the code in C# with the rich features such as IntelliSense, refactoring, compile-time and let Script# convert the C# code to the object-oriented Javascript code.

Note: The sample is already attached in this post. Please check-out “Example1.aspx” in zip file.

Okay. We’ve just done one sample with Script#. As the project is in very early stage, I notice that there are a few weak points and bugs in that project while I’m learning. And also, I’m kinda agreed with Dimitri Glazkov regarding on Script# project. (Check-out his post here.) Anyway, let’s learn more about Script# and we’ll see whether we should use it in real project or not.

Example 2 : Script# Ajax

  • Create the another Script#-enabled project
  • Add the “Generic Handler” to your project and name it “ExampleWebHandler.ashx”
  • Paste the following code in “ProcessRequest (HttpContext context)” function.
    context.Response.ContentType = "text/xml";
    context.Response.Write("Hi " + HttpUtility.HtmlEncode(context.Request.QueryString["name"]) + "!"); 

    Note: What this code does is that write the “Hi” after appending the name that came as a parameter in response.

  • Add one textbox to accept the user inputs, one button to invoke the server-side script and the div for displaying the result
    <div>
    Please Enter your name : &nbsp;&nbsp;
    <input type="text" id="nameTextBox" /> &nbsp;&nbsp;
    <input type="button" id="sayHiButton" value="Say Hi!!"/> <br /><br />
    <div id="result">
    </div>
    </div>
    
  • Add the argument to your scriptlet control. (Right-click on Scriptlet control and select “Edit” Arguments. then, Add one member (Name: name and Value: ExampleWebHandler.ashx?name={0}))

    Edit Arguments - ScriptletArgument Collection Editor

  • then, Click “OK” to close the “ScriptletArgument Collection Editor”
  • Paste the following code in “Scriptlet Editor”
    using System;
    using System.DHTML;
    using ScriptFX;
    using ScriptFX.UI;
    using ScriptFX.Net;
    
    public class MyScriptlet : IDisposable {
    
    private string _urlName;
    private DOMEventHandler _clickHandler;
    private XMLHttpRequest _request;
    DOMElement resultDIV = null;
    
    public static void Main(ScriptletArguments arguments) {
    MyScriptlet scriptlet = new MyScriptlet(arguments);
    }
    
    public void Dispose() {
    if (_clickHandler != null) {
    DOMElement okButton = Document.GetElementById("sayHiButton");
    okButton.DetachEvent("onclick", _clickHandler);
    _clickHandler = null;
    }
    if (_request != null) {
    _request.Onreadystatechange = (Callback)Delegate.Null;
    _request.Abort();
    _request = null;
    }
    }
    
    private MyScriptlet(ScriptletArguments arguments) {
    _urlName = arguments.name;
    
    _clickHandler = new DOMEventHandler(OnSayHiButton_Click);
    
    DOMElement clickMeButton = Document.GetElementById("sayHiButton");
    clickMeButton.AttachEvent("onclick", _clickHandler);
    }
    
    private void OnSayHiButton_Click() {
    InputElement nameTextBox = (InputElement)Document.GetElementById("nameTextBox");
    resultDIV = Document.GetElementById("result");
    resultDIV.Style.Display = "block";
    
    _request = new XMLHttpRequest();
    _request.Onreadystatechange = this.OnRequestComplete;
    _request.Open("GET", String.Format(_urlName, nameTextBox.Value.Escape()), /* async */ true);
    _request.Send(null);
    }
    
    private void OnRequestComplete() {
    if (_request.ReadyState == 4) {
    //if (_request.Status == 200) {
    _request.Onreadystatechange = (Callback)Delegate.Null;
    if (resultDIV != null) {
    resultDIV.ClassName ="divbox";
    resultDIV.InnerHTML = _request.ResponseText;
    }
    _request = null;
    // }
    }
    else {
    if (resultDIV != null) resultDIV.InnerHTML = @"<img src=""./images/indicator_technorati.gif"">";
    }
    }
    }
    

    Note: I assumed that you already have some ideas about Ajax before reading this article.

  • Build the application and run it. (You will see one textbox and one button as you have added on the page.)
  • Type the name you like
  • Click “Say Hi!” button. (You will see the result as below with the name that you enter.)

This demo is very sample that shows the way how to communicate between Script# code and the Server-side code. You can probably extends the web handler to get the more features as you need for your Script#-enabled application.

Debugging the Script#-enabled application

For IE Users, Go to “Debug->Windows->Script Explorer” or Press “Ctl+Alt+N” while you are running the project. You will see the list of script files that are included in page. Select the script file that you wanna debug and set the breakpoint. You know how to debug the Javascript with Visual Studio 2005, right?

For Firefox Users, Firebug is the best tool for debugging the Javascript.

Yeah. It is so sad to say that you are not able to debug the C# code that you wrote. Instead, you will be debugging the Javascript code which is generated by Script# compiler.. It makes you feel like debugging the MSIL code after writing the C# in IDE even the generated code is so much like the C# code that you wrote and human-readable but it is by-design so we can do nothing.

Conclusion

I’m gonna stop learning the Script# project for today. I’ll read about building the Script# library and Vista Sidebar Gadget and will post them in my blog. For the time being, I do have a few disappointments in using Script#. However, I will look more information about this project and I will share the conclusion with you.. If you are also learning this project like me, please let me know. We can probably discuss more about this project.. Thanks…

More Information about Script# ~

Microsoft ASP.NET Ajax SourceCode

ASP.NET 2.0 AJAX Extensions 1.0 Source Code
Download

MS published the full source code to the ASP.NET AJAX product. The client-side JavaScript library has been released under Microsoft Permissive License (Ms-PL). This Javascript library is available to download here. The server-side implementation has been released under Microsoft Reference License (Ms-RL). You can download it here.

More Info : ScottGu’s Blog – ASP.NET AJAX 1.0 Source Code Released

After installing the setup file “ASPAJAXSourceCode.msi”, you can find the sourcecode under the following location.

%programfiles%\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\Source

Problems in compiling the sourcode?
(I know. :) ) Please read this post “Build your own modded System.Web.Extensions.dll“.

ASP.NET AJAX Documentation
Download

You can also download the documentation of ASP.NET Ajax in your machine so that you can read the doc anytime you want from your IIS.

docs.jpg

Note: Please read “ReadMe.txt” for setting up.

AJAX Control Toolkit (with Source Code)
Download
View the Toolkit (Live)

[Videos] ASP.NET Ajax
You can find dozens of videos designed for ASP.NET Ajax developers on this page.
http://www.asp.net/learn/videos/default.aspx?tabid=63#ajax

Cool.. isn’t it? :)

Ajax – Actuvity Indicators

If you were Ajax Developer then you would like to have some cool GIFs that can be used as Activity Indicators for your Ajax-enabled website.

Here are the some free animation images for Activity Indicators. Thanks to ScottGu.

AJAX Activity Indicators
http://www.napyfab.com/ajax-indicators/

AJAX Load – Indicator Generator
http://www.ajaxload.info/

Activity Indicators
http://mentalized.net/activity-indicators/

Look at the sample images below~

           

Microsoft Atlas – Ajax

From: Michael Sync
Sent: Friday, June 02, 2006 10:26 AM
Subject: [Sharing our knowledge] Atlas – Ajax Toolkit

Ajax comes out wth the several advantages such as the richer user experiense, no-more time for postback and so on… but there are also a ton of weak points behind this… if you wanna be an Ajax <web> developer, you hav to know the gr8 deal of Javascript (ECMA Script), XML, CSS and (Oh.. of course) DHTML/HTML. The most important thing is XML HTTP Request Object…and also, you need to know various kinda browsers (eg: IE, Mozilla-based, Safari, Opera and so on.) because, some pieces of codes (eg: DIV or Layout, Microsoft.XMLHTTP or MSXML2.XMLHTTP and …) which are wokring fine on one kinda brower might not work properly on the other kinda browsers.. And Also, you need to write TOO MUCH of client script codes for ajax application and it’s also very difficult to debug. (P.S: If you were C, C+ or Classic ASP/PHP developer, it might not be too difficult for you.. but if you were .NET guy then you will be in troubles. :-) ).. < Sorry for long introduction.. :).. >

So, We like to have something which is automatically done those tasks for us.. …….
Now, Microsoft hav created gr8 client-side framework called Atlas for Ajax application and this framework has been integrated with ASP.NET 2.0 server-based dev framework..This framework can be downloaded from the following link..

“Atlas” is a free framework for building a new generation of richer, more interactive, highly personalized standards based Web applications.

Atlas: Official Web Site – Microsoft
http://atlas.asp.net/Default.aspx?tabid=47

ScottGu’s Blog
http://weblogs.asp.net/scottgu/archive/2005/06/28/416185.aspx

Get Started with “Atlas”
http://atlas.asp.net/Default.aspx?tabid=47

Life is nice! :P

Regards,
Michael Sync

Notes: ECMA : European Computer Manufacturers Association

OpenSouce Kits – xBox

LightBox

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

LightBox - Javascript

Version 1 ~
http://www.huddletogether.com/projects/lightbox/
Version 2 (Source and Demo) ~
http://www.huddletogether.com/projects/lightbox2/

iBox

ibox.PNG

Source ~
http://www.ibegin.com/blog/p_ibox.html

Demo ~
http://www.ibegin.com/ibox/ibox-test.html

Thick Box

One box to rule them all..

thick-box.PNG

Source ~
http://codylindley.com/Javascript/257/thickbox-one-box-to-rule-them-all

Demo ~
http://jquery.com/demo/thickbox/

Greybox

greybox.PNG

Source ~
http://orangoo.com/labs/GreyBox/

Demo ~
http://amix.dk/greybox/demo.html

GreyBox – Redux

greybox-redux.PNG

Source and Demo ~
http://jquery.com/blog/2006/02/10/greybox-redux/

Yahoo UI Library

The Container family of components is designed to enable developers to create different kinds of content-containing modules on the web. Module and Overlay are the most basic containers, and they can be used directly or extended to build custom containers. Also part of the Container family are four UI controls that extend Module and Overlay: Tooltip, Panel, Dialog, and SimpleDialog.

Yahoo UI Library

Source and Demo ~

Yahoo! UI Library: Container
Yahoo! UI Library

UPDATED:ExtJS

Cool and very popular Javascript Library.

extjs.gif

Download and Demo : http://extjs.com/
Note: Please let me know if I missed out something. Thanks.