Derik Whittaker

Syndication

News


Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
Adventures of adding YahooUI (YUI) to a MVC Site

I decided that I wanted to give the YahooUI (YUI) framework/library a go recently.  My first task was to get a few of my data listing pages on Dimecasts.net to use the DataTable Control from YUI.  Having never used the library I was not sure what I was in for, but for once (ok, maybe a bit of an exaggeration) I was flooded with TOO much documentation.  With a bit help from Chris Sutton I was able to get a pretty nice datatable up an running in a pretty short period of time.

Below what I needed to do in order to get the grid running (check here to see a working copy).

  1. Create the controller action that would return the data

    public JsonResult GetTopViewedItems()
    {
    	// CastsService is my call to the service layer
    	var items = CastsService.GetMostViewedEpisodes();
    	var jsonResult = Json( items );
    
    	return jsonResult;
    }
    


    Here I have decided to use the JsonResult ActionResult that is part of the ASP.Net MVC Project because it will take care of turning my object model into well formatted Json.
  2. Adding the place holder Div on my page where I wanted the data to go.

    <div id="items"/>
    

  3. Adding all the correct .js includes that are needed (and there are a ton)

    	
    // as you can see there are a ton that are needed.
    <script src="../../Content/YahooUI/yahoo/yahoo-min.js" type="text/javascript"/>
    <script src="../../Content/YahooUI/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"/>
    <script src="../../Content/YahooUI/element/element-beta-min.js" type="text/javascript"/>
    <script src="../../Content/YahooUI/event/event-min.js" type="text/javascript"/>
    <script src="../../Content/YahooUI/json/json-min.js" type="text/javascript"/>
    <script src="../../Content/YahooUI/connection/connection-min.js" type="text/javascript"/>
    <script src="../../Content/YahooUI/datasource/datasource-beta-min.js" type="text/javascript"/>
    <script src="../../Content/YahooUI/datatable/datatable-beta-min.js" type="text/javascript"/>
    <script src="../../Content/YahooUI/yuiloader/yuiloader-beta-min.js" type="text/javascript"/>
    
    


  4. Adding the correct YUI code in my in order to get and load my data.

            
    YAHOO.util.Event.addListener(window, "load", function() {
                       
    	// Add the custom formatter to the shortcuts 
            YAHOO.widget.DataTable.Formatter.myCustom = this.myCustomFormatter;    
    		var myColumnDefs = [                    
                        {key:"EpisodeNumber"},
                        {key:"Name"}, 
                        {key:"EpisodeDate"},
                        {key:"Count"}
                    ];
    
                    this.myDataSource = new YAHOO.util.DataSource("/Casts/GetTopViewedItems/");
                    this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
                    this.myDataSource.responseSchema = { 
                    fields: [{key:"EpisodeNumber"},
                                {key:"Name"},
                                {key:"EpisodeDate"},
                                {key:"Count"}
                             ] };
    
                    this.myDataTable = new YAHOO.widget.DataTable("items", myColumnDefs, this.myDataSource, {});                             
                    
    });
    
    


    There are a few key points to pay attention to here
    1. I am telling the YUI library to call my controller action based on the provided route.
    2. I have set the responseType to TYPE_JSON, there are multiple types that this be set to
    3. I am calling this script on the page load.

 

In the future I play to add skinning to the site as well as more async calls for things like the comment submission as well as data loading.  Expect more posts in the future.

I hope this helps someone else get starting with YUI.  And remember to check out the YUI site as there are TONs of great examples and resources.

Till next time,

[----- Remember to check out DimeCasts.Net -----]


Posted 08-18-2008 4:10 PM by Derik Whittaker
Filed under: ,

[Advertisement]

Comments

JH wrote re: Adventures of adding YahooUI (YUI) to a MVC Site
on 08-18-2008 6:05 PM

One thing that bothered me when I was going through the same process (Interim Release) was figuring out that I HAD to have the class "yui-skin-sam" set on the body tag in the master page of the default MVC installation for anything to render properly.

JH wrote re: Adventures of adding YahooUI (YUI) to a MVC Site
on 08-18-2008 6:06 PM

Oh yeah... start using YUILoader ASAP.. it'll save you putting all those js script tags in there and trying to figure out how to manage the dependencies. Makes life a LOT simpler!!!!

Derik Whittaker wrote re: Adventures of adding YahooUI (YUI) to a MVC Site
on 08-18-2008 6:59 PM

@JH

Thanks, will look into YUILoader

DotNetKicks.com wrote Adventures of adding YahooUI (YUI) to a MVC Site
on 08-18-2008 7:03 PM

You've been kicked (a good thing) - Trackback from DotNetKicks.com

Chris Sutton wrote re: Adventures of adding YahooUI (YUI) to a MVC Site
on 08-18-2008 8:57 PM

@Derik and @JH,

The Loader is pretty cool in that you can sort of do an import of just the components you need.

@JH that body css class threw me a for awhile when I started playing with it.

Chris

ASP.NET MVC Archived Buzz, Page 1 wrote ASP.NET MVC Archived Buzz, Page 1
on 08-19-2008 4:31 PM

Pingback from  ASP.NET MVC Archived Buzz, Page 1

tes wrote re: Adventures of adding YahooUI (YUI) to a MVC Site
on 09-04-2008 2:11 AM

tes aja niy

Derik Whittaker wrote Custom Formatters for YUI DataTable
on 09-17-2008 7:43 AM

In a prior posting ( here ) I walked through how to add the YUI DataTable to your site. Today I thought

Community Blogs wrote Custom Formatters for YUI DataTable
on 09-17-2008 8:23 AM

In a prior posting ( here ) I walked through how to add the YUI DataTable to your site. Today I thought

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)