How to Create a Modular Web Application in ASP.NET Core? © Amine reas This etle explain cresting of modular web appaton im ASPNET Core using Aves, Modular programing Modular programming splits the projects into saveral modules based on feature and considers each module a separate project For example, consider 9 equcement io crete s web aplication for» cllege, The application must provide information abou valle actos and courses, admission process, faculty deal, achievements (both academic anéexvacurcular activites) s far ané contact tals ‘You can spl he requrement ito 6 modules as fllos: Facies, Courses, Admission, Faculy, Achievements and ContactUs. Each module wil be considered a8 separate projet and handled by separate team. Fray ll these pojects ae integrate. Benefits of modular programming ‘+ Rapid development ~ Different teams or members can workin all madues simultaneously which wil rece project completion time ‘+ Easily manageable codebase - Code can be manages esi n each mocule without any comple. ‘+ Easy woubleshocting~ you can ind the troubleshooting easly as each module i considered a a separate project and canbe resolves‘eaaly without making it much complex ona single project ‘Definite responsi fr teams/members- Each sem or member ofthe each module wil have predefnes respaneloly inthe project, Areas in ASPNET Core ‘res ASPNET Core is sed for eeating® modular web application, where each module is ereated as ate in an ASPET Core apotication. Creating ASPINET Core Application with Areas ‘The following steps provide detailed information to create an ASPNET Core web application with areas: [Adding Are in ASPET Core web applieation 1, Open the Vieusl Studio instance and click on Create New Project, Visual Studio 2022 2. Search for ASPNET Core and find ASPNET Core Web App (Medel-View-Controlle) template frm the ist and cick on Next Create a new project 4 o 3. Inconfiguation window, sect he locetion to save the appllestion snd give the name to applet an eck on NexConfigure your new project, 19ner coe gp timc et ene Additional information 5, Right-click he project in sohtion explorer and navigate tothe Add menu, Then, lick New Seaffolded item nthe Ist. Inthe Seatfolded‘tem lat select MVE Area and clk Add att Set tee coment Conon Som ane ne Add New Sale tem (Smee cee —_ cag eas ——— ee outing with at In ASPNET Core MVC web aplication ‘The configuration for routing included nthe Program.cs fl nthe rat of web apaliction. Routing path template fr areas is shown inthe following zode snippet.‘1rowting path venplate for controllers, action wethods in areas ap .usetnepoints(engpotnts => ‘ ‘endpoints. Mapcontrotiertoutet pattern: “{area:extste}/{controlLersHone}/{acttonsInden}/{46?)" y Di ‘routing path venplate for controllers, action wethoés in the application root ‘app -tapControlertoutet ane: “eefaule”, pattern: "{controllerone}/{actionerncex}/(10?)") You can ind the complete code of Programe fle in Gib, [Adding Viewimports ‘Add all the commonly used dectives in multiple views in he -Viewimpors cs feof he apstction. You should eeate-Viewlmports.eshiml foreach ara, if you want to add sirectves foreach area separately 1L._ightclck he Are and select New tm to open the Add New tem window. Ree B Venntewe Gapecnene) — GnsNneN fb repee—$$aae Ss ‘eaten hk ce a te tae = a [8 crm. ES [ 1 coor oe " a E oer Lean Somartmaavee 9 corarien ao eee ioe 2, Select ASPNET Core > Web net te view and Razor Vewimports frm te lt of templates, aa woe | eee ch —— i aa Tae a Damen as eos = ‘SE Son Cocke ah a 1 25 creren Pg comeceoserces 68 oeoeraeces aga Popes > 2 wanct aE vee 9 9D apoeningsion ADB Seaolangtetene‘You can in the complete code of Viewimporte cei il in Civ, Adding Viewstart, Codes that shouldbe run befeve the codein each view should be ade in thi le. Her, added the Layout property ofthe aplication ahi fe 1 of setting Layout o29ch view separately, You should create ViewStar.eahtml foreach area you want toad for ach area since itsnot included by deft, 1. Rightetck the Area aa E evnvowr tanger cS mo ae ees S ca pee = = i eaenere eee = A (seme cee ae as eee Pyare Sees pieccamtaas a se 5 Riess en | em = cree = el Emm — as a — Sf wee = i a tao — Bm one Py te — Tica tomes oT 25 orden Pg comet Series > 68 depercences Besson 9 aD spoernarzon 1B SeaftinpteneneYou can ind he complete code of ViewStat.eshim in Gia, attaining layout You can ute applic yout or define individu ayout for Area, 1, commen Layout 2. Individual Layout ‘Common layout ‘Neo uses aplication layout intend of separate layout. nthe Below code exams the common yout of appetion used fr the Calendar ‘Are To a8 common lout, athe blow code in “~/Area/Calendar_ViewStart.cshimt « Layout = "~/Views/Sharea/_Layout.cshenl" 22 woes FS ante ‘Separate layout foreach area ‘reo uses separate layout forth area crested oer than the appiaton layout In the below code example, the separate layout it dined forthe (Gr Area. To ad the separate njour, define the separate ayou in “»/Areas/Grid/Views/Mome/Shared/ Layout cs”. To apply tis separate lyoutto the area, add te below code in“~/Areas/ Gril ViewStar.eshiml leLayout = “Layouts Instaling Synefusion NuGet ‘To.dd ASPNET Core components inthe policetion, open the NuGet package manages Visual Studio (Tools NuGet Package Manager > Manage NuGet package or sition), search for Synusion Fu? AapNet core an then ital Including Synfusion TagHspers in Areas pacity tn Synefusion E12 Taghelpe ectives in Viewimports.cehtml for using thm in wew pages. Each ares should nave a separate _Viewimportscehtml ie along with the default ile ia thereat deactory of this appiation aseraptelper *, syncfusion. 22 ‘You can find complete code of Viewimpors.eshm fen Cu. [Adding Syl and Scripts reference Now adhe requited theme and septs in ofthe ~/Views/ Shared Layout eshtml page to apply fr the controle a below script sreetheeps://cen.syncfusion-com/ej2/28.1.60/6ist/ej2.nin.Js"> cinese> You can find the complete code of -Layout.cetm! ein Gu, Register Synotusion Script Manager ‘Now, register the Synctusion serps inthe «ag of he ~/Vlews/Shared/_Layoutcehtml page a belowIo» Synetuston ASP.NET Core Serie Manager cejs-scriptssciegs-scripts> erveey> You can ind he complete code of Layout.eei fein ib A ing Synetuson Contols Now, adhe requited Sypefusion cool ine View af ea Le, i ~/Area8/GridViews/Home/indexcahtml page 08 flows charts Area's View/n2> tonto” aacasoure "VLewBag.catasource” allowPaging="crve"> cengrid-pagesettings pagecourt="5"> cevgrid-coluans) iridecolunn field="OrdertO" headertext="Order IO" textAligns"Right™ wigthe"120"> ce-grid-colum flelé="shipcountry" headerText="Ship Country” wloth="15 feet s/ess-eri ‘You can ind he complete code of Indexes fen i View Sample in iid