我正在使用 ASP.NET MVC 2。我在你身边玩过 YUI 示例,可以在http://developer.yahoo.com/yui/2/上找到。我一直想知道是否有人有时间在 MVC 应用程序中使用 YUI 控件?
我想开始使用数据表并在此数据表中显示来自 SQL Server 的结果。这怎么可能?任何样品将不胜感激。
谢谢
我正在使用 ASP.NET MVC 2。我在你身边玩过 YUI 示例,可以在http://developer.yahoo.com/yui/2/上找到。我一直想知道是否有人有时间在 MVC 应用程序中使用 YUI 控件?
我想开始使用数据表并在此数据表中显示来自 SQL Server 的结果。这怎么可能?任何样品将不胜感激。
谢谢
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>
数据表控件非常强大,包含许多自定义项,例如分页、排序……文档非常广泛,值得阅读以查看实际示例。借助FireBug,您可以查看在客户端和服务器之间交换的请求和响应参数,以便复制每个示例。