16/06/2023
I dagens hurtigt voksende digitale verden er folks enhedsvalg mere varierede end nogensinde. Fra stationære computere til mobiltelefoner, tablets og endda smart-tv'er – internettet er den fælles adgangsport. At skabe en native applikation for hver enkelt enhed kan være en kostbar og tidskrævende affære. Derfor er udvikling af mobilbaserede webapplikationer blevet en attraktiv løsning, der tilbyder en bred rækkevidde og en ensartet brugeroplevelse på tværs af browsere og enheder. Denne artikel vil guide dig gennem processen med at udvikle sådanne applikationer ved hjælp af ASP.NET MVC og jQuery Mobile.
Vi vil dykke ned i, hvordan du implementerer mobilvenlige sider i ASP.NET MVC ved at udnytte NuGet-pakken jQuery.Mobile.MVC. Målet er at skabe et websted, der ikke kun ser godt ud på desktops, men også tilpasser sig elegant til mobile skærme, hvilket sikrer optimal brugervenlighed uanset enhed.
Grundlæggende om Responsive Design: Viewport Meta Tag
En af de mest afgørende komponenter for at opnå adaptiv rendering på dit websted er Viewport Meta Tag. Hvis du åbner et desktop-websted på din mobil, vil du ofte opdage, at indholdet er alt for stort, hvilket kræver konstant scrolling, og teksten er så lille, at den er ulæselig. Viewport-tagget hjælper os med at rendere siden i henhold til mobilskærmens størrelse, hvilket forbedrer læsbarheden og navigationen markant. For at definere viewport skal du tilføje et meta-tag i <head>-sektionen af din HTML-side, typisk således:
<meta name="viewport" content="width=device-width"/>
Dette simple tag fortæller browseren, at sidens bredde skal matche enhedens bredde, hvilket er grundlaget for et responsivt design. Meta-tagget har flere egenskaber, der giver yderligere kontrol over, hvordan indholdet skal skaleres og vises:
| Egenskab | Beskrivelse |
|---|---|
width | Bredden af enhedens virtuelle viewport. |
device-width | Den fysiske bredde af enhedens skærm. |
height | Højden af enhedens virtuelle viewport. |
device-height | Den fysiske højde af enhedens skærm. |
initial-scale | Den indledende zoom, når siden besøges. Værdien 1.0 betyder ingen zoom. |
minimum-scale | Den mindste mængde, besøgende kan zoome ind på siden. Værdien 1.0 betyder ingen zoom ud. |
maximum-scale | Den maksimale mængde, besøgende kan zoome ind på siden. Værdien 1.0 betyder ingen zoom ind. |
user-scalable | Tillader eller forhindrer brugeren i at zoome ind og ud. Værdier er yes eller no. |
Ved at mestre disse egenskaber kan du finjustere din applikations responsivitet, så den leverer en optimal oplevelse på tværs af utallige enheder.
Kom godt i gang med ASP.NET MVC og Mobiludvikling
ASP.NET-frameworket har indbygget understøttelse for at bygge mobilbaserede applikationer. Mens ASP.NET MVC har en "Mobile Application"-skabelon, der udelukkende kan udvikle en mobilbaseret webapplikation, ønsker vi ofte at understøtte både desktop og mobil fra samme kodebase. Den anbefalede tilgang er at udvikle desktop-udgaven først og derefter modificere webstedet til at fungere for mobil ved hjælp af jQuery.Mobile.MVCNuGet-pakken.
Oprettelse af en ny ASP.NET MVC-applikation
Lad os starte med at oprette en ny ASP.NET MVC-applikation, der understøtter både desktop og mobil. Åbn Visual Studio, gå til Fil > Ny > Projekt. I dialogboksen vælger du Visual C# > Web og derefter ASP.NET MVC 4 Web Application. Giv projektet et passende navn, f.eks. "TutorialMobilesite", og klik på OK. I den næste dialogboks vælger du skabelonen Internet Application og indstiller visningsmotoren til Razor. Afmarker "Create Unit testing" for dette projekt, og klik til sidst på OK.
Efter at projektstrukturen er oprettet, kan du køre applikationen for at se den i desktop-visning. Den skulle fungere fint. Nu vil vi forberede den til mobilvisning ved at tilføje en model, controller og visning, der kan bruges til at oprette nye formularer.
Tilføjelse af Model (OrderModel) og Databasekontekst
For at håndtere data skal vi oprette en model. Højreklik på mappen Models i Solution Explorer, vælg Tilføj > Klasse, og navngiv klassen OrderModel. Tilføj nogle egenskaber til OrderModel, f.eks. OrderID, OrderName, OrderPrice og OrderDate, med passende datavalideringsattributter.
For databaseadgang vil vi bruge Code First-tilgangen. Tilføj en ny klasse, DbconnectionContext, der arver fra DbContext i mappen Models. Denne klasse vil indeholde en DbSet for OrderModel og en konstruktør, der kalder basisklassen med forbindelsesstrengen. Du skal også tilføje en forbindelsesstreng i din web.config-fil for at specificere databasen (f.eks. DefaultConnection).
Tilføjelse af Controller (OrderController)
Højreklik på mappen Controllers, vælg Tilføj > Controller. Navngiv controlleren "OrderController". Vælg "MVC controller with read/write actions and views using Entity Framework" i skabelonsektionen. Vælg OrderModel som modelklasse og DbconnectionContext som datakontekstklasse. Når du klikker på Tilføj, vil scaffolding automatisk generere alle action-metoder (indsæt, opdater, slet) samt de tilhørende visninger.
Nu kan du køre applikationen og navigere til /Order for at se den genererede side i desktop-visning. Som forventet vil den ikke se optimal ud på en mobil enhed.
Forbedring af Mobiloplevelsen med jQuery Mobile
For at gøre applikationen mobilvenlig skal vi installere jQuery.Mobile.MVC-pakken fra NuGet Package Manager Console ved at køre kommandoen:
Install-Package jQuery.Mobile.MVC
Efter installationen åbnes en tekstfil, der instruerer dig om at tilføje BundleMobileConfig.RegisterBundles(BundleTable.Bundles); til Application_Start()-metoden i din Global.asax-fil. Dette er afgørende for at aktivere de mobile bundles.
public class MvcApplication: System.Web.HttpApplication { protected void Application_Start() { // ... andre registreringer ... BundleConfig.RegisterBundles(BundleTable.Bundles); BundleMobileConfig.RegisterBundles(BundleTable.Bundles); // ... andre registreringer ... } }Efter installationen tilføjes nye filer, som _Layout.Mobile.cshtml og _ViewSwitcher.cshtml, inde i mappen Shared. _ViewSwitcher.cshtml giver brugere mulighed for at skifte mellem mobil- og desktopvisning manuelt.
Kør applikationen igen, og test den i en mobil emulator (f.eks. Opera Mobile Emulator eller en Chrome-udvidelse som "Mobile/Responsive web design Tester"). Du vil se, at visningen er ændret, men muligvis støder du på en fejl, når du klikker på "Create New". Dette skyldes ofte en konflikt med jQuery-valideringsscripts i mobilvisningen. For at løse dette skal du fjerne eller kommentere følgende kode i dine mobilvisninger (f.eks. Create.cshtml):
@section Scripts { @Scripts.Render("~/bundles/jqueryval") }Nu skulle din applikation se meget bedre ud på mobilen uden at du skal skrive en masse mobil-specifik kode. jQuery.Mobile.MVC-pakken håndterer det meste af magien.
Hvad er jQuery Mobile?
jQuery Mobile er et undersæt af jQuery, et JavaScript-bibliotek designet til at forenkle processen med at skrive kode til websites med mobilfunktioner. Det giver udviklere mulighed for at udføre de samme funktionaliteter for mobilapps, hvilket gør det muligt at skrive tværplatform apps ved hjælp af JavaScript. Det er et rammeværk for udvikling af responsive websteder eller webapplikationer til alle slags smartphones, tablets og desktop-enheder.
Avanceret Visningsstyring med Display Modes
For at håndtere situationer, hvor du ønsker specifikke visninger for forskellige mobile operativsystemer (f.eks. Windows Phone, iPhone, Android), kan du bruge Display Modes. Dette giver dig mulighed for at vise en visning baseret på den enhed, der anmoder om den. Du tilføjer DisplayModeProvider i din Global.asax-fil:
using System.Web.WebPages; // Husk denne using-sætning DisplayModeProvider.Instance.Modes.Insert(1, new DefaultDisplayMode("WP") { ContextCondition = (ctx => ctx.GetOverriddenUserAgent() .IndexOf("Windows Phone OS", StringComparison.OrdinalIgnoreCase) > 0) }); DisplayModeProvider.Instance.Modes.Insert(1, new DefaultDisplayMode("iPhone") { ContextCondition = (ctx => ctx.GetOverriddenUserAgent() .IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) > 0) }); DisplayModeProvider.Instance.Modes.Insert(1, new DefaultDisplayMode("Android") { ContextCondition = (ctx => ctx.GetOverriddenUserAgent() .IndexOf("Android", StringComparison.OrdinalIgnoreCase) > 0) });Med disse display modes på plads kan du nu oprette enhedsspecifikke visninger. Kopier f.eks. din Create.cshtml-fil og omdøb den til Create.Android.cshtml, Create.WP.cshtml og Create.iPhone.cshtml. ASP.NET MVC vil automatisk vælge den mest specifikke visning baseret på brugeragenten.
Oprettelse af Bundles til Mobilvisninger
For at optimere indlæsningstider og strukturere dine scripts og stylesheets specifikt til mobilvisninger, skal du oprette separate bundles. Åbn BundleConfig.cs i mappen App_Start og tilføj følgende kode i RegisterBundles-metoden:
bundles.Add(new ScriptBundle("~/bundles/Mobilejs").Include( "~/Scripts/jquery.mobile-1.*", "~/Scripts/jquery-1.*")); bundles.Add(new StyleBundle("~/Content/Mobilecss").Include( "~/Content/jquery.mobile.structure-1.4.0.min.css", "~/Content/jquery.mobile-1.4.0.css"));Disse bundles vil indeholde JavaScript- og CSS-filer, der er specifikke for mobilvisninger, og de vil blive refereret i dit mobilspecifikke layout.
Design af Layout for Mobilvisninger (_Layout.Mobile.cshtml)
Kopier din eksisterende _Layout.cshtml til _Layout.Mobile.cshtml i mappen Views/Shared. Rediger _Layout.Mobile.cshtml for at inkludere de nye mobilbundles og jQuery Mobile-specifikke attributter. Et typisk eksempel på head-sektionen vil se således ud:
<meta charset="utf-8" /> <title>@ViewBag.Title – Mobil Applikation</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @Styles.Render("~/Content/Mobilecss") @Scripts.Render("~/bundles/Mobilejs") @Scripts.Render("~/bundles/modernizr")Inde i <body>-tagget kan du bruge jQuery Mobile's data-role-attributter til at definere sidestruktur, f.eks. header, indhold og navigation. Disse attributter giver form og adfærd til dine HTML-elementer, hvilket gør dem mobilvenlige. Eksempelvis:
<div data-role="page" data-theme="a"> <div data-role="header" data-position="fixed" data-theme="b"> <h1>@ViewBag.Title</h1> <div data-role="navbar" data-theme="a" data-iconpos="top"> <ul> <li><a href="@Url.Action("Index", "Home")" data-icon="home">Hjem</a></li> <li><a href="@Url.Action("AllProducts", "Product")" data-icon="check">Produkter</a></li> </ul> </div> </div> <div> @RenderSection("featured", false) @RenderBody() </div> </div>Bemærk attributter som data-role, data-position og data-theme. Disse er centrale for jQuery Mobile's funktionalitet og gør det nemt at skabe mobiloptimerede UI-elementer.
Design af Produktsider for Mobil
For dine produktsider, f.eks. AllProducts.Mobile.cshtml, kan du bruge jQuery Mobile's UI-komponenter til at præsentere data på en mobilvenlig måde. Et almindeligt mønster er at bruge et "collapsible set" til at vise produktdetaljer. Dette organiserer indholdet pænt og sparer plads på små skærme:
<div data-role="collapsible-set" data-inset="true"> @foreach (var item in Model) { <div data-role="collapsible"> <h3>@item.ProductName</h3> <ul data-role="listview" data-theme="a" data-divider-theme="a" > <li style="white-space:normal"> <h4>Detalje:</h4> <div>@item.ProductDescription</div> </li> </ul> </div> } </div>white-space:normal er vigtigt for at sikre, at tekst ombrydes korrekt inden for de mobile skærmbredder. På samme måde kan du designe en side som CategoryWiseProducts.Mobile.cshtml med en rulleliste for kategorier og dynamisk indlæsning af produkter via JavaScript.
Test af Mobilvisninger
Under udviklingen er det essentielt at teste din applikation på forskellige mobile enheder eller emulatorer. Udover Opera Mobile Emulator kan du bruge Chrome-udvidelser som "Mobile/Responsive web design Tester". Denne type udvidelse giver dig mulighed for at simulere forskellige enheder (f.eks. Galaxy S6, iPhone 4) direkte i din browser, så du kan se, hvordan dine enhedsspecifikke visninger renderes.
Når du kører applikationen og vælger en specifik enhed i testeren, vil du se, at de korrekte enhedsspecifikke visninger (f.eks. Create.Android.cshtml eller Create.iPhone.cshtml) popper op, hvilket beviser magien ved jQuery.Mobile.MVC-pakken og Display Modes.
Ofte Stillede Spørgsmål
Hvorfor vælge webapplikationer frem for native apps?
Webapplikationer er ofte mere omkostningseffektive at udvikle og vedligeholde, da de kan køre på tværs af flere platforme uden at kræve specifik kode for hvert operativsystem. De er også lettere at opdatere, da ændringer blot skal udrulles til serveren, i modsætning til native apps, der kræver app-butiksopdateringer. Webapps kan også findes via søgemaskiner, hvilket forbedrer synligheden.
Hvad er den vigtigste fordel ved Viewport Meta Tag?
Den vigtigste fordel ved Viewport Meta Tag er dens evne til at instruere browseren om at skalere og tilpasse webstedets indhold til enhedens skærmstørrelse. Dette sikrer en læsbar og brugervenlig oplevelse på mobile enheder, uden at brugeren behøver at zoome eller scrolle horisontalt for at se hele indholdet.
Kan jeg bruge et andet mobil-framework end jQuery Mobile?
Ja, absolut. Mens denne artikel fokuserer på jQuery Mobile, er teknikkerne med ASP.NET MVC's Display Modes og View Switcher generelle og kan anvendes med andre populære mobil-frameworks som Kendo UI, Bootstrap (med responsive design) eller andre JavaScript-baserede UI-biblioteker. Princippet er at levere en enhedsspecifik visning baseret på klientens brugeragent.
Hvordan tester jeg min mobilapplikation under udvikling?
Udover at teste på fysiske enheder kan du bruge browsere som Chrome med indbyggede udviklerværktøjer (Device Mode) eller installere browserudvidelser som "Mobile/Responsive web design Tester". Disse værktøjer simulerer forskellige skærmstørrelser og brugeragenter, hvilket giver dig mulighed for at teste din applikations responsivitet og enhedsspecifikke visninger effektivt.
Er det nødvendigt at lave enhedsspecifikke visninger?
Det er ikke altid nødvendigt at lave fuldstændig enhedsspecifikke visninger for hver mobilplatform (f.eks. iPhone, Android, WP). Ofte er et enkelt, responsivt design, der tilpasser sig alle skærmstørrelser, tilstrækkeligt. Enhedsspecifikke visninger er mest relevante, når du har brug for at levere en unik brugeroplevelse eller specifikke funktioner, der er optimeret til en bestemt platforms UI-konventioner eller tekniske begrænsninger.
Konklusion
Denne artikel har vist, hvordan du kan udvikle kraftfulde, mobilbaserede webapplikationer ved hjælp af ASP.NET MVC og jQuery Mobile. Vi har dækket alt fra grundlæggende responsive principper med Viewport Meta Tag til avanceret visningsstyring med Display Modes og enhedsspecifikke layouts. Ved at udnytte ASP.NET MVC's fleksibilitet og jQuery Mobiles rige sæt af UI-komponenter kan du skabe enestående brugeroplevelser på tværs af alle enheder. Mobil webudvikling er en kontinuerlig rejse, men med disse værktøjer er du godt rustet til at imødekomme de stadigt skiftende krav fra det mobile landskab.
Hvis du vil læse andre artikler, der ligner Byg Mobile Webapps med ASP.NET MVC og jQuery Mobile, kan du besøge kategorien Teknologi.