In the last post, I talked about getting started with Visual Studio and creating a web application. In this post, we’ll continue building the sample app and look at some options for publishing it to a hosting service.
At this point, we have an application with a master page and some CSS applied to it but we can’t run the application, even locally, because we don’t have a default page
To add the default page, you need to add another new item to the project. Right-click on the project in Solution Explorer and select Add >> New Item or use the CTRL-SHIFT-A keyboard shortcut. This time, select Web Form with Master Page from the Add New Item dialog and name it Default.aspx. When you click Add, you’ll be asked to select a master page and you can navigate to the one that you previously created.
As a side note, the starting page for the application does not have to be named Default.aspx and doesn’t even have to be in the root directory of your app. You can make any page the starting page by right-clicking on it and choosing Set as Start Page from the menu. IIS (Internet Information Services), which runs on Internet Windows-based web servers, typically has a list of names that it looks for when it’s trying to serve up your home page to a visitor who just types in www.YourDomain.com. Unless you have some special reason for using another file and feel its worth learning how to make the necessary change in your IIS settings, it’s just as easy to use the standard Default.aspx and doing a redirect if necessary.
The above screenshot shows the new Default.aspx page in split view with the Toolbox tab on the left side of the IDE expanded. We’ll be using this in a minute. You can see that the markup for the new page contains simply a Page Directive (Page rather than Master this time) and a ContentPlaceHolder to correspond with each one on the master page that was selected. In the bottom half of the split view, you can see the master page formatting applied to the page with the content areas available. Any controls or content you want visible on this specific page can go within the ContentPlaceHolder controls.
Notice that the Page Directive has a couple new settings; the MasterPageFile setting specifies the master page to be applied and the Title, which is blank by default, specifies the page title that will be displayed in the visitor’s browser window. You can also add the MetaDescription and MetaKeywords settings to include SEO information for this page.
The Toolbox on the left of the IDE contains a long list of available controls that you can use on webforms and it’s a good idea to take some time to explore the different sections in this list. There are extensions to Visual Studio that will add even more controls but you’ll probably find that the basic list is more than enough to start with.
Toolbox controls can be placed on the page simply by dragging them from the Toolbox onto either the markup or the design view. You’ll probably find it easier to drag them to the design view at first and edit the properties there. To place the first control
- Place the cursor inside ContentPlaceHolder1 (the main content area) and hit Enter once or twice to add a couple lines.
- Type “Quote: ” and hit SHIFT-ENTER to create a line break.
- Find the Textbox control in the Toolbox and drag it onto the page under the text that you just typed.
The textbox should appear in both the Design and Source views and you’ll notice that it has resizing handles that you can adjust. Now select the textbox control and look at the Properties panel which should be showing on the right side below the Solution Explorer. If it isn’t, you can select it from the View menu at the top of the IDE. This window enables you to change all of the available properties for the control and also to add code to respond to events the control might generate. For now, we’ll focus on a few of the properties. Use the scroll bar to find the following properties and change them as specified:
- ID: txtQuote
- MaxLength: 2048
- TextMode: Multiline
Again, as you make these changes in the Design view, you’ll see the properties added in the Source view. Now add a few more controls to the form and set the properties as specified. Put a blank line between each one.
- Type “Author:” above the control
- ID: txtAuthor
- MaxLength: 256
- ID: cmdSave
- Text: ‘Save Quote’
- ID: lblResult
- ForeColor: #CC0000
- Text: (blank)
- ID: lblQuote
- Text: (blank)
Your design area should now look something like this:
Running the Application
Now that we have a completed starting page, we can run the application on the local computer. ASP.NET applications require a web server with ASP.NET installed in order to translate the server controls that we just placed on the page and all the other instructions to something the browser can understand. As I mentioned earlier, dedicated web servers that host these sites use IIS. For local operations, Visual Studio comes with its own miniature web server that is limited to operations on the local machine and isolated from the Internet. Another advantage of running the app locally that you’ll see when you start adding code behind the forms is the ability to debug the application as it’s running by placing breakpoints in various places.
There are a few ways to run your application locally:
- On the toolbar at the top of the IDE, you’ll see a Start button with a browser name next to it. Visual Studio 2013 enables you to run the app in any browser you have installed in order to test in different environments. Clicking on this button will run the app in the browser of your choice in Debug mode, meaning that it will stop in any breakpoints.
- From the Debug menu, you can chose either Start Debugging (F5) or Start Without Debugging (Ctrl-F5). The second option will ignore any breakpoints.
If you get any errors when you run your application for the first time. Go back and check the markup and settings you’ve chosen. Remove controls and re-add them if necessary. Otherwise, the app should open the your browser to http://localhost:(port number)/Default.aspx with the port number being whatever your machine is using for the local web server. You can even enter text in the textboxes and click on the Save button, although nothing will happen yet other than for the page to refresh.
After you close the browser window, you might have to press SHIFT-F5 to exit the Debug mode if you chose to run the app in that mode. This needs to be done before you make any further changes to the application. If you ran the app in Internet Explorer, Visual Studio might stop debugging on its own once you close the browser.
Adding the Code
I’m not going to get into an extensive description of the code involved in this example as the code that I’m providing is well commented and you’ll probably be able to follow it pretty easily. The entire code is in one file which you can download here. Simply copy this code and use it to replace the text in your Default.cs file. Be sure you have named the controls on your page as specified above. If you haven’t, you might see something like this after you insert the code:
The red line number under the control name indicates that the IDE does not recognize the reference. This kind of error will prevent the application from running. If you select the ErrorList from the View menu, you can see a list of any errors before trying to run the application.
Once you’ve reviewed the code and ensured it’s free of errors, you can try running the application. The page should load and you’ll have the chance to enter some quotations. If you want some sample quotes to work with, you can take them from this XML file. If you want, you can even save that XML file as Quotes.xml in the root directory of your application and the app should read from it. After you’ve entered a couple of quotes, you’ll see something like this.
The first time you hit the Save Quote button, if the program doesn’t find a Quotes.xml file in the application’s root directory, it creates one and saves your first quote to it. After that, every time the page refreshes, it counts the number of quotes in the file, generates a random number between 0 and the number of quotes minus 1 (as the list of quotes is indexed starting at zero) and then selects the quote record matching with a matching index number. It then combines the quote and the author name into one string and pops it into the lblQuote control. Every time you enter a quote, the lblResult control is updated with either “Quote Saved.” or any error that is generated.
After you have some quotes entered, you can simply refresh the page or click on one of the page’s Home links to select a new quote. Chances are, you will see some cases where the same quote is selected two or three times in a row but this will happen less with more quotes entered.
If you really just want to see the application in action and don’t have time to work through the example, you can download the entire solution to examine it on your machine.
Hosting and Publishing Your Application
If you’re developing a web application, chances are you’ll want to publish it somewhere and, unless you have your own Internet server, you’ll need a hosting company to host the files for you. There’s a wide range of options and pricing and the service that’s appropriate for your site really depends on its purpose.
My first rule for deciding on hosting is this – unless your website is directly earning significant money for you in some way or providing a time-sensitive point of contact with your customers, shared hosting is probably enough to start with. This includes most personal and promotional sites. Shared hosting is the arrangement where a hosting company stores your site on a server with many other websites. You have your own space on the server, your own login to access that space and your files are separated from everyone else’s. You can direct your domain name to the company’s servers and it will resolve to your site. You’ll probably have a bunch of other services such as e-mail and database storage included in an inexpensive package. Typically expect to pay around $5 / month for quality shared hosting. Together with a domain name for $10-$12 / year, you really shouldn’t pay more than $75 / year for your website hosting and registration. You can always upgrade later if your site warrants it.
There are a couple of disadvantages with shared hosting that cause some web design professionals to shy away from it.
- There are some really bad shared hosting companies out there and, while it is economical as a rule, it’s possible to go too cheap even in this area. Even if you’re only paying $5 / month, you have a right to expect reliable service and minimal downtime, especially if you’re running your e-mail through your domain.
- You might be sharing an IP address or a range of IP addresses with many other domains. If one of these domains turns out to be less than reputable, a porn site or a site known for malware for example, system protection software could start blocking your site by association and your listings on Google could be affected.
- If the hosting company is really large and has less-than-stellar protections against DDOS attacks and other hacking attempts, your site could be a casualty when the company’s servers come under attack. This could mean extended downtime or worse.
Still, despite those possibilities, before you spend hundreds of dollars a year on your site, you should consider at least starting with a good shared hosting plan. Switching to a another hosting plan, if necessary, is relatively easy and can be done without your visitors even noticing a blip in your site’s availability. CNET has a list of popular hosting services offering shared, dedicated and VPS hosting and I generally spend some time on Google looking for reviews of specific hosts before committing to them. For ASP.NET hosting, you will want to look at their list of features and ensure that they are running the version of ASP.NET that you’re developing in or later.
Another option is Microsoft Azure which is Microsoft’s a la carte cloud services platform. Azure offers a range of services including website and SQL database hosting, virtual machines, cloud storage and more. You select the specific services you need and only pay for those. Azure offers a free trial of approximately 30 days, after which you could pay as little as a $2 – $3 dollars a month to start, depending on the needs of your site. An advantage in hosting an ASP.NET site on Azure is that … well it’s Microsoft! Who would you expect to do a better job of hosting ASP.NET sites?
Once you decide on a hosting service, you should receive a user name and password to upload files via FTP or another web deployment method. Once you have these, publishing is as simple as selecting Build >> Publish from the Visual Studio menu. You can enter the login and password and select the method you want to use. These settings can be saved in publish profiles which you can quickly reference later. Visual Studio will handle the upload and syncing of your files on the server. When you publish a site, Visual Studio compiles all of the code behind down into DLL files. The screenshot below shows files published to a local folder on the desktop.
The two ASPX files that you see in this screenshot still have the same markup as you saw earlier but the CodeBehind has been compiled into the bin folder for reference by ASP.NET on the server.
Now you have everything you need to start exploring ASP.NET and C# in order to create your own web applications! As I said in a previous chapter, help for a specific problem with ASP.NET is usually just a Google search away. There’s also the official site at http://www.asp.net. I can recommend Sams Teach Yourself ASP.NET 4 in 24 Hours by Scott Mitchell and Microsoft Visual C# 2012 Step By Step by John Sharp. These books will take you further into the process of designing professional websites and coding with C#.