YUI DataTable в ASP.NET MVC 3 - PullRequest
Новая
       26

YUI DataTable в ASP.NET MVC 3

1 голос
/ 21 февраля 2011

Я использую ASP.NET MVC 3. Я пытаюсь заполнить свою таблицу данных YUI данными из моей базы данных.

На мой взгляд, у меня есть следующие фрагменты кода: 

@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>

Вот как я создаю свою таблицу данных: 

<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);
}

Ошибка, которую я получаю в сетке:

Ошибка данных.

Не уверен, что это вызывает?

1 Ответ

1 голос
/ 21 февраля 2011

Попробуйте это:

Создать класс инкапсулятора: 

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' }
         ]
      };

Надеюсь, это сработает.

...