Uw eerste ASP.NET-webtoepassing: hoe u aan de slag gaat

ASP.NET is het gratis platformonafhankelijke framework van Microsoft voor het bouwen van web-apps en -services. Het ASP.NET-platform is een uitbreiding op .NET, een ontwikkelaarsplatform van tools, programmeertalen en bibliotheken die worden gebruikt om verschillende applicaties te bouwen.

Zoals je waarschijnlijk al geraden hebt, is ASP.NET een fantastisch framework dat beginners kunnen gebruiken om web-apps te bouwen. Het biedt veel flexibiliteit en is eenvoudig in gebruik. In dit artikel gaan we u helpen uw eerste webtoepassing in ASP.NET te maken met Microsoft Visual Studio.

Wat is ASP.NET?

ASP staat voor "Active Server Pages"; ASP en ASP.NET zijn server-side technologieën die worden gebruikt om interactieve webpagina's weer te geven. ASP.NET biedt ontwikkelaars veel flexibiliteit in een omvangrijk, veelzijdig ecosysteem met verschillende bibliotheken en tools. Ontwikkelaars kunnen ook aangepaste bibliotheken maken die ze kunnen delen met elke toepassing die op het .NET-platform is gemaakt.

Verwant: Webframeworks die het leren waard zijn voor ontwikkelaars

U kunt de back-endcode voor uw ASP.NET-toepassingen schrijven in C#, Visual Basic of zelfs F#. Deze flexibiliteit stelt ontwikkelaars in staat om de bedrijfslogica en gegevenstoegangslaag effectief te coderen. Een ander belangrijk voordeel van het gebruik van ASP.NET is het bouwen van dynamische webpagina's met C# met behulp van een syntaxistool voor webpaginatemplates die bekend staat als Razor.

Razor biedt ook een syntaxis voor het maken van interactieve dynamische webpagina's met HTML, CSS, JavaScript en C#. De code aan de clientzijde is meestal in JavaScript geschreven en ASP.NET kan zelfs worden geïntegreerd met andere webframeworks zoals Angular of React.

Verwant: Tailwind CSS vs. Bootstrap: wat is een beter framework?

ASP.NET biedt ontwikkelaars ook een authenticatiesysteem met een database, bibliotheken, sjablonen voor het beheren van aanmeldingen, externe authenticatie bij Google, Facebook, enz., en meer. Ontwikkelaars kunnen ASP.NET gebruiken op alle grote platforms, waaronder Windows, Linux, macOS en zelfs Docker.

Een ASP.NET-webtoepassing maken in Visual Studio

Voordat u een webtoepassing maakt, kunt u het beste vertrouwd raken met HTML, CSS, JavaScript en C#, zodat u het meeste uit ASP.NET kunt halen. Laten we eens kijken hoe u een webtoepassing kunt maken in ASP.NET in Microsoft Visual Studio 2019.

Zorg ervoor dat u de volgende softwarepakketten hebt geïnstalleerd:

• Microsoft Visual Studio 2019 of beter
• Werkbelasting voor ASP.NET en webontwikkeling vanuit het installatieprogramma van Visual Studio

De onderdelen van het ASP.NET-webtoepassingsproject begrijpen

Voordat u kunt beginnen met het ontwikkelen van uw webapp, is het van cruciaal belang om de essentiële componenten van ASP.NET te begrijpen en hoe u deze in uw webtoepassing kunt gebruiken.

In deze zelfstudie gebruiken we ASP.NET-webformulieren om de afzonderlijke webpagina's te maken, zoals de startpagina, contact met ons opnemen, enz. Elk webformulier heeft drie hoofdcomponenten, een .aspx-bestand voor de HTML/CSS, een .aspx.cs-codebestand en een .aspx.designer.cs-bestand. Voor deze zelfstudie werken we voornamelijk in de .aspx- en .aspx.cs-bestanden.

