Вежбе – Четврти час – Креирање tag-helper-a, основе тестирања и рад са компонентама

повратак

Наставак унапређивања и додавања нових функционалности интернет продавници.

Задатак: На страни коју посматра корисник су приказани сви производи који постоје у бази. Желимо да изменимо приказ тако да на свакој страни буде приказано n производа и да корисник лако може да се креће по странама и прегледа све производе. Направити навигацију тако да корисник може да прегледа различите категорије производа.

Почетни кораци:

• У ProizvodController.cs додаје се параметар VelicinaStrane којим се задаје колико производа се приказује на свакој страни.
• Мења се метод Spisak (Resenje1 у коментарима) коме се додаје додатни параметар tekucaStrana на основу ког се врши исписивање производа
• Приликом покретања да би се приступило другој страни производа: https://localhost:broj/?tekucaStrana=2

Tag helpers:

• Документација
• Желимо да омогућимо да корисник може да кликне на линк који га води ка другој, трећој… страни производа (а не да ручно куца адресу)
• За ту сврху ћемо креирати tag helper
• Tag helper приликом превођења мењају HTML елементе у погледу (view)
• Постоје уграђени (и неке ћемо и ми користити)
• А могу се писати и сопствени tag helper-и.
• Tag helper-и се смештају у Infrastructure/TagHelpers фолдер.
• У пројекту је креиран PageLinkTagHelpers – погледати ову класу и обратити пажњу на коментаре који објашњавају сваки део кода.
• У Spisak.cshtml се додаје: <div model-strane="@Model.ModelStrane" akcija="Spisak"></div>. Када се преведе биће замењен са <a href... таговима (погледати inspect element у браузеру)

View Models:

• Поред класа којима се моделују подаци, понекад су потребне класе које моделују оно што се преноси у погледе (razor странице).
• У овом примеру направљене су две такве класе: PodaciZaPrikazStrane и SpisakProizvodaViewModel
• Класа PodaciZaPrikazStrane се користи да се у њу сместе подаци потребни за tag helper који је написан (погледати коментаре у коду)
• Класа SpisakProizvodaViewModel се користи да би се razor страници Spisak пренели сви потребни подаци (низ производа + PodaciZaPrikazStrane)
• Мења се метод Spisak (Resenje2 у коментарима) и razor страници се прослеђују мало другачији параметри

Стилизовање tag helper-а

• Да би tag helper могао да се користи потребно га је регистровати. То значи да је потребно у ViewImports укључити написане tag helper-е.
• Да би додали стил, потребно је додати поља у класу PageLinkTagHelpers: KlasaElementa, KlasaElementaNormalno и KlasaElementaSelektovano
• Да би руте лепо изгледале обратити пажњу на промене у Startup.cs и позиву MapRoute

Тестирање

• Важан део сваког пројекта је и тестирање. Са развојем кода требало би паралелено развијати тестове.
• Креирање UnitTest: Add->New Project -->xUnitTest
• Задати ново име и одабрати Add to this solution.
• Десни клик на име пројекта па Manage NuGet Packages, одабрати Moq и Install.
• Десни клик па Add --> Reference и онда одабрати жељени пројекат (обратити пажњу на измене у .csproj фајлу).
• Погледати примере тестова: UnitTest1 и ProizvodControllerTests
• Тестирати: Test--> Test Explorer --> Run

Парцијални погледи

• Документација
• Понекад је згодно део razor странице издвојити у посебан поглед да би се смањила комплексност и да би могао део кода више пута да се користи.
• Парцијални поглед се смешта у Shared фолдер. На пример, у овом пројекту је стављен у Views/Proizvod/Shared/_ProizvodIspis.cshtml
• Парцијални поглед се може лако уметнути у текућу страницу коришћњем уграђеног tag helper-а: partial (погледати Spisak.cshtml)
• Потребни подаци могу бити прослеђени коришћењем атрибута for

Додавање навигације:

Почетни кораци

• У SpisakProizvodaViewModel додати TrenutnaKategorija
• Изменити метод Spisak који сада филтрира производе и према категорији (у методи додати још једно поље trenutnaKategorija)
• Покренути и пробати https://localhost:5001/Proizvod/?trenutnaKategorija=racunar
• Потом променити изглед рута у Startup.cs:
  • увек се прво наводи најдужа рута (у нашем примеру то је рута облика ../kategroija/stranaBr, нпр. https://localhost:5001/Proizvod/racunar/Strana2)
  • на крају се наводи најопштија могућа рута
  • погледати коментаре у коду у Startup.cs
  • више о рута у документацији

Коришћење ViewComponent ради додавања навигације

• Више о ViewComponent, као и разни примери могу се видети у документацији.
• Направити фолдер Components, а у њему NavigacijaViewComponent
• Додати метод Invoke
• Креирати Razor страницу за приказ комоненте: Views/Shared/Components/Navigacija/Default.cshtml. Називи су битни и путања мора да изгледа овако. (подразумеване путање се могу променити у конфигурацији)
• У _Layout.cshtml позвати компоненту са @await
• Обележавање тренутне категорије у навигацији: компоненти је (поред низа категорија) неопходно проследити и тренутну категорију. Направити NavigacijaViewModel и изменити Invoke.

повратак