Creating an aspx page with C #

Creating an aspx page with C #

In this series of articles, I'll discuss the development in ASP.NET with C #, also using database, which will be created with the SQL Server. To start, you must have installed on your computer a distribution of Visual Studio. Although paid, there are also free versions of the program available for download.

Installing Visual Studio Express for the Web

Some information of the series of articles that I published earlier, Developing in c # with Windows Forms will be useful here. One of them is the step-by-step Visual Studio Express Setup, which you can find in this tutorial. You have to follow the instructions for download, installation and change of language, the difference is that in Visual Studio download page, you must choose "Visual Studio Express for the Web", instead of "Visual Studio Express". Having downloaded and installed Visual Studio Express for the Web, you're ready to start putting this tutorial into practice.

Creating new project

Open the Visual Studio. When you are opening for the first time, you will be prompted to register to receive a product key. All you have to do is click to register and follow the steps you will be informed. The registry should be done with a Microsoft account you have.

Having registered, you can use the program. Click "new project". Opens a window with options for you to create a new project. Choose "Visual c #", then click "Web", and in "ASP.NET Web application". At the bottom of the window, you must enter the name of the application. Change the name that is there to "my website" and click "Ok". Done it will open another window with different options for you to create your ASP.NET application. Choose "Empty", to create a blank application. Click "Ok".

A blank application was created. So we need to add an aspx page to begin to develop. To do this, click on "project" in the top menu, and then click "Add New Item …". Opens a window with options for files to be added to your site. We need to create an aspx page. Then choose "Web form", and give a name for it at the bottom of the window. As this is the home page, it is important that she be named Default.aspx. Click "Add".

Serie-aspnet-1

Create a new aspx page, and the source code will be displayed on the screen. But it's not necessary for you to write code to create the page layout. In the menu below the code page, click on "Design".

Serie-aspnet-2

This page allows you to select the objects that you want in the Toolbox, and drag the screen to create the page layout. To use the Toolbox, choose the corresponding option in this menu on the left side of the screen.

Serie-aspnet-3

In the Toolbox you will find several options of objects that you may be adding to the aspx page.

And of course, you would like to know how to set the style of an object that you added to the page, as is done in an HTML page with CSS. For this, with the clicked object go to the "Properties" window, in the lower right corner. There you will find several options for object properties, including to apply style. See for example this Label added to the page with the font color changed to blue, in the property "ForeColor"

Serie-aspnet-4

And to manage the files of the site, go to the Solution Explorer "window" above the "Properties" window. There you can find the files that are in the directory of your site.

Serie-aspnet-5

Basically this is what you must know to create an aspx page.

Creating a sample site

We can take advantage of this website that is already set up to create this sample page. Let's create a questionnaire, and add a button to report the number of hits. Will be 5 questions, and 4 alternatives for each question. Then for each question, add to the page a Label to be the issue, and 4 RadioButtons to be options. To change the text of the RadioButton, go to the "Properties" window, and enter the text in the "Text" property. Do this for all the questions and response options below:

1-the fall of the Berlin wall?

  • 1961
  • 1970
  • 1989
  • 1980

2-Paris is the capital of which of these countries?

  • Italy
  • France
  • Germany
  • Romania

3-which of these is the result of the calculation + 55 85?

  • 180
  • 160
  • 140
  • 120

4-the Alaska belongs to which of these countries?

  • Russia
  • Japan
  • Canada
  • United States

5-the Android operating system more used in mobile devices currently belongs to which of these companies?

  • Google
  • Microsoft
  • Apple
  • Intel

Add also a button on the page to check the result. Change the text from it to "Result" in the "Text" property.

The page should look like this:

Serie-aspnet-6

Before adding the code to the questionnaire work, we set the "ID" of some objects. We set the ID of the correct alternatives. Select the RadioButtons with the 1989 texts, France, 140, United States, and Google, and on "Properties" window, enter the following IDs to them, in the order: opcaocerta1, opcaocerta2, opcaocerta3, opcaocerta4 and opcaocerta5.

Also add a Label below the button to receive the result. Change the ID to "result", remove the text, and click the "Font", choose "Size" and enter "20" to give more prominence to the result. Once this is done, it is necessary to group the RadioButtons to each issue. For this purpose the code of aspx page by clicking "source" menu below it. Add GroupName = "questao1", GroupName = "questao2", GroupName = "questao3", GroupName = "questao4" and "questao5" GroupName = respectively for the RadioButtons corresponding question.

Serie-aspnet-7

Now, let's add the code to do the survey work. On the aspx page, on the screen, double-click the button, this is an alternative to access the C # code page. Change the code within the Default class for this:

int result;
        protected void Page_Load (object sender, EventArgs e)
        {

        }

        protected void Button1_Click (object sender, EventArgs e)
        {
            If (opcaocerta1. Checked)
            {
                result ++;
            }
            If (opcaocerta2. Checked)
            {
                result ++;
            }
            If (opcaocerta3. Checked)
            {
                result ++;
            }
            If (opcaocerta4. Checked)
            {
                result ++;
            }
            If (opcaocerta5. Checked)
            {
                result ++;
            }

            If (result > = 3)
            {
                result. Text = "<b>" + result. ToString() + "</b> arrangements. You've been approved! ";
                result. Forecolor = System.drawing.color.blue. Blue;
            }
            else
            {
                result. Text = "<b>" + result. ToString() + "</b> arrangements. You failed ";
                result. Forecolor = System.drawing.color.blue. Red;
            }
            If (result == 1)
            {
                result. Text = "<b>" + result. ToString() + "</b> arrangement. You failed! ";
                result. Forecolor = System.drawing.color.blue. Red;
            }
            If (result == 0)
            {
                result. Text = "not a fix. You failed! ";
                result. Forecolor = System.drawing.color.blue. Red;
            }

        }

In this code, a variable to receive the result. Every correct answer she gets +1, and displays the result in the Label "result", with the blue color if approved and color to red if failed. To be approved, you need to hit at least 3 questions. The result receives a highlight with bold, and for the case of 1 hit, will display the text "1" setting, for the case of no, the text "No hit". After you have added the code, you can test in the browser by clicking on the green arrow button in the top menu.

Conclusion

In this tutorial, you've had an introduction to ASP.NET with C #, you learned how to create an aspx page, and see an example of an aspx page working with c # code. In the next tutorial, I will be talking about how to create a system with database.

This post is part of the Developing with ASP.NET C# series.
  • Creating an aspx page with C #

Leave a Reply

Your email address will not be published. Required fields are marked *