• Articles
• admin

een voorbeeld van het maken van webtoepassingen in MS Visual Studio

inhoud

• taak
• instructies
  • 1. MS Visual Studio 2010
  • 2 uitvoeren. Webtoepassing
  • aanmaken 3. Toepassing aanmaken als een website
  • 4. Formulier toevoegen aan aanvraag
  • 5. Bouwen van het formulier
    • 5.1. Verandering van formaatgrootte
    • 5.2. Het plaatsen van de controles op het formulier
  • 6. Programmeren van de click event op de knop “Calculate”
  • gerelateerde onderwerpen

Zoek op andere websites:

taak

de drie zijden a, b, c van de driehoek worden gegeven.

gebruik de formule van Heron om de toepassing te ontwikkelen, die de oppervlakte van driehoek berekent. Toepassing moet worden gerealiseerd als Web-applicatie.

de formule van De Reiger heeft de weergave:

waarbij P-semiperimeter:

a, b, c-lengtes van driehoekszijden.

instructies

1. MS Visual Studio uitvoeren 2010

⇑

2. Webtoepassingen maken

webtoepassingen kunnen worden geladen vanaf elke computer die met Internet is verbonden.

om een dergelijke toepassing te openen, moeten we een webbrowser gebruiken (bijvoorbeeld Opera, Google Chrome, Internet Explorer en anderen).

hieronder zijn twee manieren om webgebaseerde applicaties te maken in MS Visual Studio.

Manier # 1.

om op deze manier webapplicatie te maken, moeten we eerst het commando aanroepen (Fig. 1):

File -> New -> Web Site...

Fig. 1. Opdracht om een nieuwe website

aan te maken in het geopende venster (fig. 2), Selecteer de sjabloon “C#” en tab “ASP. NET lege website”.

u kunt ook het pad opgeven waar de bestanden van de toepassing zullen worden aangemaakt (de knop ” Bladeren…”).

bijvoorbeeld, in ons geval worden bestanden opgeslagen in map

C:\Programs\C_SHARP

de plaats van locatie van bestanden wordt opgegeven in het veld “Web-locatie”. Er zijn drie manieren van bestanden locatie:

• bestandssysteem;
• http-verbinding;
• ftp-verbinding.

Selecteer “bestandssysteem”. In dit geval zullen de bestanden van de toepassing worden gevestigd op de lokale server (localhost), die wordt gemaakt door het systeem. Het betekent dat programma-client (onze toepassing) en programma-server (voorwaardelijk externe computer op het netwerk) zich op dezelfde computer thuis bevinden. In feite localhost – dit IP-adres, waarmee de computer het netwerk kan contacteren met zichzelf, ongeacht de aanwezigheid of het type computernetwerk.

Fig. 2. Web-site aanmaken

Way #2

er is ook een tweede manier om Web-applicatie te maken met behulp van commando (fig. 3)

Bestand -> Nieuw -> Project...

Fig. 3. Opdracht voor het aanmaken van een nieuw project

daarna het venster (fig. 4) zal worden geopend. In dit venster moet u sjabloon selecteren “Visual C#” en projecttype “ASP.NET Web Application”.

Fig. 4. Opdracht voor het maken van webtoepassing

⇑

3. Toepassing aanmaken als een web-site

om de taak op te lossen die we als eerste selecteren.

na uitgevoerde bewerkingen wordt de oplossing aangemaakt. In deze oplossing is enkel project van web-site type (vijg. 5).

Fig. 5. Venster “Solution Explorer” na het maken van web-site

als het project wordt uitgevoerd, wordt in het rechterondergebied van het scherm (SysTray) het venster van de lokale server weergegeven (fig. 6).

Fig. 6. Laden van lokale server om de toepassing

uit te voeren het volgende is het venster, getoond in Figuur 7. In dit venster moeten we op de knop “OK” om bestand te wijzigen “Web.config ” zodat we onze toepassing kunnen uitvoeren.

Fig. 7. Verzoek om bestand te wijzigen ” Web.config”

als gevolg van het uitvoeren zal in de huidige webbrowser de pagina worden geopend (Fig. 8).

Fig. 8. Tekst, die wordt weergegeven in webbrowser

om het uitvoeren van de toepassing te voltooien, moeten we het commando “Stop Debugging” aanroepen vanuit het menu “Debug” van MS Visual Studio.

⇑

4. Het formulier toevoegen aan applicatie

we zullen het nieuwe formulier toevoegen aan webapplicatie.

