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武裝，您可以查看客戶端和服務器之間交換的請求和響應參數，以便複製每個示例。