Visual Basic.NET
PROJECT 1.2.2
Change colors
Web App (C#)
Part 1
For our projects we will use Microsoft Visual Studio 2019. It allows to create projects in different programming languages and on different platforms.
At the time of creating our resource, the functionality of New Visual Web Developer in Visual Studio 2022 has not been fully developed by the Microsoft team, so we will use Visual Studio 2019.
Download and install Visual Studio 2019 on your Personal Compiuter.
Download Visual Studio 2019 >>>
Open Visual Studio. Click Create a new project
From The first Lists choose C#. From the second All platforms, from the third Web. Click ASP.NET Web Application (.NET Framework)
Give the name of the Project. Click Next
Choose Empty and click Add
Our Empty Web App was created. Now we have to add the web page to it. In the Solution Explorer panel right click on the file with the project name (in our case MyFirstWebPage). Choose Add and after New Item.
In the Add New Item Window choose Web Form. Give the name of your web page (in our case Default.aspx)
In the Solution Explorer Panel You will see our new Web page (Default.aspx). Select it and Click Design (see red arrow)
Initially we have to create web app interface and add programming code to it.
From the Toolbox panel (if you don't see the Toolbox panel click View on Meniu panel and find it there). choose the TextBox, click on it, hold the mouse button in the click position, and drag-and-drop button on the form. You can not change the button position using the mouse as you did in the case of the Desktop App. To do this we have to change something. Click Format in the menu panel. After click Position. In the position Window select Absolute and click OK.
Now select the TextBox , Click and hold on its name and move to set position on the web page.
Put on the web page one more TextBox and 3 Buttons as in the image. Let's change Buttons' text and text colors. You know how to do this from the previous lessons.
Now the interface is ready. Let's start coding. Double click on the Button1. The coding window will open. Do not change the code you see. We will explain them later. Just write the next code in the place where you see the cursor:
TextBox1.BackColor = System.Drawing.Color.Red;
(Visual Studio has a good context help that helps you not to make syntax mistake)
As you see code is little bit different than was in the case of desctop app.
Click the tab Default.aspx (see red arrow) to return to the desighn view.
Double click the Button2 and write the next code in the place where you see the cursor:
TextBox1.BackColor = System.Drawing.Color.Blue;
Return again to the design view. Double click the Button 3 and add write the next code:
TextBox1.BackColor = System.Drawing.Color.Black;
Run the application using the green triangle button on the meniu panel. See red arrow on the image.
The web browser will open with our web page. Click the buttons to test our page. WOW! it works. The web page is dynamic. TextBox color was changed to red, blue, and black!
Click the red square button on the meniu pane, we will return to the programming space.
Part 2
Now let's make our app more diinamic. We want to change the screen color based on text we will write in the textbox. If we will write "Red" Color must change to the red, If the "Blue" color must be blue and if "black" the screen must became black.
For this we will use the if operator we learned in previous lessons.
if opeartor
Here is the C# syntax for the if operator:
--------------------------
if ( condition) {
operation(s);
}
--------------------------
In the C# code, condition is olways inside parentheses () and operation(s) inside curly braces {}.
Operation (s) ends with the ; symbol.
From the Toolbox window Drag-and-drope on our web form one more Button. Set its position as in the image and change its name to Color.
Double click on the Button4 to open programming code and write code in de cursor's place:
Please use the Simulator to continue the tutorial...
Conclusion:
We have created a web application in the Visual Studio environment. First, we worked on the program interface (visual side), then we wrote the programming code using the C# programming language.
A web page of course needs an address for the world to see. To do this, the web application must be uploaded to a remote server and a domain name must be chosen. Believe me, this is not difficult either, and we will do it many times in the next web projects. All I can say now is that ASP web pages created in the Visual Studio environment run on a Windows server. Visual Studio comes with its own Windows server, that made it easy for us to test web application.