hiervoor moeten we de titel van de toepassing selecteren in Solution Explorer, klik op de rechter muisknop en selecteer in het contextmenu Commando “Nieuw Item toevoegen …” (Fig. 9).

Fig. 9. Commando “Nieuw Item toevoegen …”

er is een tweede manier het toevoegen van een formulier – het aanroepen van de opdracht “Nieuw Item toevoegen…” uit menu “Website”.

hierdoor wordt het venster “Nieuw Item toevoegen” geopend. In dit venster moet u sjabloon “Visual C#” en item “Web Form” (Fig. 10). Het titelformulier dat we laten zoals het is – ” Default.aspx”.

Fig. 10. Het toevoegen van een nieuw formulier

na het toevoegen van het formulier, kunnen we in “Solution Explorer” twee extra bestanden zien (Fig. 11):

• “standaard.aspx” – file of form in terminology of HTML language;
• ” standaard.aspx.cs ” – bestand van vorm die verantwoordelijk is voor de code van het programma op C#.

met behulp van deze twee bestanden kunt u de weergave van de vorm wijzigen en het gedrag van de vorm organiseren.

Fig. 11. Bestanden van het formulier ” standaard.aspx ” en ” Standaard.aspx.cs “

in bestand ” standaard.aspx”, met behulp van de knoppen “Design” en “Source”, kunt u schakelen tussen design mode en code mode (Fig. 12).

Fig. 12. Ontwerpmodus en codemodus

⇑

5. Bouwen van het formulier

afhankelijk van de probleemvoorwaarde moet het formulier dergelijke controles bevatten:

• drie velden om a, b, c in te voeren;
• tekstreeksen voor uitvoerberichten;
• knop om het begin van de berekening in te stellen;
• tekstreeks om het resultaat uit te voeren.

⇑

5.1. Veranderen van vormgrootte

de ontwerpmodus instellen (Fig. 12).

met behulp van de muis vergroten we de grootte van de vorm, zoals weergegeven in figuur 13 (niet nodig).

Fig. 13. De vormgrootte wijzigen in de ontwerpmodus

⇑

5.2. Het plaatsen van de besturingselementen op het formulier

met de muis kunt u verschillende besturingselementen op het formulier plaatsen. Werken met het web-formulier is hetzelfde als werken met de vorm van “Windows formulieren” type. Ook kunt u de tekst typen op het formulier.

in ons geval moeten we op het formulier de volgende controles plaatsen:

• drie bedieningselementen van het “Label” – type, wat betekent ” а=”, “b=”, “c=”;
• één bediening van het “Button” – type;
• één bediening van het “Label” – type om het resultaat uit te voeren.

wanneer we het besturingselement op het formulier plaatsen, kunnen we eigenschappen van besturingselementen (venster “Eigenschappen”) veranderen in het rechter-ondergebied van het scherm (Fig. 14).

Fig. 14. Veranderende eigenschappen van bedieningsorganen van Web-form

in het algemeen moet het aanvraagformulier na de constructie de weergave hebben zoals weergegeven in figuur 15.

Fig. 15. Aanvraagformulier in ontwerpmodus

⇑

6. Het programmeren van de click event op de knop “Calculate”

Vervolgens is het programmeren van de event, die wordt gegenereerd wanneer de gebruiker op de knop “Calculate”klikt. In MS Visual Studio, voor Web-applicaties, het wordt gerealiseerd door de standaard manier.

programmacode voor het afhandelen van gebeurtenissen zal worden gegenereerd in bestand “Default.aspx.cs”.

kies dus “Button1”. Ga In eigenschappenlijst (venster “Eigenschappen”) naar het tabblad “Gebeurtenissen”. In het tabblad Gebeurtenissen dubbelklik dan op” Muis ” tegenover de naam van het evenement “OnClick”.

het systeem opent het bestand ” Default.aspx.cs”, die de volgende code heeft:

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;public partial class _Default : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { }}

in geval handler Button1_Click ( … ) typ de code van de berekening van de oppervlakte van de driehoek. In het algemeen, de tekstmodule ” standaard.aspx.cs ” zal eruit zien.

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;public partial class _Default : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { double a, b, c, p, s; a = Double.Parse(TextBox1.Text); b = Double.Parse(TextBox2.Text); c = Double.Parse(TextBox3.Text); p = (a + b + c) / 2; s = Math.Sqrt(p * (p - a) * (p - b) * (p - c)); Label4.Text = "S = " + s.ToString(); }}

na het uitvoeren van de toepassing kunnen we het testen in webbrowser (Fig. 16).

Fig. 16. De webtoepassing uitvoeren in Opera