ASP.NET MVC with YUI

Question

I use ASP.NET MVC 2. I played around you YUI patterns that can be found at http://developer.yahoo.com/yui/2/ . I was wondering if anyone has time to use YUI controls in an MVC application?

I want to start using datatable and display SQL Server results in this datatable. How is this possible? Any samples will be appreciated.

thank

Answer 1

YUI javascript , , , , . , AJAX JSON :

:

[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);
    }
}

:

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/event/event-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/json/json-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/dom/dom-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datatable/datatable-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/button/button-min.js"></script> 
<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>

datatable , , ,... . . FireBug, , , .