ASP.NET MVC: DataSource на JavaScript для работы с Web API или снова про JsSite
DataSource – контрол написанный на языке JavaScript. Библиотека JsSite включает в себя, на мой взгляд, полезный js-контрол, который может очень просто отобразить на странице сущности полученные с Web API. При этом разбитие на странице осуществляется автоматически, а также в нем уже присутствует функционал по добавлении, удалению и редактированию сущностей в списке. Помимо того что DataSource “умеет” получать данные постранично, добавлять, удалять, обновлять сущности, еще “умеет” использовать параметризированные запросы к сервису Web API.
DataSource находится в пространстве имен site.controls библиотеки JsSite.
Конструктор принимает по умолчанию следующие параметры:
Опции для настройки контрола DataSource помогут предопределить его поведение, в том числе и заданное по умолчанию.
Описание свойств сведу в простую таблицы. Так как контрол продолжает обрастать новыми свойствами, данная таблица будет обновляться.
Все события по умолчанию имеют значение null.
Для того чтобы DataSource начал работу с Web API требуется наличие специализированного сервиса. Это, своего рода, “обертка” (wrapper) на GET, POST, PUT, DELETE методы Web API. Сервис прост до безобразия, и преследует всего лишь одну цель: все обращения к сервису Web API должны быть из одного места! У вас на представлении (View) может быть несколько DataSource-объектов, которые могут использовать один и тот же сервис. Наверное это всё немного сложно, лучше показать всё на примерах.
Ничего не может быть лучше хорошего примера, чем код сервиса:
1: (function (site) {
2:
3: site.services.documents = function () {
4: var
5: init = function () {
6: site.amplify.request.define("getdocument", "ajax", {
7: url: "/api/documentapi",
8: dataType: "json",
9: type: "GET",
10: cache: false
11: });
12: site.amplify.request.define("postdocument", "ajax", {
13: url: "/api/documentapi",
14: dataType: "json",
15: contentType: "application/json; charset=utf-8",
16: type: "POST",
17: cache: false
18: });
19: site.amplify.request.define("putdocument", "ajax", {
20: url: "/api/documentapi",
21: dataType: "json",
22: contentType: "application/json; charset=utf-8",
23: type: "PUT",
24: cache: false
25: });
26: site.amplify.request.define("deldocument", "ajax", {
27: url: "/api/documentapi",
28: dataType: "json",
29: contentType: "application/json; charset=utf-8",
30: type: "DELETE",
31: cache: false
32: });
33: },
34: mapItem = function (data) {
35: returnnew site.m.Document(data);
36: },
37: mapItems = function (data) {
38: var mapped = [];
39: site._.each(data, function (item) {
40: mapped.push(mapItem(item));
41: });
42: return mapped;
43: },
44: getData = function (params, back) {
45: if (typeof back !== "function") thrownew Error("callback not a function");
46: if (!params) thrownew Error("queryParams notis null");
47: return site.amplify.request({
48: resourceId: "getdocument",
49: data: { qp: ko.toJSON(params) },
50: success: function (json) {
51: if (json) {
52: if (json.success) {
53: params.total(json.total);
54: var result = mapItems(json.items);
55: back(result);
56: return;
57: }
58: if (json.warning) {
59: site.logger.warning(json.warning);
60: }
61: if (json.error) {
62: site.logger.error(json.error);
63: }
64: }
65: back();
66: },
67: error: function () {
68: site.logger.error("Ошибка загрузки сущности \"Документ\");
69: back();
70: }
71: });
72: },
73: getDataById = function (params, back) {
74: if (typeof back !== "function") thrownew Error("callback not a function");
75: if (!params) thrownew Error("queryParams notis null");
76: return site.amplify.request({
77: resourceId: "getdocument",
78: data: { id: params },
79: success: function (json) {
80: if (json) {
81: if (json.success) {
82: var result = mapItem(json.item);
83: back(result);
84: return;
85: }
86: if (json.warning) {
87: site.logger.warning(json.warning);
88: }
89: if (json.error) {
90: site.logger.error(json.error);
91: }
92: }
93: back();
94: },
95: error: function () {
96: site.logger.error("Ошибка загрузки сущности \"Должность\");
97: back();
98: }
99: });
100: },
101: postData = function (params, back) {
102: if (typeof back !== "function") thrownew Error("callback not a function");
103: return site.amplify.request({
104: resourceId: "postdocument",
105: data: ko.toJSON(params),
106: success: function (json) {
107: if (json) {
108: if (json.success) {
109: site.logger.success(json.success);
110: back(new mapItem(json.item));
111: return;
112: }
113: if (json.warning) {
114: site.logger.warning(json.warning);
115: }
116: if (json.error) {
117: site.logger.error(json.error);
118: }
119: }
120: back();
121: },
122: error: function () {
123: site.logger.error("Ошибка сохранения сущности \"Документ\"");
124: back();
125: }
126: });
127: },
128: putData = function (params, back) {
129: if (typeof back !== "function") thrownew Error("callback not a function");
130: return site.amplify.request({
131: resourceId: "putdocument",
132: data: ko.toJSON(params),
133: success: function (json) {
134: if (json) {
135: if (json.success) {
136: site.logger.success(json.success);
137: back(new mapItem(json.item));
138: return;
139: }
140: if (json.warning) {
141: site.logger.warning(json.warning);
142: }
143: if (json.error) {
144: site.logger.error(json.error);
145: }
146: }
147: back();
148: },
149: error: function () {
150: site.logger.error("Ошибка обновления сущности \"Документ\");
151: back();
152: }
153: });
154: },
155: delData = function (params, back) {
156: if (typeof back !== "function") thrownew Error("callback not a function");
157: return site.amplify.request({
158: resourceId: "deldocument",
159: data: ko.toJSON(params),
160: success: function (json) {
161: if (json) {
162: if (json.success) {
163: site.logger.success(json.success);
164: back(new mapItem(json.item));
165: return;
166: }
167: if (json.warning) {
168: site.logger.warning(json.warning);
169: }
170: if (json.error) {
171: site.logger.error(json.error);
172: }
173: }
174: back();
175: },
176: error: function () {
177: site.logger.error("Ошибка удаления сущности \"Документ\");
178: back();
179: }
180: });
181: };
182:
183: init();
184:
185: return {
186: getDataById: getDataById,
187: postData: postData,
188: getData: getData,
189: putData: putData,
190: delData: delData
191: };
192: }();
193:
194: })(site);
Прошу обратить ваше внимание на то, что у каждого сервиса, который должен быть использован в контроле DataSource должны быть обязательные методы. Все они перечислены в строках 186-190. Дополнительные методы Web API сервиса прописываются аналогичным образом, и так же публикуются в публичные свойства (litteral object). Вызов дополнительных методов производится через объект execute контрола DataSource.
Все сервисы размещены в пространстве имен site.services. Пример сервиса приведен в предыдущем листинге. Но более свежий пример всегда есть в файле site.services.js, который поставляется с nuget-пакетом JsSite.
JsSite – nuget-пакет, в котором находится DataSource-контрол и все необходимые для работы контрола дополнения в виде утилит и вспомогательных классов.
В следующей статье часть1 и часть2 я на примере простого приложения, покажу как используя этот незамысловатый контрол можно с легкостью реализовать Master – Details связку. К обеим частям прилагаются проект для экспериментов.
Подробнее: http://feedproxy.google.com/~r/blogmusor/~3/PqoMM_5BRoM/130
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
Ничто так сильно не разрушает человека, как продолжительное бездействие. |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.