Thursday, December 9, 2010

How To Build a 2-Tier ASP.NET 4.0 Web Site–Part 1

Recently I needed to document cookbook steps for quickly creating a simple 2-tier web site in ASP.NET 4.0. In case this helps someone else, here the are.
Environment:
  • Windows 7 Business/Enterprise/Ultimate (Home & Home Premium should work)
  • Visual Studio 2010 Professional/Premium/Ultimate
  • IIS 7.5
  1. Launch Visual Studio 2010 then create a new website project (File | New | Web Site):
    2010-12-01_223350
  2. Ensure that Visual C# is chosen under Installed Templates on the left, that .NET Framework 4 is chosen in the drop-down and then pick ASP.NET Empty Web Site:
    2010-12-01_230242
    Hint: Note the path of the Web location as you will need it later on when deploying to IIS.
  3. Add a new Web Form page by right-clicking on the project entry in Solution Explorer and choosing Add New Item. If the Solution Explorer is not visible, use View | Solution Explorer or Ctrl + W then S to display it:
    2010-12-01_230856
    Notice that the 2nd entry in the tree view on the left is highlighted, the pop-up context menu will be different depending on which item you right-click on. The 1st entry is called the “solution” which is a container of sorts that can contain one or more projects.

    As before, ensure that Visual C# is chosen under Installed Templates and pick Web Form:
    2010-12-01_230930
    Leave the defaults at the bottom of the dialog as shown above.
  4. Switch to “split” view in the designer panel to more easily see the effect of your actions. Open the toolbox to the “Standard” section (if the Toolbox is not visible, use View | Toolbox or Ctrl + W then X to display it) then drag ‘n drop a label control onto the designer portion of the form as shown here:
    2010-12-01_231227
    Notice the lower “Design” pane show the visual design surface while the upper “Source” view shows the underlying code created in response to dragging and dropping the control. Update the label text as shown here:
    2010-12-01_231306
  5. Repeat the same process to add a Textbox following the label:
    2010-12-01_231329
    Resulting in the following:
    2010-12-01_231628
    Note the default ID of the control: TextBox1. Change it to something more meaningful such as txtCustomerId.
  6. Repeat the process a 3rd time adding a Button control:
    2010-12-01_231757
    Change the text label of the button to Submit.
That’s enough for today. Stay tuned.

No comments:

Post a Comment