ASP.NET MVC with YUI

Question

Hi,

I am using ASP.NET MVC 2. I have played around you the YUI samples that can be found on http://developer.yahoo.com/yui/2/. I have been wondering if any one has had the time to use the YUI controls in an MVC app?

I want to start using the datatable and display my results from a SQL Server in this datatable. How is this possible? Any samples would be appreciated.

Thanks

Answer 1

The YUI controls are plain javascript controls and are server agnostic meaning that they can be used with any server side technology as long as you format the results as expected. So here's an oversimplified example of the data table control in action using AJAX and JSON to populate its data:

Controller:

[HandleError]
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Assets()
    {
        // TODO: fetch data from SQL using a repository
        var data = new
        {
            ResultSet = Enumerable.Range(1, 25).Select(i => new
            {
                Title = "title " + i,
                Phone = "phone " + i,
                City = "city " + i
            })
        };
        return Json(data, JsonRequestBehavior.AllowGet);
    }
}

and in the view:

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yuiloader/yuiloader-min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/event/event-min.js"&gt;&lt;/script&gt; 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/connection/connection-min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/json/json-min.js"&gt;&lt;/script&gt; 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/dom/dom-min.js"&gt;&lt;/script&gt; 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/element/element-min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datasource/datasource-min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datatable/datatable-min.js"&gt;&lt;/script&gt; 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/button/button-min.js"&gt;&lt;/script&gt; 
<script type="text/javascript">
YAHOO.util.Event.addListener(window, 'load', function () {
    YAHOO.example.XHR_JSON = new function () {
        var myColumnDefs = [
            { key: 'Title', label: 'Name', sortable: true },
            { key: 'Phone' },
            { key: 'City' },
        ];

        this.myDataSource = new YAHOO.util.DataSource('<%= Url.Action("assets") %>');
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        this.myDataSource.responseSchema = {
            resultsList: 'ResultSet',
            fields: ['Title', 'Phone', 'City' ]
        };

        this.myDataTable = new YAHOO.widget.DataTable('json', myColumnDefs,
            this.myDataSource);

    };
});
</script>

<div id="json"></div>

The datatable control is very powerful and contains many customizations like paging, sorting, ... The documentation is pretty extensive and is worth reading to see examples in action. Armed with FireBug you could look at the requests and response parameters being exchanged between the client and the server in order to replicate each example.