HTML 5 Пример за използване на нокаут, усилване и подчертаване или JsSite като начална архитектура за
В една от предишните статии говорих за nuget пакет, наречен JsSite. Напоследък доста често и продуктивно трябваше да работя с този пакет и в резултат на това самият пакет претърпя голям брой промени. Целта на тази статия е да опише възможностите (включително нови), които този набор от скриптове предоставя.
Пример за употреба или как да използвате.
В примера ще изградим MVC приложение, което ще покаже списък със служители (взет от пакета SampleData nuget), използвайки AJAX, Web API и knockoutjs. Ключовият момент е не само да показвате данни, но и да ги пагинирате, да свържете прост филтър и възможността да зададете броя на записите на страница.
Освен това наистина искам веднъж да напиша услуга за работа с обект и след това, ако е възможно, да го използвам на различни страници и / или в различни заявки (включително типа „Master/Details“).
Подготовка за работа
Нека създадем ново ASP.NET MVC приложение. Избрах новия (след ASP.NET и Web Tools 2012.2) шаблон MVC4 Basic, където папките Controller и Model са празни. Ще нарека проекта JsSitePackageDemo2 и можете да правите каквото искате. Нека започнем да актуализираме всички предварително инсталирани пакети, като изпълним командата update-package в конзолата на Package Manager. И след това ще инсталираме няколко допълнителни пакета:
Включвам нов CSS, който се появи с инсталирания JsSite пакет (вижте ред 2):
Сега можете да продължите директно към кодирането. Като се има предвид, че в този шаблон няма контролери и файлът RouteConfig.cs съдържа маршрут до домашния контролер:
Назрява въпросът защо разработчиците го оставиха или защо премахнаха Home контролера? Е, добре, не е това въпросът. Променете името на контролера на „Сайт“ и създайте новконтролер с това име.
Ще добавя изглед (View) към метода Index. На този изглед ще практикуваме писане на код. Първо, ще добавя връзки към скриптовете на библиотеките в раздела скриптове. Като се има предвид, че jQuery вече е инсталиран (пакет / jquery в шаблона), тогава просто трябва да добавя връзки към библиотеки и скриптове на трети страни от пакета JsSite:
Все още не се занимавам с оптимизиране на скриптове: „залепване“ и „компресиране“, но в реален проект не можете без него. Едно от решенията беше описано по-рано.
Има друг файл в папката App, който не съм добавил към страницата. Факт е, че този файл е само пример за писане на услуга за DataSource. Ще се занимаваме с писането на услугата малко по-късно. Първо, страната на сървъра.
Уеб API + OData
Нека създадем нов API контролер, нека го наречем PersonController:
Не забравяйте, че шаблонът е „API контролер…“. Ето как изглежда кодът на този контролер след някои модификации и прост, но не окончателен:
Ред 2: създайте променлива за съхраняване на списъка с потребители. Не забравяйте да добавите пространството от имена SampleData.
Редове 4-6: в конструктора попълваме списъка.
Ако използвате отличната помощна програма Fiddler, можете да тествате услугата, като изпратите заявка:
и получете отговор в:
OData вече е лесно
Малко лирично отклонение. Протоколът OData вече е в MVC4 (не е пълна реализация, но не е достатъчно). За да превърнем нашия PersonController в контролер, който ще разбира OData заявките, трябва да инсталираме друг nuget пакет Microsoft.AspNet.WebApi.OData, който ще добави магическия атрибут Queryable.
Ако не сте запознати с протокола OData, тогава ви съветвам да се запознаетесайтът, споменат по-горе. Можете също да намерите документацията за употреба (спецификация) там. След като инсталирате пакета, можете да поставите атрибута [Queryable] над метода Index в PersonController.
Какво дава? Това всъщност е, не се страхувам от тази дума, „революционна“ технология за изграждане на заявки директно в реда на браузъра, тоест можете да формирате заявки към базата данни от реда на браузъра (!) Директно. Спецификацията на протокола е твърде голяма, за да я обхване в един малък параграф, но за да разберете принципа, вижте диаграмата:
Красотата на този подход е, че „заявката се изпълнява директно на SQL сървъра“. Това лирично отклонение се случи, защото вчера Microsoft.AspNet.WebApi.OData беше пуснат в състояние на издание под номер на версия 4.0.0.
Да се върнем към нашия Web.API. За да може услугата да връща пагинирани данни (това е нашата цел, нали?), трябва да „пропуснете“ поне един параметър в метода Get () – номера на страницата (pageIndex), а ако искате да контролирате броя на записите на страницата от страна на клиента, тогава вторият параметър трябва да бъде – размер на страницата (pageSize). Без преконфигуриране на маршрутите на Web.API, няма да можете да „вкарате“ споменатите параметри в метода за извикване. Нека настроим маршрут. Добавих един нов маршрут (във файла WebApiConfig), за да накарам Web.API да "разбира" новите параметри "номер на страница" и "размер на страница" (вижте редове 3-7), а не само идентификатора (Id, вижте редове 9-12):
Ред 5: обърнете внимание на „тирето“, ще ни трябва по-късно (всъщност е за „красота“, така че да е по-лесно да се позоваваме в статията). След като маршрутите са настроени, можете да работите с метода Get на PersonController.
Ред 1: Връщане на повече от колекцияобекти, но обвити в специален клас HttpResponseMessage, който предоставя много полезни неща, като например състоянието на операцията на заявката. Също така добавяме параметри към сигнатурата на метода.
Ред 3-6: Ако са получени „номер на страница“ и „размер на страница“, извличане.
Ред 9: Създайте върнатия обект (вижте следния списък). Можете също да използвате анонимен тип, но ми харесва писането:
По-нататък в списъка на метода Get().
Ред 10: Връща резултата със статуса. Обърнете внимание на параметъра „Елементи“ и „Общо“. За да работи пейджърът, трябва да знае колко записа има. Тези параметри се използват от site.controls.DataSource() от пакета JsSite.
Моделът на услугата site.services.person.js
След като API услугата е готова, дойде време за js услугата. Когато инсталирате пакета JsSite, файлът site.services.js също се появява в папката App. Както вече споменахме, това е демонстрация на услугата, която site.controls.DataSource() трябва да работи. Преработих го, адаптирах го към класа Person и промених името му. Сега се нарича site.services.person.js и съдържа много редове. Не внедрих методите addPerson, updatePerson, deletePerson, но все пак ще дам целия файл и след това ще го анализираме ред по ред:
Забележка: Не забравяйте да добавите връзка към този скрипт към Index.cshtml.
И така, какво прави този код? По ред.
Ред 5-33: Инициализираме услугата. Конфигуриране на amplify за работа с Web.API. Тук „отметката“ беше полезна (вижте ред 9).
Ред 35-106: Услуга за работа с обекта Лице. Всички действия на едно място и най-важното - веднъж! Освен това DataSource ще вземе тази услуга и ще работи с нейните методи.
О да! Най-важните! Можешнаричайте частни методи както искате, но методи с точно същото име, както е посочено в ред 109-112, трябва да бъдат „изложени“: „load“, „put“, „post“ „del“. Важно е!
Метод за получаване на данни или зареждане на данни
Редове 37-58 в предишния списък дефинират метода за получаване на списъка с потребители. Този метод използва идентификатора на името "loadPerson", който беше инициализиран по-рано в редове 8-11. В ред 40 получените параметри от DataSource („индекс“ и „размер“) се предават на заявката, amplifyjs ще подреди параметрите в съответствие с индикацията (вижте ред 9) чрез „тирето“.
Ред 41-56: Обработчици на получени данни. В редове 43-47 проверяваме получения обект и издаваме съобщение, а след това в редове 48-51 връщаме получените данни (json.Items) към DataSource.
Ред 55: Ако възникне грешка в услугата, върнете „нищо“ към DataSource :)
И къде е DataSource или покажете ViewModel на изгледа
Най-простият код в случая на използване би бил js-viewModel за моята страница Index.cshtml. Като цяло той съдържа само един контрол - DataSource, към него е обвързан формулярът (в следващия параграф). Ето го ViewModel:
Ред 6: Създайте обект часовник. Обикновено първо го добавям към формуляра, така че преди да започна програмиране, проверявам дали скриптовете са правилно свързани, инициализирани и HTML свързването (applyBindings) е конфигурирано правилно.
Ред 7: Създаваме обект „метаданни“ за красота.
Ред 11: И накрая, създаваме същия обект „DataSource“, в чийто конструктор „пропускаме“ параметрите „autoLoad“ със стойност „true“, между другото, това е стойността по подразбиране. И вторият параметър е „услуга“, чиято стойност е именно нашият човек-услуга, описан по-горе.
всичкопараметрите и възможностите на DataSource се планира да бъдат описани в следващата статия.
Обратно към формата
И като резултат:
Зависимости или главни/детайли
Създадох API услуга и js услуга за обекта „Отдел“ (също в SampleData) и леко коригирах ViewModel, така че когато е избран отдел, списъкът на служителите се променя:
Разбира се, трябваше да коригираме маршрутите, така че новият параметър „departmentId“ да е достъпен за PersonController. И самият метод Get на PersonController трябваше да бъде финализиран, така че да „разбира“ новия параметър и пакетът „master / details“ да работи.
И така, на ред 11 създадох параметъра queryParams за DataSource, а на ред 14 го използвам. Същият ред деактивира зареждането по подразбиране (autoLoad: false) за списъка със служители. queryParams също така предефинира размера на страницата по подразбиране (размер) (10) до нов размер 4.
Редове 16-18: Създаден източник на данни за обекта отдел.
Редове 20-22: Функция за обработка на щракване върху ред в таблицата с разделения (вижте списъка под ред 11).
Редове 29 и 30 излагат новите класове и променливи навън.
Добавена е таблица с деления (редове 2-17).