How to Create Pages with Dynamic Output in ASP.NET

show more Creating pages with dynamic output provides you with in-depth training on Developer. Taught by David Gassner as part of the ASP.NET Essential Training show less
please wait ...

Creating pages with dynamic output

Once you've created an ASP.NET website, you can then add additional pages to the website. Each page is built as an HTML file, with added elements and attributes that are processed by the ASP.NET Application Server at runtime. You place the code either in the page itself or using an architecture sometimes known as Code Behind, you can place your scripting code in a separate file. I will first show you how to create a dynamic page using the Visual Basic language. I'm working in the existing website, HelloWorld. From the Visual Web Developer menu, select Website > Add New Item. The contents of the Add New Item dialog box will differ, depending on what sorts of components you have installed on your system. Regardless of what you have installed though, you should minimally have the Web Form item.

A Web Form is an ASP.NET page. When you select Web Form, notice that the name defaults to a file name with an extension of .aspx. In this first example, I'm going to create a file that uses the Visual Basic language. I'll name the file HelloFromVB.aspx and I'll select from the language list Visual Basic. Notice the option, Place code in separate file is selected. Again, this results in placing your scripting code in a separate file that's linked into the HTML page itself.

I'll click the Add button to create the file. This actually results in creating two files. The main file, HelloFromVB. aspx, is open on the screen and it's shown in the Solution Explorer where I'm pointing my cursor. When I click the Tree icon, I'll see that there is a second file called HelloFromVB.aspx.vb and at the top of the file in the page declaration, I'll show you that there is a CodeFile attribute that refers to this VB file.

The contents of the VB scripting file are incorporated into the page when it's requested from the server or as it's complied. Now, I'm going to open the VB file by double clicking it in the Solution Explorer. When you declare a variable, which is a place to hole a dynamic value in a page that uses Visual Basic, you place it inside the partial class declaration, and then when you declare it you use something called an access modifier. That declares where that variable will be visible.

I will use an access modifier called Protected. I'll type in the first few characters, prot, I'll see a list of the available items that start with that string and then I'll press the spacebar. That autocompletes the keyword Protected. Now, I'm going to put in the name of the variable that I want to create. I'll simply call it var1. In Visual Basic, you then declare the data type or the type of data the variable will hold using the keyword as. I press the spacebar, I type the letters a-s, and I see the as keyword displayed. Once again I press the spacebar to continue. Notice that Visual Web Developer automatically uppercases the word As, as it should be. Then I select the data type, which in this case will be String. I start typing the name of the identifier and then press the spacebar to autocomplete it.

Finally, I'm going to assign this variable an initial value by adding the = sign, and then a string wrapped in, "Hello from VB". In Visual Basic that's the complete statement. Once again, I have declared a variable named var1. I have set it as Protected, which I'll explain in another video, and I have set its data type to String and its value to, Hello from VB. Now, I'll press Ctrl+S to save the file and I'll go back to the web page that uses that code file.

Now, to output that value in the page, I'll place the cursor between the div tags. Notice that the div tags are inside a form. All ASP.NET pages contain this form element by default, which allows the page to be submitted to the server. In order to output the variable I'll use this code. I'll start with the less than character, then with percent character. Notice that Visual Web Developer autocompletes that code and creates an ending token to match.

Then I'll put in an equals operator, which means output a value. Then I'll start typing the name of my variable, var1, and notice that Visual Web Developer already knows the name of the variable. When I see it on the screen selected, I'll press the spacebar to autocomplete the code. I'll press Delete once to cleanup the code a little bit, and then Ctrl+S, and notice that Visual Web Developer closes up the code and makes it nice and pretty. I've saved the file and I'm ready to test it. I'll go to the menu and select Debug > Start Without Debugging, or press Ctrl+F5. When the page is loaded, it displays the dynamic value, Hello from VB.

Now, I'll do the same thing in C#. I'll close the browser. Once again, I'll go to Website > Add New Item. I'll name this file HelloFromCSharp and I'll select that language, Visual C#, and click Add. I'm going to open up the aspx file in the Solution Explorer panel and then open its associated code file, which now has an extension of .cs. You will see that the C# file is a complete class declaration, marked only by this keyword, partial. I explain more about partial classes in the chapter on ASP.NET Architecture. For now the one thing you need to know is that if you want to declare a variable and make it available to the page itself, you place it inside the class declaration, but above the Page_Load function which is called, and an event handler function.

Now, I'll declare the same variable as before. In C#, the word protected has a lowercase p and Visual Web Developer is helping me autocomplete the code as I go, each time I press the Space key. I put in the keyword protected and next the data type, which is string. Now the variable name, which once again will be var1. I assign the initial value, Hello from C#. In C#, you end each statement with a semicolon, using a syntax that's very similar to Java, JavaScript and C++. I'll save my changes and then I'll go back to the aspx or the page file from which this file is linked. The code here will be exactly the same as in the Visual Basic example.

I will create a less than character and a percent. Visual Web Developer automatically completes that much of the code. The equals operator to indicate that I want to output a value. Then once again, var1, the name of the variable. Then I'll run the page, selecting Debug > Start Without Debugging. When the page loads, I see the dynamic value, Hello from C# displayed on the page. So that's a look at how to create dynamic web pages using Visual Web Developer.

Each page consists of the page itself plus a linked code file. You don't have to separate the code and the HTML markup into two separate files, but Visual Web Developer makes it very easy to do this, if that's the architecture that you want to follow.

Creating pages with dynamic output
Video duration: 7m 39s 6h 24m Beginner Updated Feb 13, 2013


Creating pages with dynamic output provides you with in-depth training on Developer. Taught by David Gassner as part of the ASP.NET Essential Training

Developer Web
please wait ...