BIT275/276 Lecture 15: Visual Studio and SQL ServerCraig DuckettMay 26, 2015

Download the NORTHWND.ZIP file from under the BIT 275/276 Lecture 15 tab

Extract to your desktop, unzipping the NORTHWND.MDF SQL Server database file

Launch Visual Studio

Visual Studio 2013:From the Start screen, select All Programs, then scroll down to Visual Studio 2013 and then Visual Studio 2013 (purple icon)

Visual Studio 2012: From the Start screen, select All Programs, then scroll down to Microsoft Visual Studio 2012 and then Visual Studio 2012 (purple icon)

NOTE: I am using Visual Studio 2012 at home, so my screen caps may look slightly different than what you have installed, however the steps should be the same if you are using Visual Studio 2013:

1. Create a folder on your desktop or USB drive called ice152. On the menu bar select File > New > Web Site…

1

3. In the New Web Site window, select Templates, then Visual C#, then ASP.NET Empty Web Site, and browse to the folder called ice15 either on your desktop or USB thumb drive, then OK

4. Visual Studio will start building a new project called ‘ice15’

5. When the ‘ice15’ project is completed, it will open with the ice15 project showing in the Solution Explorer window, but nothing showing in the View window (i.e., the center panel)

2

6. Right-click on ice15 in the Solution Explorer window and select Add, then Web Form

7. Use the Default item name that comes up, and select OK

8. A Default.aspx page will have been added to the ice15 project, and displayed in the Source view window

3

9. Switch to Design view, by selecting the Design tab

10. In Solution Explorer, right-click on the ice15 project and select Add > New Folder, then name the folder App_Data [NOTE: IT MUST BE NAMED App_Data OR THE PROJECT WILL NOT WORK]

4

11. Right-click on the new App_Data folder and select Add > Existing Item…, and browse to where you unzipped the NORTHWND.MDF file

12. The Northwind database is now added to the App_Data folder

5

13. Double-click on the NORTHWND.MDF file in the Solution Explorer to bring up the Server Explorer in the left-hand column.

14. Expand the NORTHWND.MDF file in the Server Explorer and click on the Tables folder. The database should now connect (showing the little green plug icon).

6

15. Close the Server Explorer and open the Toolbox in the left-hand column (if the Toolbox is not you can select it from the menu bar by selecting View > Toolbox)

16. Under the Data bar, and drop a GridView element to inside the blue outlined div box in the Default.aspx page

7

17. Under Choose Data Source select New Data Source

18. Select Database

8

19. Browser to were your NORTHWND.MDF file is in the App_Data folder in your ice15 project folder and then Test Connection, and then select OK

20. Select Next, then Next

21. You can enter an SQL statement here, or pick and choose from the various menus, then Next

9

22. Test the Query

23. Select Finish

24. Test the Web Form in the browser of your choice

10

You now had a small taste how you can display database data in a web form. The remainder of the time is set aside for you to experiment create a front-end prototype using the elements from the Toolbox, which will not actually connect to a database or do anything. It is only a prototype that might be used for screen caps.

WALK-THROUGH DEMO

11