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:
where p – semiperimeter:
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...
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.
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...
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“.
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).
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).
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.
Fig. 7. Request to modify file “Web.config“
As a result of executing, in current Web-browser the page will be opened (Fig. 8).
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).
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“.
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.
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).
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).
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).
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.
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).
Fig. 16. Running the Web-application in Opera
⇑
Related topics
- 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.