В этом примере я буду использовать Портал данных города Чикаго, в частности, набор данных Имена, зарплаты и должности текущих сотрудников. Несмотря на то, что внешний интерфейс будет выполнен в HTML и JavaScript, я рекомендую создать слой данных C#. Хотя можно вызывать веб-службы из JavaScript, я предпочитаю перенести эту логику в C#. Я работал с обоими и обнаружил, что слой данных C# не только чище, но и в целом с ним проще работать.
Этот набор данных содержит около 32 000 строк информации. Загрузка всех этих данных в ListView одновременно привела бы к остановке производительности. Итак, мы собираемся развернуть наши данные, вызвав веб-службу с начальным значением и значением длины, которые определяют, сколько записей возвращается. Мы видим основную часть этого вызова в файле RemoteDataProviderPartial.cs ниже:
[sourcecode language="csharp"]
public async Task‹List‹EmployeeSalary›› GetEmployeeSalariesAsync(
начало строки, длина строки)
{
var response = await MakeHttpWebRequestAsync(
RemoteDataOperationUrls.EmployeeSalary.EmployeeSalary_Get,
«GET»,
null,
new Dictionary‹string, string›(){
{“ST”, start},
{"LGTH", длина}
});
return JsonHelper.Deserialize ‹List‹EmployeeSalary››(ответ);
}
[/исходный код]
В этом вызове я ссылаюсь на URL-адрес EmployeeSalary_Get и десериализую ответ в список объектов EmployeeSalary. Полный URL-адрес, который мы используем: https://data.cityofchicago.org/views/xzkq-xp2w/rows.json?method=getByIds&asHashes=true&start={ST}&length={LGTH}&meta=false. Вы можете поместить этот URL-адрес в Fiddler и посмотреть ответы, если хотите, но обязательно замените {ST} начальным значением (или 0) и {LGTH} количеством записей, которые вы хотите вернуть. Теперь, когда у нас есть данные, возвращенные службой, нам нужно решить, как мы можем сделать вышеуказанный вызов асинхронно из javascript.
Отображение данных в ListView
Не углубляясь слишком глубоко в код, мы инициализируем запечатанный класс (Locator.cs в исходном коде) в default.js, который имеет статические ссылки на несколько разных свойств. Единственное, что нас сейчас беспокоит, — это модель приложения. В более подробном приложении модель приложения может использоваться для хранения текущих данных приложения, таких как активные выборки. Для нашего простого приложения мы просто используем его как средство доступа к данным веб-службы через вызов GetEmployeeSalariesRemoteAsync(int page).
Настроив наш уровень данных таким образом, мы можем легко получить доступ к вызову через javascript. Ниже приведен подраздел страницы home.js:
[язык исходного кода = ”javascript”]
var app = Clarity.Samples.LargeDataset.Services.Locator.applicationModel;
var onReady = function (элемент, параметры) {
page = element;
viewModel = jsBind.as(new homeViewModel());
текущая страница = 1;
var promise = WinJS.Promise.wrap(app.getEmployeeSalariesRemoteAsync(parseFloat(currentPage)).then(employeesLoaded));
promise = promise.done(function () {
jsBind.processAll(page, viewModel );
return markup.processAll(page);
});
};
var employeeLoaded = function (employees) {
viewModel.employees = new jsBind.List (employees.map (function (employee) { return new employeeViewModel (employee) }), { binding: true });
var employeeList = document.querySelector("#employeesList").winControl;
employeeList.itemDataSource = viewModel.employees.dataSource;
};
[/sourcecode]
Приведенный выше код, очевидно, не запустится, если его скопировать и вставить, но давайте пройдемся по нему построчно. Сначала мы указываем переменную приложения в нашем пространстве имен модели приложения C#. В функции onReady мы создаем нашу модель представления, устанавливаем для текущей страницы значение 1, затем вызываем нашу модель приложения, чтобы получить данные о сотрудниках из веб-службы. Когда этот асинхронный вызов возвращается, мы переходим к функции employeeLoaded. Здесь мы сопоставляем каждый объект в списке, который был возвращен модели представления сотрудников javascript, и добавляем его в коллекцию сотрудников нашей базовой домашней модели представления. Затем мы получаем ListView winControl по его HTML-идентификатору и привязываем сотрудников к ListView. HTML-код для ListView показан ниже:
[язык исходного кода = "html"]
‹div id = "employeesList"
data-win-control = "WinJS.UI.ListView"
data-win-options = "{itemTemplate: select('#employeeTemplate'), layout:{type:WinJS.UI.GridLayout}, selectionMode:'none'}”›
‹/div›
[/sourcecode]
И шаблон:
[исходный код языка = "html"]
‹div id="employeeTemplate" data-win-control="WinJS.Binding.Template"›
‹div class="плитка сотрудника"›
‹header›
‹h2›‹span data-win-bind="textContent: name"›‹/span›‹/h2›
‹h3›‹span data-win-bind="textContent: jobTitle»›‹/span›‹/h3›
‹h3›‹span data-win-bind=»textContent: отдел»›‹/span›‹/h3›
‹h3›‹span data -win-bind="textContent: зарплата"›‹/span›‹/h3›
‹/header›
‹/div›
‹/div›
[/sourcecode ]
Как вы видели ранее, элементы ListView были привязаны к JavaScript. Это означает, что каждый элемент относится к типу employeeViewModel, который я пропустил из-за его простоты. Он просто содержит свойства, связанные в приведенном выше шаблоне.
Поскольку мы вытащили данные только на одну страницу, я добавил несколько кнопок страниц внизу страницы. Я не буду описывать реализацию, так как она довольно тривиальна, но всякий раз, когда вы нажимаете кнопку, она отправляет номер страницы в модель приложения. Модель приложения имеет константу, указывающую, сколько записей нужно извлечь (по умолчанию 12), и соответственно вычисляет начальное смещение. Например, если представление отправляет «13» в качестве номера страницы, модель приложения свяжется с веб-службой с начальным значением 144 ((13–1) * 12 — помните, что вы начинаете с 0 для страницы 1) и длина 12.
Вот и все. Если вам интересно, как синхронизировать все данные веб-службы с базой данных SQLite, вы можете ознакомиться со второй частью здесь.
Перейти к части 2 — Синхронизация наборов данных с SQLite
Источник
Clarity.Samples.LargeDataset.zip
Примечание. Городские власти Чикаго изменили названия переменных с прошлой недели на эту неделю, и я не удивлюсь, если они сделают это снова. Это может происходить только ежеквартально, когда они обновляют данные. Если вы запускаете проект и выдается ошибка javascript о том, что значение не может быть нулевым, это просто означает, что сопоставление необходимо переделать. Если вы откроете Fiddler и вернете значения, используя приведенный выше URL-адрес, а затем откроете Clarity.Samples.LargeDataset.Services.RemoteData.ServiceModel.Model.cs, вы увидите выше, что переменные Name, JobTitle, Department и Salary являются сопоставлениями имен. Если вы замените их соответствующими новыми числами из Fiddler, все должно снова отлично работать.
