Грид не отображает данные

Обсуждаются вопросы использования плагинов для jQuery, созданных сторонними разработчиками.

Модераторы: TRAHOMOTO, tuareg

Грид не отображает данные

Сообщение kluben » 27 авг 2010, 12:51

Всем привет.
Использую ASP.NET MVC

Мастер страница имеет вид:

Код: выделить все
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
        <link rel="stylesheet"  href = "~/Content/styles.css"/>
        <link rel="stylesheet" type="text/css" media="screen" href="../../Content/jquery-ui-1.8.4.custom.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="../../Content/ui.jqgrid.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="../../Content/ui.multiselect.css" />
        <asp:ContentPlaceHolder ID = "HeadContent" runat = "server"/>
    </head>
    <body>
        <div id = 'header' class = 'div_header'></div>
        <div id = 'content' class = 'div_content'>
            <asp:ContentPlaceHolder ID="MainContent" runat="server" /> 
        </div>     
    </body>
</html>



Представление List.aspx имеет вид:

Код: выделить все
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<DomainModel.Order>>" %>

<asp:Content  ContentPlaceHolderID="TitleContent" runat="server">
   Заказы клиента
</asp:Content>
<asp:Content ContentPlaceHolderID = "HeadContent" runat = "server">
    <script src="../../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>       
    <script src="../../Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="../../Scripts/ui.multiselect.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {

            $('#grid').jqGrid({
                url: '/ClientOrders/GridData/',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['Column1', 'Column2'],
                colModel: [
        { name: 'c1', index: 'c1', width: 80 },
        { name: 'c2', index: 'c2', width: 80}],
                pager: $('#gridPager'),
                rowNum: 10,
                rowList: [10, 20, 30, 100],
                sortname: 'c1',
                sortorder: 'asc'
            });
        });
   </script>

</asp:Content>
<asp:Content  ContentPlaceHolderID="MainContent" runat="server">
    <table id="grid"></table>
    <div id="gridPager"></div>
</asp:Content>


Контроллер имеет вид:
Код: выделить все
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DomainModel.Abstract;
using DomainModel.Concrete;
using DomainModel;

namespace OrdersSystem.Controllers
{
    public class ClientOrdersController : Controller
    {
        private OrderRepository orderRepository;

        public ClientOrdersController()
        {
            orderRepository = new OrderRepository();

        }

        public ViewResult List()
        {
            return View(orderRepository.Orders.ToList());
        }

        public ViewResult Add()
        {
            Order o = new Order();
            o.OrderNumber = 10;
            orderRepository.Add(o);
            orderRepository.Save();
            return View();
        }

       public ActionResult GridData(string sidx, string sord, int page, int rows)
        {
            var data = orderRepository.Orders.ToArray();
            var result = new
            {
                total = (int)Math.Ceiling((double)rows / 10),
                page ,
                records = 2,
                rows = (from order in data
                        select new
                        {
                            c1 = order.OrderNumber.ToString(),
                            c2 = order.OrderDate.ToShortDateString(),
                        }).ToArray()
            };
            return Json(result);
        }

    }
}


Вот что имею в браузере...

Capture.PNG
Capture.PNG (8.83 KIB) Просмотров: 1749
kluben
 
Сообщений: 24
Зарегистрирован: 26 авг 2010, 14:56

Re: Грид не отображает данные

Сообщение kluben » 27 авг 2010, 13:29

Предполагаю, что проблема в методе действия, но он данные возвращает.
Может быть структура данных не соответствует требуемой?
kluben
 
Сообщений: 24
Зарегистрирован: 26 авг 2010, 14:56

Re: Грид не отображает данные

Сообщение TRAHOMOTO » 29 авг 2010, 20:41

Попробуйте посмотреть ответ сервера в FireBug, а лучше прикрепить скриншотик
Предполагается наличие объекта
Аватар пользователя
TRAHOMOTO
Модератор
 
Сообщений: 513
Зарегистрирован: 19 янв 2010, 17:18
Откуда: Украина, Луганск

Re: Грид не отображает данные

Сообщение kluben » 29 авг 2010, 21:41

подскажите, как это сделать?
kluben
 
Сообщений: 24
Зарегистрирован: 26 авг 2010, 14:56

Re: Грид не отображает данные

Сообщение TRAHOMOTO » 30 авг 2010, 10:18

устанорвите плагин к FireFox который называется FireBug, после установки активируйте его нажатием F12. Ну а дальше поковыряйте что он возвращает на каких вкладках. Если будут трудности с использованием плагина попробуйте погуглить, обязательно найдете статьи с исчерпывающими описаниями принципов использования.
И поверьте мне и моим коллегам, а также миллионам вэб-разработчиков: Это один из необходимейших инструментов!
Предполагается наличие объекта
Аватар пользователя
TRAHOMOTO
Модератор
 
Сообщений: 513
Зарегистрирован: 19 янв 2010, 17:18
Откуда: Украина, Луганск

Re: Грид не отображает данные

Сообщение kluben » 30 авг 2010, 12:02

