Menu
-->
![With With](/uploads/1/3/3/8/133821747/753700470.png)
- Write A Basic Web Form With C# In Visual Studio For Mac
- Compile C# In Visual Studio
- Run C# In Visual Studio Code
- How To Install C# In Visual Studio 2017
- Learn C# In Visual Studio Code
- C# In Visual Studio 2015
by Erik Reitan
- Hi, In this tutorial i will show you 'How to create a Web Browser in C# Visual Studio' Here i am using visual studio 2010 and windows 8 pro 64-bit. The source code is available for download.
- In this chapter we want to write Scientific Calculator program. This download has been created for the ASP.NET 4.5 Web Forms and Visual Studio 2013 (Wingtip Toys) tutorial series. This Project is a simple Login Form desktop application using Windows Forms and C#.NET.It is a good resource for a beginner in C# to learn the basics of some.
This walkthrough provides you with an introduction to the Web development environment in Microsoft Visual Studio 2013 and in Microsoft Visual Studio Express 2013 for Web. This walkthrough guides you through creating a simple ASP.NET Web Forms page and illustrates the basic techniques of creating a new page, adding controls, and writing code.
For new web application development, we recommend Razor Pages. For more information, see Get started with Razor Pages.
This walkthrough provides you with an introduction to the Web development environment in Microsoft Visual Studio 2013 and in Microsoft Visual Studio Express 2013 for Web. This walkthrough guides you through creating a simple ASP.NET Web Forms page and illustrates the basic techniques of creating a new page, adding controls, and writing code.
Tasks illustrated in this walkthrough include:
- Creating a file system Web Forms application project.
- Familiarizing yourself with Visual Studio.
- Creating an ASP.NET page.
- Adding controls.
- Adding event handlers.
- Running and testing a page from Visual Studio.
Prerequisites
In order to complete this walkthrough, you will need:
- Microsoft Visual Studio 2013 or Microsoft Visual Studio Express 2013 for Web. The .NET Framework is installed automatically.NoteMicrosoft Visual Studio 2013 and Microsoft Visual Studio Express 2013 for Web will often be referred to as Visual Studio throughout this tutorial series.If you are using Visual Studio, this walkthrough assumes that you selected the Web Development collection of settings the first time that you started Visual Studio. For more information, see How to: Select Web Development Environment Settings.
Creating a Web application project and a Page
In this part of the walkthrough, you will create a Web application project and add a new page to it. Mac for recording studio. You will also add HTML text and run the page in your browser.
To create a Web application project
- Open Microsoft Visual Studio.
- On the File menu, select New Project.The New Project dialog box appears.
- Select the Templates -> Visual C# -> Web templates group on the left.
- Choose the ASP.NET Web Application template in the center column.
- Name your project BasicWebApp and click the OK button.
- Next, select the Web Forms template and click the OK button to create the project.Visual Studio creates a new project that includes prebuilt functionality based on the Web Forms template. It not only provides you with a Home.aspx page, an About.aspx page, a Contact.aspx page, but also includes membership functionality that registers users and saves their credentials so that they can log in to your website. When a new page is created, by default Visual Studio displays the page in Source view, where you can see the page's HTML elements. The following illustration shows what you would see in Source view if you created a new Web page named BasicWebApp.aspx.
A Tour of the Visual Studio Web Development Environment
Before you proceed by modifying the page, it is useful to familiarize yourself with the Visual Studio development environment. The following illustration shows you the windows and tools that are available in Visual Studio and Visual Studio Express for Web.
Note
This diagram shows default windows and window locations. The View menu allows you to display additional windows, and to rearrange and resize windows to suit your preferences. If changes have already been made to the window arrangement, what you see will not match the illustration.
The Visual Studio environment
Familiarize yourself with the Web designer
Examine the above illustration and match the text to the following list, which describes the most commonly used windows and tools. (Not all windows and tools that you see are listed here, only those marked in the preceding illustration.)
- Toolbars. Provide commands for formatting text, finding text, and so on. Some toolbars are available only when you are working in Design view.
- Solution Explorer window. Displays the files and folders in your Web application.
- Document window. Displays the documents you are working on in tabbed windows. You can switch between documents by clicking tabs.
- Properties window. Allows you to change settings for the page, HTML elements, controls, and other objects.
- View tabs. Present you with different views of the same document. Design view is a near-WYSIWYG editing surface. Source view is the HTML editor for the page. Split view displays both the Design view and the Source view for the document. You will work with the Design and Source views later in this walkthrough. If you prefer to open Web pages in Design view, on the Tools menu, click Options, select the HTML Designer node, and change the Start Pages In option.
- ToolBox. Provides controls and HTML elements that you can drag onto your page. Toolbox elements are grouped by common function.
- S erver Explorer. Displays database connections. If Server Explorer is not visible, on the View menu, click Server Explorer.
Creating a new ASP.NET Web Forms Page
When you create a new Web Forms application using the ASP.NET Web Application project template, Visual Studio adds an ASP.NET page (Web Forms page) named Default.aspx, as well as several other files and folders. You can use the Default.aspx page as the home page for your Web application. However, for this walkthrough, you will create and work with a new page.
To add a page to the Web application
- Close the Default.aspx page. To do this, click the tab that displays the file name and then click the close option.
- In Solution Explorer, right-click the Web application name (in this tutorial the application name is BasicWebSite), and then click Add -> New Item.
The Add New Item dialog box is displayed. - Select the Visual C# -> Web templates group on the left. Then, select Web Form from the middle list and name it FirstWebPage.aspx.
- Click Add to add the web page to your project.
Visual Studio creates the new page and opens it.
Adding HTML to the Page
In this part of the walkthrough, you will add some static text to the page.
To add text to the page
- At the bottom of the document window, click the Design tab to switch to Design view.Design view displays the current page in a WYSIWYG-like way. At this point, you do not have any text or controls on the page, so the page is blank except for a dashed line that outlines a rectangle. This rectangle represents a div element on the page.
- Click inside the rectangle that is outlined by a dashed line.
- Type Welcome to Visual Web Developer and press ENTER twice.The following illustration shows the text you typed in Design view.
- Switch to Source view.You can see the HTML in Source view that you created when you typed in Design view.
Running the Page
Before you proceed by adding controls to the page, you can first run it.
To run the page
- In Solution Explorer, right-click FirstWebPage.aspx and select Set as Start Page.
- Press CTRL+F5 to run the page.The page is displayed in the browser. Although the page you created has a file-name extension of .aspx, it currently runs like any HTML page.To display a page in the browser you can also right-click the page in Solution Explorer and select View in Browser.
- Close the browser to stop the Web application.
Adding and Programming Controls
You will now add server controls to the page. Server controls, such as buttons, labels, text boxes, and other familiar controls, provide typical form-processing capabilities for your Web Forms pages. However, you can program the controls with code that runs on the server, rather than the client.
You will add a Button control, a TextBox control, and a Label control to the page and write code to handle the Click event for the Button control.
To add controls to the page
- Click the Design tab to switch to Design view.
- Put the insertion point at the end of the Welcome to Visual Web Developer text and press ENTER five or more times to make some room in the div element box.
- In the Toolbox, expand the Standard group if it is not already expanded.
Note that you may need to expand the Toolbox window on the left to view it. - Drag a TextBox control onto the page and drop it in the middle of the div element box that has Welcome to Visual Web Developer in the first line.
- Drag a Button control onto the page and drop it to the right of the TextBox control.
- Drag a Label control onto the page and drop it on a separate line below the Button control.
- Put the insertion point above the TextBox control, and then type Enter your name: .This static HTML text is the caption for the TextBox control. You can mix static HTML and server controls on the same page. The following illustration shows how the three controls appear in Design view.
Setting Control Properties
Visual Studio offers you various ways to set the properties of controls on the page. In this part of the walkthrough, you will set properties in both Design view and Source view.
To set control properties
- First, display the Properties windows by selecting from the View menu -> Other Windows -> Properties Window. You could alternatively select F4 to display the Properties window.
- Select the Button control, and then in the Properties window, set the value of Text to Display Name. The text you entered appears on the button in the designer, as shown in the following illustration.
- Switch to Source view.Source view displays the HTML for the page, including the elements that Visual Studio has created for the server controls. Controls are declared using HTML-like syntax, except that the tags use the prefix asp: and include the attribute runat='server'.Control properties are declared as attributes. For example, when you set the Text property for the Button control, in step 1, you were actually setting the Text attribute in the control's markup.NoteAll the controls are inside a form element, which also has the attribute runat='server'. The runat='server' attribute and the asp: prefix for control tags mark the controls so that they are processed by ASP.NET on the server when the page runs. Code outside of <form runat='server'> and <script runat='server'> elements is sent unchanged to the browser, which is why the ASP.NET code must be inside an element whose opening tag contains the runat='server' attribute.
- Next, you will add an additional property to the Label control. Put the insertion point directly after asp:Label in the <asp:Label> tag, and then press SPACEBAR.A drop-down list appears that displays the list of available properties you can set for a Label control. This feature, referred to as IntelliSense, helps you in Source view with the syntax of server controls, HTML elements, and other items on the page. The following illustration shows the IntelliSense drop-down list for the Label control.
- Select ForeColor and then type an equal sign.IntelliSense displays a list of colors.NoteYou can display an IntelliSense drop-down list at any time by pressing CTRL+J when viewing code.
- Select a color for the Label control's text. Make sure you select a color that is dark enough to read against a white background.The ForeColor attribute is completed with the color that you have selected, including the closing quotation mark.
Programming the Button Control
For this walkthrough, you will write code that reads the name that the user enters into the text box and then displays the name in the Label control.
Add a default button event handler
- Switch to Design view.
- Double-click the Button control.By default, Visual Studio switches to a code-behind file and creates a skeleton event handler for the Button control's default event, the Click event. The code-behind file separates your UI markup (such as HTML) from your server code (such as C#).
The cursor is positioned to added code for this event handler.NoteDouble-clicking a control in Design view is just one of several ways you can create event handlers. - Inside the Button1_Click event handler, type Label1 followed by a period (.).When you type the period after the ID of the label (Label1), Visual Studio displays a list of available members for the Label control, as shown in the following illustration. A member commonly a property, method, or event. Visual studio.
- Finish the Click event handler for the button so that it reads as shown in the following code example.
- Switch back to viewing the Source view of your HTML markup by right-clicking FirstWebPage.aspx in the Solution Explorer and selecting View Markup.
- Scroll to the <asp:Button> element. Note that the <asp:Button> element now has the attribute onclick='Button1_Click'.This attribute binds the button's Click event to the handler method you coded in the previous step.Event handler methods can have any name; the name you see is the default name created by Visual Studio. The important point is that the name used for the OnClick attribute in the HTML must match the name of a method defined in the code-behind.
Running the Page
You can now test the server controls on the page.
To run the page
- Press CTRL+F5 to run the page in the browser. Mac visual studio conda packages for windows. If an error occurs, recheck the steps above.
- Enter a name into the text box and click the Display Name button.The name you entered is displayed in the Label control. Note that when you click the button, the page is posted to the Web server. ASP.NET then recreates the page, runs your code (in this case, the Button control's Click event handler runs), and then sends the new page to the browser. If you watch the status bar in the browser, you can see that the page is making a round trip to the Web server each time you click the button.
- In the browser, view the source of the page you are running by right-clicking on the page and selecting View source.In the page source code, you see HTML without any server code. Specifically, you do not see the <asp:> elements that you were working with in Source view. When the page runs, ASP.NET processes the server controls and renders HTML elements to the page that perform the functions that represent the control. For example, the <asp:Button> control is rendered as the HTML <input type='submit'> element.
- Close the browser.
Working with Additional Controls
In this part of the walkthrough, you will work with the Calendar control, which displays dates a month at a time. The Calendar control is a more complex control than the button, text box, and label you have been working with and illustrates some further capabilities of server controls.
In this section, you will add a System.Web.UI.WebControls.Calendar control to the page and format it.
To add a Calendar control
- In Visual Studio, switch to Design view.
- From the Standard section of the Toolbox, drag a Calendar control onto the page and drop it below the div element that contains the other controls.The calendar's smart tag panel is displayed. The panel displays commands that make it easy for you to perform the most common tasks for the selected control. The following illustration shows the Calendar control as rendered in Design view.
- In the smart tag panel, choose Auto Format.The Auto Format dialog box is displayed, which allows you to select a formatting scheme for the calendar. The following illustration shows the Auto Format dialog box for the Calendar control.
- From the Select a scheme list, select Simple and then click OK.
- Switch to Source view.You can see the <asp:Calendar> element. This element is much longer than the elements for the simple controls you created earlier. It also includes subelements, such as <WeekEndDayStyle>, which represent various formatting settings. The following illustration shows the Calendar control in Source view. (The exact markup that you see in Source view might differ slightly from the illustration.)
Programming the Calendar Control
In this section, you will program the Calendar control to display the currently selected date.
To program the Calendar control
- In Design view, double-click the Calendar control.A new event handler is created and displayed in the code-behind file named FirstWebPage.aspx.cs.
- Finish the SelectionChanged event handler with the following code.The above code sets the text of the label control to the selected date of the calendar control.
Running the Page
You can now test the calendar.
To run the page
- Press CTRL+F5 to run the page in the browser.
- Click a date in the calendar.The date you clicked is displayed in the Label control.
- In the browser, view the source code for the page.Note that the Calendar control has been rendered to the page as a table, with each day as a td element.
- Close the browser.
Next Steps
This walkthrough has illustrated the basic features of the Visual Studio page designer. Now that you understand how to create and edit a Web Forms page in Visual Studio, you might want to explore other features. For example, you might want to do the following:
- Learn more about ASP.NET Web Forms by following the step-by-step tutorial series Getting Started with ASP.NET 4.5 Web Forms and Visual Studio 2013.
- Learn more about Cascading style sheets (CSS). For details, see Working with CSS Overview.
By Carl Sassenrath
Revised: 15-Jun-2010
Original: 20-Jan-2005
Revised: 15-Jun-2010
Original: 20-Jan-2005
Contents
Introduction
A Simple Web Form
The HTML Code
Testing the Web Form
Processing a Web Form
Seeing All the CGI Data
Showing CGI Form Results
Decoding Web Form Data
Example test.cgi Script
GET and POST Methods
The GET Method
The POST Method
A Handy CGI Read Function
An Improved test.cgi Script
An Expanded Example
The HTML Code
Testing The Form
Helpful Hints
Debugging
Testing Scripts Locally First
Accessing Form Data as an Object
Checking Web Form Values
Trimming Fields
Saving Web Form Data
Saving Web Data to a Unique File
Using REBOL Forms with CGI
CGI Security Issues
Beware of Form Data
Accessing Server Files
Public Directories and Files
A Simple Web Form
The HTML Code
Testing the Web Form
Processing a Web Form
Seeing All the CGI Data
Showing CGI Form Results
Decoding Web Form Data
Example test.cgi Script
GET and POST Methods
The GET Method
The POST Method
A Handy CGI Read Function
An Improved test.cgi Script
An Expanded Example
The HTML Code
Testing The Form
Helpful Hints
Debugging
Testing Scripts Locally First
Accessing Form Data as an Object
Checking Web Form Values
Trimming Fields
Saving Web Form Data
Saving Web Data to a Unique File
Using REBOL Forms with CGI
CGI Security Issues
Beware of Form Data
Accessing Server Files
Public Directories and Files
Introduction
This article describes how to create and process simple web input forms. It is written as a tutorial for CGI users and webmasters who are new to REBOL.
The fundamental HTML and CGI techniques provided in this article are easy to understand, and you can experiment with the examples by using just a text editor, web browser, web server, and REBOL/Core. No other special tools are required.
If you are new to CGI processing in REBOL, I suggest that you review the previous article Quick and Easy CGI - A Beginner's Tutorial and Guide. It explains the basic concepts of REBOL CGI. They are not repeated here.
The examples shown in this article have been kept simple to make them easy to learn. More elaborate web forms, such as multiple-page forms, will be covered in separate articles.
The CGI examples used here take advantage of the fixes and improvements that are found in REBOL/Core 2.6.0 or better. If you want the examples shown here to work properly, please upgrade to a more recent version of REBOL.
Comments or corrections to this article should be sent to our feedback page.
A Simple Web Form
Web forms are easy to create using a web authoring tool or by typing the necessary HTML tags directly into a text editor and displaying them using a web browser.
The HTML Code
Here is the HTML code for creating a very simple form that includes a single text entry field and a submit button:
Save this HTML code to a file called simple.html, then preview it in your web browser by clicking on its file icon (in Windows) or by opening it as a file within your browser. It should look like this:
Simple Web Form |
The HTML code for this form is:
Testing The Form
The form above can be tested in the same way as the earlier examples by sending it to the test.cgi script. Note that the POST method is used to allow the input fields to be of any length.
Here is an example response from the test.cgi script:
CGI Form Data: Submitted: 12-Apr-2003/16:20:42-7:00 REBOL Version: 2.5.5.4.2
|
Note that the status result was returned as a block that contains two string values. This indicates that two STATUS checkboxes were selected.
If you try this example, but see the word STATUS appear more than once in the left column, then you are not using REBOL/Core 2.5.5 (or better) version of REBOL. That is not a big problem, but may be a problem if you convert the DECODE-CGI block into an object (to be shown below).
Helpful Hints
Here are a few techniques that can come in handy when processing CGI forms in REBOL.
Debugging
Because CGI scripts run on the web server and must be uploaded each time (or edited remotely using a shell), it can often take a lot of time to work out the bugs.
One helpful technique is to add a line of code to your CGI script that prints out the query string that was sent to it from the web browser. That way you know for sure what the input data is when script begins to process it.
If you are using the READ-CGI function suggested above, you can simply add a probe to its last line:
Write A Basic Web Form With C# In Visual Studio For Mac
Now, when you run the script, you'll see the 'raw' CGI data at the top of your resulting web page. (Note that some web browsers may not show it to you unless you view the HTML source to the page.)
Testing Scripts Locally First
You can also save a lot of time by testing your scripts locally before uploading them to your web server.
To provide test data to your script, you can set the CGI object fields directly within your script. For example, the code below will detect that your script is running locally and supply some test data:
However, the method that I prefer is to modify the READ-CGI function to provide a default return value if the request-method was not found (which means the script is running locally, not on the server). This is done by adding the test input data to the last line of the READ-CGI function:
If the DATA variable is none, then my test data is used.
Note: You can use the PROBE debugging method shown earlier to create a CGI encoded string. Just cut and paste the output as your input for the local test.
Accessing Form Data as an Object
For larger forms that have a lot of fields, you can make it easier to refer to field values by converting the DECODE-CGI result block to an object. This can be done with the CONSTRUCT function (which unlike MAKE or CONTEXT does not evaluate the contents of the object):
The result is an object, and you can access its data fields directly. For example:
If a field has multiple return values for a single name (as commonly done for checkbox fields), the result may be a string or a block. You can use the BLOCK? function to detect multiple values. For example:
See the DECODE-CGI section for more information.
If you want to be sure that the object always has all its required fields (because that may depend on the fields the user submitted in the web form), you can specify a template when you use CONSTRUCT:
Now your script can check object fields to determine if they have been set before accessing them:
If you did not provide such an object template, and the command field was not provided in the submitted data, your CGI script would error out (quit).
Checking Web Form Values
Probably the most difficult part of writing most CGI scripts is checking the web form fields to make sure that they are valid before processing. For example, you might require a valid email address, integer number, URL, etc.
One way to check fields is to use the PARSE function. For example, if a field must contain only numeric digits, you can use code such as:
(Note that PARSE/ALL is needed if you want to detect the whitespace in the string.)
You can easily test your PARSE code using the REBOL console:
Another way to check results for fixed values, like those returned from radio buttons or text fields, is to use the FIND function:
For more complex types of values, you can also use REBOL's built-in loader. Here is a check for a valid integer:
Here is a check for a valid REBOL email address:
Note that if you are using REBOL 2.5.5 or better, you can safely use LOAD rather than LOAD/ALL because script headers are not evaluated in the newer versions. If you do, you can remove the /1 index from the above code.
Trimming Fields
It is a common practice to trim leading and trailing whitespace from text input fields. This is more of a convenience to your web form users.
Compile C# In Visual Studio
An example of trimming a field in REBOL code would be:
Note that TRIM modifies its input string value (so no assignment of the result is needed. Add a COPY if you don't want this side effect).
![With With](/uploads/1/3/3/8/133821747/753700470.png)
Saving Web Form Data
Depending on your requirements, there are many ways to save your web form data within your CGI script.
The simplest method is to use the SAVE function and write out the REBOL object that was created in the earlier example:
Remember to use the -cs command line if you use REBOL to write files. See the A Beginner's Tutorial and Guide.
If you want to keep a history of requests, you could append the request block returned from DECODE-CGI to a file:
This example appends a newline to put each request on a separate line within the file.
You can also add fields like the date, requesting computer's IP address, and anything else you need:
Saving Web Data to a Unique File
In CGI scripts, creating a unique file name to store each CGI request is more difficult than it first seems.
The problem comes from the fact that a single CGI script may be run multiple times by the web server at the same time.
If you keep a 'counter' in a file to use for generating file names, you create a 'race' condition. Two scripts that are running at exactly the same time might read the same counter value before it can be changed.
Another method is to use the current date and time to create a file name. This does not work either, because you have the same race condition. Two scripts may run at exactly the same time and use the same date value.
It turns out, this is not a trivial problem to solve. You have two choices:
- If it is acceptable that in some very rare cases data might be lost, then you can use one of the above methods. You can reduce the chances of data loss by using functions like now/precise, but you can not totally eliminate the possibility. This method may work fine for you, because for most small web sites, you'll never lose data. It is also the easiest to implement.
- If you absolutely cannot lose data, then you must add a locking mechanism to your CGI script that prevents the race condition. This can be done in a few ways, and it is the subject of a separate REBOL CGI article.
Using REBOL Forms with CGI
CGI also works well for forms that are created in REBOL. In fact, by using REBOL's graphical user interface you can create forms that are more dynamic and can be validated before sending them to the server (resulting in better performance and less traffic on your server and network).
Run C# In Visual Studio Code
Unfortunately, this web form article is already too long, so I will describe REBOL-based CGI forms in a separate article (to be published soon, I hope).
CGI Security Issues
When processing forms with CGI, you should be aware of potential security problems.
Beware of Form Data
Watch out for data submitted with web forms. Never assume that the data is what you think it is. For example, a name field may not be a name at all, but just random data or data that is intentionally trying to break your CGI script or hack into your server.
Here are some important points that will help you to avoid problems:
- Never execute data
that was sent to your script from a web form. (In REBOL, that means to not use DO or other evaluation functions on the data from a form. If you are using older versions of REBOL, do not use the LOAD function either. Use LOAD/ALL to avoid evaluating a potential REBOL header. If you use REBOL/Command, do not execute external programs based on data provided from web forms.) - Use the validation methods
shown earlier to verify that fields of your form data are what you expect. That is especially true for values other than strings, like integers, email addresses, dates, money, etc. - Limit web fields
to a maximum length where it makes sense. For example, names, addresses, and most other fields can be truncated by using the CLEAR function in REBOL. - Limit post data
to a maximum length. See below.
Here is example code that limits a string to 100 characters:
To limit CGI post data, you can modify the READ-CGI function to abort if input exceeds a specified length:
Note that you don't need to limit GET data because servers do that by default.
How To Install C# In Visual Studio 2017
Accessing Server Files
In order to save data from your forms, your CGI script probably has read-write access to one or more file directories on your server. You need to be careful. You do not want to accidentally give a web user the ability to read other data files or, even worse, to write to any file.
As an extreme case imagine what would happen if a web user, by finding a flaw in your CGI script, could write to an executable file in your CGI directory. The next time that file is executed, a serious problem could result.
The best way to avoid such problems is to never allow the data from a web form to provide the file name that is used to access files on the server, unless you check the file path carefully.
If you want additional security, you can use the REBOL SECURE function to restrict file access to one or more specific directories. For example, you can add a few lines to the top of your script (before it accesses files):
If for any reason your CGI script attempts to read or write files outside the 'cgi-data' directory or tries to read any files in the 'cgi-data' directory, the script will automatically terminate.
You can also expand on this if you need to read special data files in your script:
Be sure to specify the 's' option in your REBOL CGI command path, or calling the SECURE function will abort your script. For example, as shown earlier, use a command line such as:
Learn C# In Visual Studio Code
This tells REBOL to run in CGI mode with security lowered (allowing the SECURE function to change the settings).
Public Directories and Files
If you are sharing your web server with other users (such as on a web hosting service), be aware that CGI directories, scripts, data, and other files may be accessible to other users of the system, depending on your host server's configuration.
C# In Visual Studio 2015
If this possibility concerns you, check with your server administrator or web service provider for information on how to properly protect your CGI scripts and data.