007 – An example of creating of Web-application in MS Visual Studio

 

An example of creating of Web-application in MS Visual Studio

Problem condition

 The three sides a, b, c of triangle are given.

 Using Heron’s formula develop the application, which calculates the area of triangle. Application must be realized as Web-application.

 The Heron’s formula has the view:

02_02_00_006_formula

where p – semiperimeter:

02_02_00_006_formula2

a, b, c – lengths of triangle sides.

 

Progress of the work

  1. Run MS Visual Studio 2010.
  1. Creating Web-application.

 Applications of Web type can be loaded from any computer, which is connected to Internet.

 To open such application we need to use Web-browser (for example, Opera, Google Chrome, Internet Explorer and others).

 Below are two ways to create Web-based applications in MS Visual Studio.

Way #1.

 For this way, to create Web application, first we need to call the command (Fig. 1):

File -> New -> Web Site...

02_02_00_006_01_

Fig. 1. Command to create new Web-site

 In the opened window (fig. 2), select the template “C#” and tab “ASP .NET Empty Web Site“.

 You can also specify the path where the files of application will be created (the button “Browse …“).

 For example, in our case files will be saved into folder

C:\Programs\C_SHARP

 The place of location of files is specifies in field “Web-location“. There are three ways of files location:

– file system;

– http-connecting;

– ftp-connecting.

 Select “File system“. In this case the files of application will be located at the local server (localhost), which is created by system. It means that program-client (our application) and program-server (conditionally remote computer on the network) are located on the same home computer. In fact localhost – this IP-address, with which the computer can contact the network to itself, regardless of the presence or type of computer network.

02_02_00_006_03_

Fig. 2. Creating Web-site

 

Way #2

 There is also second way of Web-application creating with the help of command (fig. 3)

File -> New -> Project...

02_02_00_006_02_

Fig. 3. Command of creating new project

 After that the window (fig. 4) will be opened. In this window you need to select template “Visual C#” and project type “ASP .NET Web Application“.

02_02_00_006_04_

Fig. 4. Command of creating Web-application

  1. Creating application like web-site.

  To solving the task we select first way.

 After performed operations the solution is created. In this solution is the single project of web-site type (fig. 5).

02_02_00_006_05_

Fig. 5. Window “Solution Explorer” after creating web-site

 If run the project, then in the right-bottom area of screen (SysTray) the window of local server will be displayed (fig. 6).

02_02_00_006_06_

Fig. 6. Local-server loading to run the application

 The following is the window, showed at Figure 7. In this window we need to press at the button “OK” to modify file “Web.config” so that we can execute our application.

02_02_00_006_071_

Fig. 7. Request to modify file “Web.config

 As a result of executing, in current Web-browser the page will be opened (Fig. 8).

02_02_00_006_07_

Fig. 8. Text, which is displayed in Web-browser

 To finish the executing of application, we need to call the command “Stop Debugging” from menu “Debug” of MS Visual Studio.

 

  1. Adding the form to application.

 We will add the new form to Web-application.

 For this we need select the title of application in Solution Explorer, click the right button of mouse and in the context menu select command “Add New Item…” (Fig. 9).

02_02_00_006_08_

Fig. 9. Command “Add New Item…

 There is second way adding a form – calling the command “Add New Item…” from menu “Website“.

 As a result, the window “Add New Item” will be opened. In this window you need to select template “Visual C#” and item “Web Form” (Fig. 10). The title form we leave as is – “Default.aspx“.

02_02_00_006_09_

Fig. 10. Adding new form

 After adding the form, in “Solution Explorer” we can see two additional files (Fig. 11):

– “Default.aspx” – file of form in terminology of HTML language;

– “Default.aspx.cs” – file of form that is responsible to program’s code on C#.

 With the help of these two files you can change the view of form and organize behaviour of form.

02_02_00_006_10_

Fig. 11. Files of form “Default.aspx” and “Default.aspx.cs

 In file “Default.aspx“, with the help of buttons “Design” and “Source“, you can switching between design mode and code mode (Fig. 12).

02_02_00_006_11_

Fig. 12. Design mode and code mode

 

  1. Building the form.

According to problem condition, form must be include such controls:

– three fields to input a, b, c;

– text strings for output messages;

– button to set the beginning of the calculation;

– text string, to output the result.

 

5.1. Changing of form size.

  Set the Design mode (Fig. 12).

With the help of mouse we increase the size of form, as displayed at figure 13 (not necessary).

02_02_00_006_12_

Fig. 13. Changing the form size in Design mode

 

5.2. Placing the controls on the form.

 Using the mouse, you can place different controls on the form. Work with the web-form is the same as work with form of “Windows Forms” type. Also you can type the text on the form.

 In our case, we need to place on the form following controls:

– three controls of “Label” type, which means “а = “, “b = “, “c = “;

– one control of “Button” type;

– one control of “Label” type to output the result.

 When we placed the control on the form, we can change properties of controls (window “Properties“) in right-bottom area of screen (Fig. 14).

02_02_00_006_13_

Fig. 14. Changing properties of controls of Web-form

 In general, after the construction, the application form must have the view as shown in Figure 15.

02_02_00_006_14_

Fig. 15. Application form in design mode

 

  1. Programming the click event at the button “Calculate“.

 Next is programming of event, which will be generated when user clicks on the button “Calculate“. In MS Visual Studio, for Web-applications, it is realized by standard way.

 Program code of event handling will be generated in file “Default.aspx.cs“.

 Thus, select “Button1” control. In property list (window “Properties“) go to “Events” tab. In the Events tab then double-click “mouse” opposite the name of the event “OnClick“.

 System will open file “Default.aspx.cs“, which has the following code:

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 event handler Button1_Click(…) type the code of calculating of area of triangle. In general, the text module “Default.aspx.cs” will look like.

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();
   }
}

 After running the application we can test it in Web-browser (Fig. 16).

02_02_00_006_15_

Fig. 16. Running the Web-application in Opera

 Then you can transfer the application files to the hosting using special software.

Related themes:

Delphi – Calculation of the area of circle and volume of a sphere.

Borland C++ Builder – An example of application development of calculating of cylinder volume.