да стоит он у меня :) просто не пойму что смотреть. Если бряку ставить в функции
Код: выделить все
$(function () {

            $('#grid').jqGrid({
                url: '/ClientOrders/GridData/',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['Column1', 'Column2']...


то где смотреть пришедший результат.
Понимаю, что нужно смотреть объект JsonReader грида, но как его увидеть?
kluben
 
Сообщений: 24
Зарегистрирован: 26 авг 2010, 14:56

Re: Грид не отображает данные

Сообщение TRAHOMOTO » 30 авг 2010, 12:48

Во вкладке "Консоль" отображаются запросы к серверу, так вот разверните запрос (слева крестик) и посмотрите "подвкладку" Ответ
Предполагается наличие объекта
Аватар пользователя
TRAHOMOTO
Модератор
 
Сообщений: 513
Зарегистрирован: 19 янв 2010, 17:18
Откуда: Украина, Луганск

Re: Грид не отображает данные

Сообщение kluben » 30 авг 2010, 22:31

TRAHOMOTO, благодарю за помощь!
Я разобрался, в действии контроллера при формировании ответа гриду необходимо использовать следующую конструкцию:
Код: выделить все
return Json(result,JsonRequestBehavior.AllowGet);
\
вместо
Код: выделить все
return Json(result);
\

Это верно для ASP.NET MVC 2. В MVC первоначальный вариант должен работать!
kluben
 
Сообщений: 24
Зарегистрирован: 26 авг 2010, 14:56

Re: Грид не отображает данные

Сообщение timus » 05 дек 2010, 19:57

Уважаемые, столкнулся с подобной проблемой. надеюсь подскажете
использую asp.net mvc 2, .NET Framework 4, доступ к данным осуществляется через LinqToSql, так же используется паттерн Repository.

код на странице следующий:
Код: выделить все
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MetroSumoErtos.Models.Location>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
   LocationData
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<link href="../../Scripts/jquery.ui/css/jquery-ui-1.8.6.custom.css" rel="Stylesheet" type="text/css" />
<link href="../../Scripts/jquery.jqGrid/css/ui.jqgrid.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/jquery.jqGrid/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid/js/i18n/grid.locale-ru.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid/js/jquery.jqGrid.min.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('#LocationTable').jqGrid({
            url: '/Location/LocationGrid',
            datatype: "json",
            mtype: 'POST',
            jsonReader: {
                page: "page",
                total: "total",
                records: "records",
                root: "rows",
                repeatitems: false,
                Id: ""
            },
            colNames: ['Идент', 'Название', 'Описание'],
            colModel: [
            { name: 'LocationIdent', index: 'LocationIdent', width: 100, align: 'left' },
            { name: 'NameLI', index: 'NameLI', width: 100, align: 'left' },
            { name: 'DescriptionLI', index: 'DescriptionLI', width: 100, align: 'left' }
            ],
            width: 600,
            pager: '#LocationPager',
            viewrecords: true
        });
    });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>LocationData</h2>
    <table id="LocationTable" class="scroll" cellpadding="0" cellspacing="0" width="100%">
    </table>
    <div id="LocationPager" class="scroll" style="text-align: center;">
    </div>
</asp:Content>


у контроллере следующий код:
Код: выделить все
        public JsonResult LocationGrid()
        {
            var list = _datamanager.Location.GetLocationsOrderById();
            var result = new JsonResult()
                             {
                                 Data = new
                                            {
                                                page = 1,
                                                total = 10,
                                                records = list.Count(),
                                                rows = (from lloc in _datamanager.Location.GetLocationsOrderById()
                                                        select new { id = lloc.LocationIdent,
                                                                     cell = new[]
                                                                                {
                                                                                    lloc.LocationIdent.ToString(),
                                                                                    lloc.NameLI,
                                                                                    lloc.DescriptionLI
                                                                                } }
                                                         ).ToArray()
                    } };
            return result;
        }
       
        public ActionResult LocationData()
        {
            return View();
        }


в файле репозитория, данные получаем следующим образом:
Код: выделить все
        public IQueryable<Location> GetLocationsOrderById()
        {
            return _datacontext.Locations.OrderBy(loc => loc.LocationIdent);
        }


если посмотреть через FireBug, то на вкладке ответ следующие данные:
{"page":1,"total":10,"records":6,"rows":[{"id":0,"cell":["0","Тюмень","СИБИРЬ"]},{"id":1,"cell":["1","Новосибирский ","В новосибирске"]},{"id":2,"cell":["2","Новокузнецкий","Кузбасс"]},{"id":3,"cell":["3","Толмачево","Новосибирск"]},{"id":4,"cell":["4","Барнаул","Алтай"]},{"id":5,"cell":["5","ГорноАлтайск","11122233344"]}]}

на грид выводится информация о том, что 6 записей, но самих данных в гриде нет.
Изображение

подскажите, где допустил ошибку.
timus
 
Сообщений: 1
Зарегистрирован: 30 ноя 2010, 23:03


Вернуться в Плагины jQuery

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1