MVC 4 Setup and Configuration Training Document. Prepared by Andre Masters. Rev 1.0

Transcription

1 MVC 4 Setup and Configuration Training Document Prepared by Andre Masters Rev 1.0 1

2 Contents Preliminary Background... 2 Procedure Steps... 3 Next Steps Preliminary Background This procedure covers the steps required to develop a web application using MVC ASP.Net 4.0. All steps from ground zero to a finished product will be covered in this procedure. The final product will be a simple web form with Text boxes, Radio buttons, Check boxes, drop down list, picture box, and submit button. 2

3 This procedure assumes Visual Studio IDE 2010 with entities framework 3.5 have been installed in preparation for completing additional exercises in meeting ADS training requirements. Configuration and setup of IIS is also, assumed. This procedure focuses on code construction, it is advisable to develop architecture documents prior to implementation of actual code construction. Unit testing will be done using Visual Studio IDE on the development machine, followed by system testing and live test scenarios using port forwarding through the router. For the purpose of discovery and proof of concept, user story is a simple contact form in which the user will make selections, enter data, and submit to clear the form of the user s presence. Procedure Steps 1.0 Open Visual Studio 2010 open a new project select ASP.NET MVC Web Application. Name the project Excercise_1_MVC and press OK as shown in Figure 1.0 Figure Select an empty solution and make sure Unit Testing is checked as shown in Figure 2.0. Press OK to complete the operation. Figure 2.0 3

4 3.0 Observe the main screen appears as a blank and the solution explorer contains the following folders as shown in Figure 3.0 Figure Using Database First Approach create the database. Start the process by selecting the AppData folder and using the right mouse button select Add New Item. Observe the following screen appears as shown in Figure 4.0. Verify the SQL Database is selected and name the database ToyStore. Press the ADD button to complete the operation. 4

5 Figure Observe the Database is created as shown in the Solution Explorer as illustrated in Figure 5.0 Figure Add a table to the Database by double clicking the ToyStore.mdf. This operation will open the Database Explorer as shown in Figure 7.0 Figure 7.0 5

6 7.0 With the Server Explorer active and ready, create a table and add column records as shown in Figure 8.0. Figure Set the Primary Key at the ID column by selecting it, right mouse button click and pick the Primary Key Icon. On the Column Properties set the Identity property to Yes, leave autoincrement and seed at 1 as illustrated in Figure 9.0. Figure 9.0 6

7 9.0 Save the Table by naming it Products as shown in Figure 10.0 Figure Add new records to the Products table of the ToyStore database. In Server Explorer Select the ToyStore Database expand the Tables section and select the Products Table. Right Mouse click and select the Show Table Data menu option. Observe the following takes place as shown in Figure 9.0 7

8 Figure Close the Server Explorer and begin building in preparation for building the Data Model. This procedure will use the ADO.net for ORM model building. Select the Models Folder in the Solution explorer right mouse button click to Add a New Item. Select the ADO.net Enity Data Model as shown in Figure Name the Entity Model " ToyStoreDataModel.edmx" and press the ADD button to complete the operation. Figure Select Generate from Database in the Models Contents Section as shown in Figure 11. Press the Next Button to complete the operation. Figure

9 13.0 Observe the following takes place as shown in Figure 12. Pay close attention to the connection string field displays ToyStore.mdf. Also, verify the Save entity connection settings in Web.Config is checked. Press the Next button to complete the operation. Figure Select Tables for entities to be included in the Data Model as shown in Figure 16. Press the Finish button to complete the operation. Figure

10 15.0 Observe the ORM Diagram is drawn as a single table as shown in Figure 14.0 Figure Close the ORM Diagram and return to the solution explorer. Select the Controllers folder and add a new Model call it "ToyInventoryModels" write the code statements as shown in Figure 15. Figure Add a new Controller Call it "HomeController" and observe the following appears as shown in Figure 16. Be sure to select Add, Delete, Update scaffolding options. 10

11 Figure Replace the code statements in line 6-38 with the new iteration methods as shown in Figure 17. {Key point in web forms the routine Bom_Scrub_Report would a separate file} Figure Add a View to the for the Index Method by placing the cursor at line 17 in Figure Observe the following occurs in Figure Be sure to select strongly typed views option, with List option since that is what we have built so far. 11

12 Figure Observe the following appears for the file Index.html as shown in Figure Run the Application by pressing F5 and observe the following displays on the development ASP server. 12

13 Next Steps Notes: The Edit, Details, Delete, and Create New links are not operable. The only operation is the list for the database. The remaining crud operations are not implemented. As an exercise, try to complete the application be building methods for Edit, details, delete, and create new. Unit Tests: Create a unit test for the Controller and Model classes. 13