C#. ASP .NET. An example of creating of Web-application in MS Visual Studio




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


Contents


Search other websites:

Task

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:

Heron's formula

where p – semiperimeter:

semiperimeter formula

a, b, c – lengths of triangle sides.

Instructions

1. Run MS Visual Studio 2010

 

2. 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...

MS Visual Studio Command create new Web-site

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.

MS Visual Studio Creating Web-site

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...

MS Visual Studio Command of creating new project

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“.

MS Visual Studio Command creating Web-application

Fig. 4. Command of creating Web-application

 

3. Creating application as a 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).

MS Visual Studio Window "Solution Explorer"

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).

MS Visual Studio localhost loading run application

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.

MS Visual Studio Request modify file "Web.config"

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

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

Opera localhost Text Web-browser

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.

 

4. 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).

MS Visual Studio Command "Add New Item..."

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“.

MS Visual Studio Adding new form

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.

Web Application Visual Studio Files "Default.aspx" "Default.aspx.cs"

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).

Visual Studio Design mode code

Fig. 12. Design mode and code mode

 

5. 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).

Web Application form size Design mode

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).

Visual Studio Web Application properties Web-form

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.

Web Application form design mode

Fig. 15. Application form in design mode

 

6. 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).

Browser Opera Run Web-application

Fig. 16. Running the Web-application in Opera

 


Related topics