ASP.NET MVC与YUI

Question

我正在使用ASP.NET MVC 2.我玩过你的YUI样本，可以在http://developer.yahoo.com/yui/2/上找到。我一直在想，是否有人有时间在MVC应用程序中使用YUI控件？

我想开始使用数据表，并在此数据表中显示来自SQL Server的结果。这怎么可能？任何样品将不胜感激。

感谢

Answer 1

的YUI控件是普通的JavaScript控件和服务器是不可知的意义，他们可以与任何服务器端技术，只要你格式化结果如预期中。因此，这里的行动中使用AJAX和JSON来填充其数据data table control的过于简单的例子：

控制器：

[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中控制是非常强大的并包含许多定制，如分页，排序... documentation是相当广泛的，值得一读，看看例子在行动。通过使用FireBug武装，您可以查看客户端和服务器之间交换的请求和响应参数，以便复制每个示例。