Как я могу привязать мою модель представления к jqGrid? - PullRequest
Новая
       45

Как я могу привязать мою модель представления к jqGrid?

5 голосов
/ 13 ноября 2010

Использование MVC2 и EF framework.Большинство ссылок / постов в блогах, которые я обнаружил до сих пор, относятся к привязке одной таблицы и ее данных (иногда иерархических) к jqGrid с возможностями редактирования.Мне это не нужноМне даже не нужно редактировать данные - просто отображать.Мне нужно отображать и пейджировать данные.Сортировка - это плюс, поиск бонуса, я думаю.

В документации jqGrid источник данных привязан следующим образом: 

return gridModel.OrdersGrid.DataBind(northWindModel.Orders);

Но у меня есть только контекст Entities без ссылки напосмотреть модель.Могу ли я создать набор сущностей здесь?Не очень знаком с этим.

Все мои модели представлений содержат данные из нескольких разных таблиц.Что я могу сделать, чтобы связать свойства модели представления с jqGrid?Я играю с Trirand 30-дневной пробной версией jqGrid для MVC.Опять же, мне просто нужно отобразить и отобразить данные, но я не уверен, как подключить модели представлений к источнику данных jqGrid.

Редактировать 

public ActionResult test()
    {
        var gridModel = new testmodel();
        var viewModel = gridModel.testgrid;
        SetupTestGrid(viewModel);
        return View(gridModel);
    }

    private void SetupTestGrid(JQGrid viewModel)
    {
        viewModel.ID = "TestGrid";
        viewModel.DataUrl = Url.Action("SearchTestGridDataRequested");
        viewModel.ToolBarSettings.ShowEditButton = false;
        viewModel.ToolBarSettings.ShowAddButton = false;
        viewModel.ToolBarSettings.ShowDeleteButton = false;
    }

    public JsonResult SearchTestGridDataRequested(string sidx, string sord, int page, int rows)
    {
        var gridModel = new testmodel(sidx, sord, page, rows);
        SetupTestGrid(gridModel.testgrid);
        return Json(gridModel.datasource);
    }

В testmodel и testmodel (параметры) я создаю анонимный тип (называемый источник данных), содержащий параметры Фила Хаака;Всего, страница, записи и строки.Это свойство JSON'ified в последнем утверждении SearchTestGridDataRequested.

1 Ответ

8 голосов
/ 13 ноября 2010

Я на самом деле не знаю коммерческую версию jqGrid, но продукт внутренне использует jqGrid с открытым исходным кодом, и поэтому я мог объяснить, как он должен работать вместе с ASP.NET MVC.

Как правило, для использования jqGrid в MVC у вас может быть страница (представление) с двумя элементами <table> и <div>, используемыми для пейджера. Оба (<table> и <div>) должны иметь и атрибут id. Никакая другая сложная привязка View к модели не требуется.

Теперь вы можете поместить в заголовок страницы загрузку всех необходимых сценариев Java: jQuery, jqGrid и специфичный для вашей страницы JavaScript, который определяет jqGrid, который вы хотите отобразить, например модель столбца и различные параметры jqGrid. Наиболее важным параметром, который вам нужен для привязки сетки к данным, является параметр url. Например, если вы определяете в контроллере Home действие GetData, тогда url может быть "Home/GetData" или '<%= Url.Content("~/Home/GetData")%>'. Этого достаточно, чтобы иметь «привязку данных». Использование данных модели не требуется.

Действие GetData можно определить следующим образом: 

JsonResult GetData(string sidx, string sord, int page, int rows)

, если вы хотите поддерживать только сортировку данных и подкачку страниц, но не нуждаетесь в какой-либо поддержке поиска (фильтрации).

В случае поддержки поиска вам необходимо добавить дополнительные параметры. Если вы хотите использовать Расширенный поиск или Панель инструментов Поиск с параметром stringResult:true, необходимо добавить один дополнительный параметр string filter: 

JsonResult GetData (string sidx, string sord, int page, int rows, string filter)

В случае реализации Поиска по одному полю в вашей сетке должно быть 

JsonResult GetData (string sidx, string sord, int page, int rows,
                    string searchField, string searchString, string searchOper)

Вы также можете совершить универсальное действие: 

JsonResult GetData (string sidx, string sord, int page, int rows, string _search
                    string searchField, string searchString, string searchOper,
                    string filter)

Так что во всех случаях вам придется делать почти то же самое, но вы получите дополнительные параметры в немного другой форме.

Теперь вы должны решить, в какой форме вы хотите предоставить данные для jqGrid из действия контроллера. jqGrid очень гибок, и вы можете получить данные в стандартном формате 

{ 
  "total": "xxx",   // the total number of pages
  "page": "yyy",    // the current page number of the data returned
  "records": "zzz", // the total number of records
  "rows" : [
    {"id" :"1", "cell" :["cell11", "cell12", ...,  "cell1n"]},
    {"id" :"2", "cell":["cell21", "cell22", ..., "cell2n"]},
      ...
  ]
}

или в другом (более читаемом, но более длинном) формате. В последнем случае вам нужно будет определить небольшой параметр jsonReader, который описывает, как следует читать данные (см. документация ).

Если вы загляните внутрь некоторых старых ответов, таких как это , это , это или это , вы найдете достаточно фрагментов кода Полностью работающие проекты MVC, которые вы можете изменить для своего предложения. Первая ссылка из списка должна дать ответ на ваш главный вопрос , как подготовить данные из EF-источника или любого другого IQueryable<T> источника данных, которые нужны jqGrid.

В другом моем старом ответе , где я более подробно описываю общую схему, как jqGrid может использоваться в среде MVC, но для людей, которые уже тестировали различные способы реализации.

...