Het .aspx-bestand bevat alle HTML- en CSS-code van uw webpagina's. Zorg ervoor dat u asp-tags gebruikt in plaats van HTML-tags, omdat asp-tags gegevens ophalen van de server en invoergegevens naar de server verzenden. Dit is het functionaliteitskenmerk dat vereist is in een dynamische webapplicatie.

Het .aspx.cs-bestand bevat de C#-code van uw webpagina's en dit bepaalt wat er gebeurt wanneer een bepaalde gebeurtenis, zoals een webpagina, wordt geladen, op een knop wordt geklikt en meer. U kunt voor elke functie aparte functies maken en deze koppelen aan de relevante asp-tag in het bijbehorende .aspx-bestand.

Hoofdpagina's zijn gunstig voor ontwikkelaars en voegen essentiële componenten zoals de navigatiebalk en voettekst toe aan elke webpagina. In plaats van steeds dezelfde code toe te voegen, kunnen ontwikkelaars alle door een sjabloon vereiste code in één hoofdpagina toevoegen en vervolgens elke webpagina aan de hoofdpagina koppelen. In de volgende paragrafen laten we u zien hoe u dat kunt doen.

Een nieuw ASP.NET-webapp-project maken

De eerste stap bij het maken van een webtoepassing in ASP.NET is het selecteren van een projectsjabloon en het maken van een nieuwe webtoepassing:

1. Start Microsoft Visual Studio en klik op Een nieuw project maken
2. Typ ASP.NET in het sjabloonzoekvak, selecteer ASP.NET-webtoepassing (.NET Framework) en klik op Volgende. U krijgt deze sjabloon niet als u niet beschikt over de vereiste installaties die in de vorige sectie zijn genoemd.
3. Configureer in het volgende scherm uw projectnaam en directory en klik op Volgende.
4. Visual Studio zal nu uw projectsjabloon maken en u zou de sjabloontoepassing moeten kunnen uitvoeren door op de groene afspeelknop boven aan het scherm te klikken.

Een nieuw ASP.NET-webformulier maken

Om u te helpen ASP.NET beter te begrijpen, maken we een eenvoudige productpagina voor een gamewinkel. De eerste stap is het maken van een nieuw webformulier. Navigeer in het project dat u eerder hebt gemaakt naar Bestand > Nieuw > Bestand en selecteer Digitaal formulier. Nadat je het hebt ingesteld, zou je een leeg .aspx-bestand moeten kunnen zien met alleen de kopcode.

Om het algehele uiterlijk van uw webpagina te ontwikkelen, kunt u zelf code in de HTML/CSS gebruiken of een sjabloon gebruiken van Staartblokken.

We hebben de bovenstaande lay-out van de productpagina opgezet met behulp van een sjabloon. Het toont een productafbeelding, productdetails en een navigatiebalk. We hebben de HTML en CSS van de navigatiebalk toegevoegd met behulp van de hoofdpagina.

In de bovenstaande code (.aspx.cs-bestand) hebben we de laadpagina functie om productdetails in onze tijdelijke aanduidingen in te stellen. U kunt vergelijkbare functies maken voor inloggen, aanmelden, toevoegen aan winkelwagentje, enz.

Een voorbeeld van een asp-tag om de productbeschrijving weer te geven is als volgt:

De beschrijvingswaarde van de C#-code wordt in deze tijdelijke aanduiding weergegeven. U kunt ook de Toolbox van Visual Studio gebruiken om weergave-elementen toe te voegen, zoals afbeeldingen, knoppen, keuzerondjes en meer. Er zijn verschillende bronnen online beschikbaar waar u de ASP.NET-syntaxis kunt leren.

ASP.NET-webtoepassing voor beginners

ASP.NET is een krachtig platform voor het maken van webapplicaties en -services. U moet vertrouwd zijn met JavaScript, HTML, CSS en C# voordat u een webtoepassing in ASP.NET ontwikkelt.

Het ultieme JavaScript-spiekbriefje

Krijg een snelle opfriscursus over JavaScript-elementen met deze spiekbrief.

Lees volgende

Over de auteur