YUI数据表中的ASP.NET MVC 3 [英] YUI DataTable in ASP.NET MVC 3
本文介绍了YUI数据表中的ASP.NET MVC 3的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用ASP.NET MVC 3,我试图用数据填充我的YUI数据表从我的数据库。
I am using ASP.NET MVC 3. I am trying to populate my YUI data table with data from my database.
在我看来,我有以下code片段:
In my view I have the following code snippets:
@model IEnumerable<MyProject.News>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link href="http://yui.yahooapis.com/2.8.2r1/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet" type="text/css">
<link href="http://yui.yahooapis.com/2.8.2r1/build/base/base-min.css" rel="stylesheet" type="text/css">
<link href="http://yui.yahooapis.com/2.8.2r1/build/button/assets/skins/sam/button.css" rel="stylesheet" type="text/css">
<link href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" rel="stylesheet" type="text/css">
<link href="/Assets/Stylesheets/MyProject.css" rel="stylesheet" type="text/css">
<script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
<script src="http://yui.yahooapis.com/2.8.2r1/build/element/element-min.js" type="text/javascript"></script>
<script src="http://yui.yahooapis.com/2.8.2r1/build/button/button-min.js" type="text/javascript"></script>
<script src="http://yui.yahooapis.com/2.8.2r1/build/datatable/datatable-min.js" type="text/javascript"></script>
<script src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js" type="text/javascript"></script>
<script src="http://yui.yahooapis.com/2.8.2r1/build/connection/connection-min.js" type="text/javascript"></script>
<script src="http://yui.yahooapis.com/2.8.2r1/build/json/json-min.js" type="text/javascript"></script>
下面是我如何创建我的数据表:
Here is how I create my data table:
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {
var btnHelp, btnCreateNews;
btnHelp = new YAHOO.widget.Button('btnHelp');
btnCreateNews = new YAHOO.widget.Button('btnCreateNews');
btnCreateNews.addListener('click', function (e) {
window.location = '@Url.RouteUrl(Url.NewsCreate())';
});
var grdNewsColumnDefs = [
{ key: 'NewsId', label: 'Identifier' },
{ key: 'Title', label: 'Title' },
{ key: 'Body', label: 'Body' }
];
var grdNewsDataSource = YAHOO.util.DataSource('@Url.Action("JsonList")');
grdNewsDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
grdNewsDataSource.responseSchema = {
fields: [
{ key: 'NewsId' },
{ key: 'Title' },
{ key: 'Body' }
]
};
var grdNewsDataTable = new YAHOO.widget.DataTable('grdNews', grdNewsColumnDefs, grdNewsDataSource);
});
</script>
我的新闻类:
public class News
{
public int NewsId { get; set; }
public string Title { get; set; }
public string Body { get; set; }
}
我的操作方法:
public ActionResult JsonList()
{
IEnumerable<News> newsList = newsService.FindAll();
return Json(newsList, JsonRequestBehavior.AllowGet);
}
这是我在网格中得到的错误是:
The error that I get in the grid is:
数据错误。
不知道是什么原因造成的?
Not sure what is causing this?
推荐答案
试试这个:
创建一个封装类:
public class JsonEncapsulatorDto<T>
{
public IEnumerable<T> Data { get; set; }
public T DataSingle { get; set; }
}
在您的操作使用方法:
public ActionResult JsonList()
{
var data = new JsonEncapsulatorDto<News>();
data.Data = newsService.FindAll();
return Json(data , JsonRequestBehavior.AllowGet);
}
现在在你的脚本:
var grdNewsDataSource = YAHOO.util.DataSource('@Url.Action("JsonList")');
grdNewsDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
grdNewsDataSource.responseSchema = {
resultsList: 'Data',
fields: [
{ key: 'NewsId' },
{ key: 'Title' },
{ key: 'Body' }
]
};
希望工程。
这篇关于YUI数据表中的ASP.NET MVC 3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文