Beginning DotNetNuke 4.0 Website Creation in C# 2005 with Visual Web Developer 2005 Express phần 4 pptx

CHAPTER 5 ■ VISUAL WEB DEVELOPER 105 The default positioning for VWD is flow layout. I am not sure why, but it is. However, you can change that. If you added the second button, click it and press the Delete key to delete it now. From the menu, choose Tools ➤ Options, and click the Show All Settings check box. High- light the CSS positioning node under the HTML Designer tree node. You will see what I’ve shown in Figure 5-6. Figure 5-6. Changing from flow layout to absolute layout Check the two check boxes on the right side and click OK. What this does is create an invis- ible grid on your page, in which each cell is 8× 8 pixels wide. Now when you drop or drag a control onto the page, it will snap to a corner of the grid. This allows you to vertically or hori- zontally align controls on the page. Try to drag the remaining button around the page. If this does not work, then delete it and add a new one. You should be able to drag it to any position on the page. Control Properties Now that you have a control on the page, go to the Properties pane on the right side of the screen and do the following: • Change the ID of the control to cmdPunch. • Change the Text property to Punch In. That’s good for now. Your Properties pane for the button should look like the one shown in Figure 5-7. 106 CHAPTER 5 ■ VISUAL WEB DEVELOPER Figure 5-7. The Properties pane for the Punch button To see what actually happened, click the Source button below this center pane, and you should be taken back to the HTML source code for this page. The code between the <body> and </body> tags has changed. It should read like Listing 5-1. Listing 5-1. New button code added <body> <form id="form1" runat="server"> <div>    <asp:Button ID="cmdPunch" runat="server" Style="z-index: 100; left: 224px; position: absolute; top: 240px" Text="Punch In" /> </div> </form> </body> You see the <asp:Button > tag here. Notice that this button has an absolute left and top position. Its ID has changed, and the text that shows on the button has changed. The browser will interpret this HTML code and render the control just like you see it on the designer page. CHAPTER 5 ■ VISUAL WEB DEVELOPER 107 The Code-Behind File So now you know the basics of adding a control to the designer, moving it, and changing some properties. The real power of ASP.NET comes into play when you switch back to the designer and double-click the control. Go ahead and do this. Several things will happen. Remember in Chapter 4 that when you double-clicked a control, the IDE created an event handler for you? The same happens here. In the C# IDE, the event handler was created in a new file so that the code would be separated from the IDE-generated code. Again, the same happens here. The new file that is created is called the code-behind file. Take a look at the Solution Explorer now. Yours should look like the one shown in Figure 5-8. Figure 5-8. The Solution Explorer The first page that shows in your ASP.NET website is called Default.aspx. When you double-click the button, another page is created, called Default.aspx.cs. This is the file that contains the event handling code for the page and anything on the page. This is separation of code and visual design. It is a good thing and is one of the more powerful aspects of ASP.NET. ■Note The Default.aspx page is considered the home page of your site. If a user browses to your site and does not specify a page to view, this is the one she sees. You can change this setting, but I suggest you keep it as is. So do not change the name of the Default.aspx file. Web pages in ASP.NET have an extension of aspx. Since you are using C# as your programming language, the code-behind page has the same name, but with an extension of aspx.cs. If you were using VB .NET as the programming language, you would have an extension of aspx.vb. So why is the event handling code in another file? Two reasons. The first is to keep the code separate from the design. The second is because it enforces that the event handling code gets run on the server and the HTML code gets sent over to the browser. 108 CHAPTER 5 ■ VISUAL WEB DEVELOPER CLASSIC WEB DEVELOPMENT Before VWD Express came along, any web development you wanted to do in the Microsoft world cost you money. In some cases, it cost big money. I did a quick Google search on Visual Studio 2003. The Developer edition costs about $450.00 and the Enterprise edition costs about $950.00. As Yoda would say, “A pretty penny this is.” The alternative to laying out all this money, of course, is getting all your tools for free. And, if you develop in Java, you can. There is a downside to this, though. I am sure that you have heard of Java and JSP programming. It has been out longer than .NET and prob- ably has far more people programming in it. The advantage to programming in Java is that it can be free. The disadvantage is that you get what you pay for. First and foremost is the coding language. You have heard of Sun Microsystems. They produce the ubiq- uitous language called Java. Java is free for downloading. The SDK that includes all the classes you need is also free. The JVM (Java Virtual Machine) is free as well. I’ll bet my bottom dollar you have one running on your machine right now. In order to program with Java, you also need a scripting language to handle any dynamic content in your pages. The most popular is JavaScript. This is followed closely by PHP, Perl, and several others. Fortunately, Internet Explorer will happily run JavaScript, so no worries there. Let’s see. What else do you need? 1. You need a way to write the code. There are many free or low-cost editors out there, including the text editor that comes with Windows. 2. You need a way to compile the code. If you’re using Java, JavaScript, and HTML, you can use a com- piler called Ant. This is free. 3. You need a way to debug the code. If you get a nice IDE, you can do some debugging. Most likely you will do some “printf”-style debugging. More on this later. 4. You need a web server. You can use an Apache web server with a Tomcat JSP container. (You will soon be able to run ASP.NET code on an Apache server.) These are the main things you need to develop a website in Java. You also need a great deal of patience, and knowledge on how all these things work and how they work together. The development software may be free, but the knowledge comes at a high price. It takes a long time to learn all this stuff. There is no such thing that I know of in the Java world that allows you to separate the code from the visual design as completely as you can with ASP.NET. When ASP.NET first came out, this was one of its hall- mark features. For a quick example, here is some JSP code that mixes Java code with HTML: <td width="60%" class="iflxOnTimeWorkrules"> <center> <SELECT style="width: 100%" size=15 name="lstDiff" id="lstDiff" > <% IflxFieldSetBean EngineList = engines.GetEngines(); if ( EngineList.getSize() > 0 ) Continued CHAPTER 5 ■ VISUAL WEB DEVELOPER 109 { for ( int x=0; x<EngineList.getSize(); x++) { %> <option value=<%=String.valueOf(x) %> <% String val; %> engid= '<%= EngineList.getValue( x, "engid" ) %>' <% val = EngineList.getValue( x, "engPower" ); if(val == " ") val = ""; %> engPower='<%= val %>' <% val = EngineList.getValue( x, "engSize" ); if(val == " ") val = ""; %> engSize='<%= val %>' <% val = EngineList.getValue( x, "engType" ); if(val == " ") val = ""; %> engType='<%= val %>' <% val = EngineList.getValue( x, "engCylinders" ); if(val == " ") val = ""; %> engCylinders='<%= val %>' <% val = EngineList.getValue( x, "engRotation" ); if(val == " ") val = ""; %> engRotation='<%= val %>' <% val = EngineList.getValue( x, "engYear" ); if(val == " ") val = ""; %> engYear='<%= val %>' > <%= EngineList.getValue( x, "engDescription" ) %> </option> <% } } %> </SELECT> </center> Can you follow this? I can, because I wrote it and I know JSP pretty well. It is messy and inelegant, though. Many times with JSP, you need to debug using alert statements. These are basically pop-up windows on the screen that you put messages into. For example, if you wanted to find out whether you were running some piece of code, you would put in an alert statement like this: alert("I am running the foorbar function");. This is a form of debugging from decades ago. The compilation is mostly done by hand using a free program called Ant. Ant stands for “Another Neat Tool.” The biggest problem with programming in JSP is the lack of a fully cohesive IDE. There are many IDEs, but most are not of the caliber of ASP.NET. With ASP.NET, you can do the following: • Write code with syntax checking and IntelliSense • Write code in C#, VB, or any other programming language that .NET supports • Fully debug the code with a powerful, built-in debugger Continued 110 CHAPTER 5 ■ VISUAL WEB DEVELOPER I may have mentioned this before, but here is a little history with ASP. Before ASP.NET, writing ASP involved coding the HTML tags just as you have seen. However, if you wanted any kind of dynamic capability for any of the controls or the page itself, you needed to write script code on the same page as the HTML code. Many times, you would mix the HTML code and the script code together to create the effect you wanted. Other than for very simple pages, this made a mess of your file. In large organizations, you would have a person responsible for the HTML design and visual aspects of the page, and you would also have a programmer responsible for the code. It became unwieldy for two different people to work on the same section of the page with code intermixed with HTML tags. ASP pages were a nightmare to maintain in this scenario. I will note here that the current method of JSP programming is still done in this old ASP way. In JSP, there is no analog to the “code-behind” found in ASP.NET. Server Controls Now that you’ve created an event handler for the click event of a button, let’s look at the HTML code again. You should have the same code as in Listing 5-2. Listing 5-2. HTML code with event handling <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div>    <asp:Button ID="cmdPunch" runat="server" Style="z-index: 100; left: 224px; position: absolute; top: 240px" Text="Punch In" OnClick="cmdPunch_Click" /> </div> </form> </body> </html> • Separate the code from the design with “code-behind” • Compile any .NET program for debug or release • Create a release package • Get superior help All in all, the ASP.NET experience is friendlier and provides a quicker time to market than traditional JSP programming. CHAPTER 5 ■ VISUAL WEB DEVELOPER 111 There is an attribute in the <head> tag and the <asp:Button> tag. This is the runat="server" attribute. This attribute tells the browser that any events that occurs in either the page or this control get sent back to the server for processing. Like anything, this has both advantages and disadvantages. The disadvantage of sending events back to the server is that it takes time and server band- width. The time is taken because the whole page is posted back to the server. The server then processes the call, and must rerender the whole page and send it back to the client. If there is a simple event that requires no business logic or database access, then this takes an unneeded toll on the server’s time. Events like this can be handled at the client using JavaScript. With the client handling some events, you use the client’s computing power and save the server’s computing power for other things. The advantage, however, is greater in many ways than the disadvantage. The advantage is that you will be able to write code in C# on the server rather than JavaScript on the client. JavaScript is an interpreted language that has little or no enforcement of data types. C# has strict rules concerning data types, and this makes for better code on your part. One other advantage to running the event code on the server is that it is easier to debug. You will have access to all the powerful debugging features that the IDE affords you. Debugging JavaScript is a little more nebulous. ■Note It is possible (and in some cases desirable) to write JavaScript event handlers. However, it is not needed for what you are doing in this book, and therefore I will not cover this topic. So now you know a little history of ASP and the idea behind the “code-behind” aspect of ASP.NET. Let’s look at the Default.aspx.cs file. Your IDE should look like the one shown in Figure 5-9. In Figure 5-9, you are looking at the event handler for the button. There are no tools avail- able in the toolbox, and the Properties window is empty because you’re not presently looking at any controls. It is possible that you will have a Page_Load event handler in here as well. This will have happened if you have double-clicked the empty page. 112 CHAPTER 5 ■ VISUAL WEB DEVELOPER Figure 5-9. Looking at the code-behind file Coding the Event Handler Now you can add some code to the event handler. Back in Chapter 4, you built a form that had a Punch button on it. One of the tasks of this button event handler was to have the button text change from “Punch In” to “Punch Out” as you click the button. Let’s add this part of the code from the Chapter 4 Punch project into this event handler. This is shown in Listing 5-3. Listing 5-3. Event handler code using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; CHAPTER 5 ■ VISUAL WEB DEVELOPER 113 public partial class _Default : System.Web.UI.Page { private static bool P_IN = false; private static bool P_OUT = true; private bool mPunchState = P_IN; protected void cmdPunch_Click(object sender, EventArgs e) { if (mPunchState == P_OUT) { mPunchState = P_IN; cmdPunch.Text = "Punch In"; } else { mPunchState = P_OUT; cmdPunch.Text = "Punch Out"; } } } The IDE added all the DLL references at the top of the page. The additional code is shown in bold in Listing 5-3. First, I added the class member variables to the class itself. I then added the conditional statements within the event handler. The code that I added is taken verbatim from the Punch project in Chapter 4. I did not add or change anything. I did remove some code from within the event handler, but this was for business logic that you do not need yet. Now debug the code by pressing F5. The first thing you should see is a message box saying that the Web.config file will be changed to allow debugging. This is shown in Figure 5-10. Figure 5-10. Allowing debugging Click OK and the debugging session will begin. The web browser should appear with your single button on the screen. Click the button once, and the text will change from “Punch In” to “Punch Out.” Click it again, and according to the code, it should change back. 114 CHAPTER 5 ■ VISUAL WEB DEVELOPER Nothing happens, right? No matter how many times you click the button, it still says “Punch Out.” What is happening here? The code is the same as the C# example, but it does not work in the web page. Let us debug. A State of Mind No need to close the web page yet. Go to the IDE and make sure you are looking at the event handler code. Enable a breakpoint by clicking the vertical gray bar to the left of the code. This is sometimes called the gutter. You can see this in Figure 5-11. Figure 5-11. Debugging the C# code-behind [...]... 5 ■ VISUAL WEB DEVELOPER Figure 5-15 Firefox showing your new page Notice that the labels with no text in them are only slivers of their former selves Figure 5-16 shows what they look like in Internet Explorer 121 122 CHAPTER 5 ■ VISUAL WEB DEVELOPER Figure 5-16 Internet Explorer showing your new page Internet Explorer shows it better, don’t you think? Here is where you say “Well, everyone uses Internet... The bold text shows the session state tags There is plenty of IntelliSense help while you are typing this in IntelliSense will show you all the attributes that you can change Continued 139 140 CHAPTER 5 ■ VISUAL WEB DEVELOPER If there is no sessionState defined in the Web. config file, the system uses the default The default session state object has the following properties:... to retain state in a web form is not always the best In this case, making the mPunchState variable static works, but it has the side effect of being seen and changed by all clients accessing the site I will show you later how to fix this Stop the code from running and add the word static to the mPunchState variable The code for this class is shown in Listing 5 -4 The changed line of code is in bold... the event handling code is all put in the code-behind page Default.aspx.cs Before you go on, you should take notice of a few things in this HTML code Listing 5-5 shows one line of HTML code that renders the txtHoursWorkedToday label CHAPTER 5 ■ VISUAL WEB DEVELOPER Listing 5-5 Control code . code using System; using System.Data; using System.Configuration; using System .Web; using System .Web. Security; using System .Web. UI; using System .Web. UI.WebControls; using System .Web. UI.WebControls.WebParts; using. <% IflxFieldSetBean EngineList = engines.GetEngines(); if ( EngineList.getSize() > 0 ) Continued CHAPTER 5 ■ VISUAL WEB DEVELOPER 109 { for ( int x =0; x<EngineList.getSize(); x++) . search on Visual Studio 200 3. The Developer edition costs about $45 0. 00 and the Enterprise edition costs about $9 50. 00. As Yoda would say, “A pretty penny this is.” The alternative to laying out