Bootstrap Modal Content Control

This project demonstrates a component built for a client which operates a bilingual website. Requiring a versatile yet uniform solution the end result is an elegant addition to ASP.NET and Bootstrap4 platforms.

Components

• ASP.NET
• .NET Framework 4.6
• Razor 3.2
• Entity Framework 6.3
• Bootstrap 4.3
• JQuery 3.4 & Ajax

Problem

The website manages bilingual content through resource files. English, French and Spanish content is stored in matching files with english language files as default and the others identified with a suffix of “.fr-Ca” or “.es-Us” accordingly. Setting a culture via CultureInfo to any of these languages determines which resource file is used. While this configuration works great for rendered pages like Razor, static files like Javascript cannot retrieve content from the resource files. The project originally worked around this problem in a variety of awkward implementations such as setting global javascript variables in Razor, or through Ajax call on document ready. Intending to use the global variable content in alerts, confirmations and various modal forms, these methods of retrieving bilingual content were unscalable, unsightly and unsuitable for a project intended for larger-scale deployments.

Solution

Two methods of retrieving bilingual content, Static Content and Dynamic Content, retrieve content from the resource files at load time or on demand and presents this content in appropriate modal elements. Each modal element submits through a standard script and consistent naming convention.