Creating a simple Web Application

Now let us look at a simple example in which we will make three TextBoxs(textbox are use to take input from user) and a button(buttons are used to submit a page to the server). We will input 2 number in the first two TextBoxs and the last textbox will contain the sum of two numbers when we will click on the button.

Now let us begin by designing the page.

• So first we need to open an asp.net web application which i already explain you how to do it in my chapter 1 please refer it if needed. After that a default.aspx page display. It is the default page which is loaded when you open a new web application. This page already contains some default styling. Follow picture shows the design and code view of default.aspx.

       DESIGN VIEW

        CODE VIEW

• If you need a blank web page/form then you can simply add it by going to the solution explorer in that you can find the web application name(here it is Web Application7) right click on that then click on add then new item as show below.

 

• A new dialog box opens up where you can find Web Form. Just click on that give a name to the webpage below(here i am keeping WebForm1.aspx and the click on add.

 

•  A new page will display in the middle of the screen. And if you click on the design view button you can see that it is a blank page which has nothing on it. 

        DESIGN VIEW

        

• Now in the design view type anything like "First Number" after that simply drag and drop a textbox from the toolbox present on your left side of the screen. Repeat it for the "Second Number" after that add a button for the page submission(If Toolbox is not present then you can add it by going to View -> Toolbox or simple pressing Ctrl+Alt+X). After doing that the design would look like this.

•   Now in order to manipulate any property of the controls we can do it in the property window. For example if we need to change the name of the Button to "Calculate", first click on the button which need the change after that go to property window which is on the right side. There you can find a field named Text, there you can change the name for Button to Calculate.

• Now our design is complete. Lets move onto the code behind part where we will do a little bit of coding. This is needed because if we will run this page without coding the page will not do the task which we want on button click. The page will display as it is as we made in the design view. It will also take values in textbox but the button click event will not work and also the result will not be displayed in the third textbox. 
• Now in order to move to the code behind double click on the button in the design view. The code behind will look like this.

• You can see the code behind named WebForm.aspx.cs. This is where we write the C# code. In this page you may see a function like this.

           protected void Button1_Click(object sender, EventArgs e)
         {

          }

This is the button click event. This is called when the button is click. Leave the rest part on the code in this page as i will cover it in the upcoming posts. 

• Now in this function we have to perform addition operation and display the result in the third TextBox. So in order to do that we have to fetch the values entered in the textbox. This can be done by simply writing the "ID of the Textbox".Text (ID can be found of the textbox just by click the textbox which you want to find the ID and go to property window and you may check the Id from the ID field). The following is the code.

       protected void Button1_Click(object sender, EventArgs e)
        {
            int res=Convert.ToInt32(TextBox1.Text) + Convert.ToInt32(TextBox2.Text);
            TextBox3.Text = Convert.ToString(res);
        }

I think some of you are surprised with this code as some are thinking why did i use Convert.ToInt. We can simple write the following code.

     protected void Button1_Click(object sender, EventArgs e)
        {
            TextBox3.Text =TextBox1.Text + TextBox2.Text;
        }

Sorry to say the above code will not work as expected because Textboxs always return string values. So if we right the above code it will concatenate the two string and show the result in the third textbox but we don't want that. That is why we converted both the textboxs to int and stored in the res variable which is also an integer type. After that we convert the integer to string as Textboxs accepts string values only.

• Now the are done with the program. Now just run the program by clicking on the play button on the to of the page. The output will look like this.

To stop the running application close the browser and then click on stop present in the upper portion of the application.

• Now we are left with one more thing. We can see that the third textbox value can be manipulated by changing the vale from 24 to any other value but we don't want that. We can solve the problem by changing the property of that textbox. Set the Enabled property to false. This will do it. Now when we run the application we are disabled with the privilege of changing the value of the third TextBox. and that TextBox turns to grey in colour. After the change it will look like this.

  

• Now to save the application press Ctrl+Shift+S or go to File -> Save All.

You may click the Content tab to see all the posts that i will cover in this tutorial for easy navigation.