iLab > Step 1: Create New Project

iLab Overview

Scenario Summary

You will be displaying the Karate Members Table on a web page using ASP.NET. We will use a LINQ to also update the data on the same web page. Visual Studio has a local webserver that can process ASP.NET files so youll be able to see the results in your favorite browser.

Deliverables

NOTE

Submit your assignment to the Dropbox, located at the top of this page. For instructions on how to use the Dropbox, read these step-by-step instructions.

(See the Syllabus section "Due Dates for Assignments & Exams" for due dates.)

Create an ASP.NET webpage that displays and adds karate school members. Turn in screenshots and program code.

Grading Rubric

The criteria used for grading your iLab are as follows.

Task

Points

Create New Project and Web Form

5 points

Attach the Database

5 points

Add Grid View and Test (Screenshots)

10 points

Create New Table and Add Controls

5 points

Add LINQ to do an Insert

5 points

Insert a Member and Run Program (Screenshots)

10 points

Save, and Zip All Necessary Files

10 points

Total

50 points

Required Software

Visual Studio 2012

Use a personal copy or access the software at https://lab.devry.edu.

Lab Steps

Step 1: Create New Project

Create a new project and select an empty ASP.NET web project. Name it projectKarateMembersOnline.

Step 2: Create a Blank Web Form

Add a new Web Form and name it MemberForm.

A form with the following HTML code should appear. If you are familiar with HTML, youll notice that you can edit the HTML in this Window just like many popular HTML editors. Also note that there is a form in the body of the page. You can delete the and tags.

You can also see that there are three tabs at the bottom of the window that allow you to switch between design view and HTML source code view. Which view you work in is largely based on your preference and the task at hand. Many people like Split view because you can see both.

Step 3: Attach the Database

Download the same Karate.mdf file as before from Document Sharing, placing it an easy-to-find location. Use the Visual Studio solution explorer to add a connection. It may want to update the database during this process. This is okay.

The database should appear in the Server Explorer.

Step 4: Add a GridView

The GridView object is very similar to the DataGridView in regular VB with some limitations due to the nature of the online environment. For our purposes, well treat it the same. Go to design view and add the data grid to your web page. Make sure it is contained within the HTML form (you should see little dotted lines defining the form).

You should now see the GridView on the MemberForm ASP.NET page with some fake data. As in the previous assignment, click the arrow in the top right corner of the GridView to set up your connection to the database.

Attach a New Datasource and name it KarateData.

Pick the appropriate table and columns (all in this case). Also use Order By to put the results in order by last name and then first name.

Notice that Visual Studio is building a query string and that it has included the Order By. Go to the next screen.

You can also test the query.

After you click Finish, the design page should now look something like this.

Step 5: Test It so Far

Run the program by clicking the green arrow on the menu bar. Your default browser should be listed next to it. The program will open as a webpage in the default browser.

You can also go back into the GridView menu and add AutoFormatting.And when you run it again youll get the following.

When you are working on your program, you will often find that it doesnt necessarily stop running just because you close your browser (Amazon.com doesnt shut down just because you close your browser window). Youll need to stop the server to make changes to your project. To do this, click the red box that appears on the toolbar only while the program is running.

Step 6: Create a Table to Hold Your Add Controls

Unfortunately, you cannot lay out controls on an ASP.NET page as easily as in a VB GUI form. Well need to use some HTML tricks to do so. We will use a simple HTML table to organize our controls into two columns:labels on the left, text boxes on the right. The following code will be added to the Source view just after the GridView object in the body of the HTML.

Step 7: Add the Controls

By using the toolbox or typing in the code, you can add the following controls to the table you created in Step 6. See the Design and Source views below. You can see the name (id) of each control in the Source view.

I also went back into the GridView menu and adjusted the column formatting for the Date Joined to show the short date format.

Step 8: Add LINQ for Doing an Insert

Go to the project menu and add a new item. You will want a LINQ to SQL Class named KarateLinq.

A blank data context screen will appear. Drag and drop the Member table from the Server Explorer (1) onto this screen (2).

Step 9: Add Code to Insert a Member

Open a blank line before the tag and insert the following lines.

Now that there is a Linq class connected to the member table, we can easily write code to instantiate objects to access it and do the insert. This is the same as the Week 6 iLab. The only difference here is that the GridView must be rebound to force a visual update of its contents. Add this code to the Add Member button.

'Instantiate a connection to the db

Dim KarateData As New KarateLinqDataContext

'Instantiate an object representing the Member table

Dim person As New Member

'Fill the member object with data from the text boxes.

person.First_Name = txtFirstname.Text

person.Last_Name = txtLastname.Text

person.Date_Joined = calendarJoined.SelectedDate

person.ID = txtID.Text

person.Phone = txtPhone.Text

'Send the new object to the database

KarateData.Members.InsertOnSubmit(person)

Try

KarateData.SubmitChanges()

Catch ex As Exception

'Something went wrong probably should display an error message.

End Try

GridView1.DataBind() 'Refreshes GridView

Step 10: Run Your program

Here is the webpage view. A person is being added. See the results in the following screenshot.

Step 11: Turn It In

Zip up your entire project directory and add a Word document with example screenshots. Submit this zipped file to the class Dropbox.

Top