View
216
Download
0
Category
Preview:
Citation preview
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
Recommended