CodePlex Foundation : Ajax Library Project

What is CodePlex Foundation?

logo[1] 

The CodePlex Foundation is a not-for-profit foundation created as a forum in which open source communities and the software development community can come together with the shared goal of increasing participation in open source community projects

(You can click on the image above to goto the website and learn more)

So the news of the day is that this foundation has created it’s first ‘gallery’, the ASP.NET Open Source Gallery.

What is a Gallery?

Galleries may be sponsored by a third-party organization, e.g. a commercial software company, or run by the Foundation. Galleries will rely on Foundation staff and volunteers to provide a set of support services, including administration, security, best practices and marketing.

Out of this gallery is the first project the ‘ASP.NET Ajax Library’.  This project has a wiki setup to learn more, get the source code, view some sample applications, etc…

http://www.asp.net/ajaxlibrary/

Head over to the ‘Learn’ section at http://www.asp.net/ajaxlibrary/learn.ashx it gives an overview of the capabilities of the library.

Some of the examples are interesting as they provide a ‘imperative’, ‘declarative’, and ‘jquery’ approach.

My ‘favorite’ example is the one on :

‘HOW TO Call ASP NET MVC Controller Actions’

I’ll snag a few snippets off that page in a shorter format – go read for the full instructions.

First, a controller action with model class:

public JsonResult GetCustomers()
{
    List<Customer> custs = new List<Customer>
    {
        new Customer
        {
            CustomerID = 1,
            FirstName = "John",
            LastName = "Doe",
            Age = 50
        },
        new Customer
        {
            CustomerID = 2,
            FirstName = "Jane",
            LastName = "Doe",
            Age = 47
        }
    };
    return Json(custs);
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

ASP. NET makes it easy to return data as Json out of the box as you can see above.

To then call this controller/action from the view:

<script src="../../Scripts/MicrosoftAjax/start.js" type="text/javascript"></script>
<script type="text/javascript">
    Sys.require([Sys.components.dataView, Sys.scripts.WebServices], function() {
        var dataView = Sys.create.dataView('#CustomersTemplate',
            {
                dataProvider: "/Home/GetCustomers",
                autoFetch: true
            });
    });
</script>


There is a ‘dataview’ defined above with the #CustomerTemplate referring to a html element on the page of id ‘CustomerTemplate’

ie.

<div id="CustomersTemplate" class="sys-template">
    {{FirstName}} {{LastName}}
</div>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

This should give you an idea, the other examples covering different topics are available, with sample code snippets and instructions on how to use the code.

I feel they have done a good job putting this together in a easy to follow manner, and the technology presented isn’t complex.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s