带有 YUI 的 ASP.NET MVC

Question

我正在使用 ASP.NET MVC 2。我已经在你身边玩过可以在 http://developer.yahoo.com/yui/2/ 上找到的 YUI 示例。我一直想知道是否有人有时间在 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>

数据表控件非常强大，包含许多自定义项，例如分页、排序……documentation 非常广泛，值得一读以查看实际示例。有了FireBug，您可以查看在客户端和服务器之间交换的请求和响应参数，以便复制每个示例。