Creating a Partial View for Our Form6:47 with James Churchill
Turning our attention to the view, let’s see how we can use a partial view to keep our code DRY.
To follow along commiting your changes to this course, you'll need to fork the aspnet-fitness-frog repo. Then you can clone, commit, and push your changes to your fork like this:
git clone <your-fork> cd aspnet-fitness-frog git checkout tags/v5.2 -b creating-a-partial-view-for-our-form
For more information on the DRY (Don’t Repeat Yourself) design principle, see this Wikipedia page.
Let's turn our attention to the view for the Edit Entry page. 0:00 Our View doesn't contain much code right now, it's really just a placeholder. 0:04 Let's review our Add View. 0:08 When thinking about the form that we need, on our Edit Entry page, 0:10 it occurs to me that our Add Entry form has all of the elements that we need. 0:14 Fields for each of our entry model properties along with Save and 0:19 Cancel buttons. 0:23 It's tempting to just select copy and 0:25 paste this code into our edit view, but we don't want to do that. 0:27 We wanna keep our code dry and it so 0:32 happens that MVC gives us a way to do that. 0:35 We can use a partial view to share code between one or more views. 0:38 Let's see how. 0:43 To start, I'll right click on the Views Entries folder. 0:44 And select the Add, View menu item. 0:49 For the View name let's use _EntryForm. 0:53 The naming convention for 0:59 partial views is to prefix the view name with an underscore. 1:00 That makes it easy to identify partial views by just their name. 1:05 For the template, we can leave the Empty (without model) option selected. 1:09 Lastly, check the Create as partial view, check box and click the Add button. 1:14 Let's make our partial view strongly typed by adding a model directive 1:21 here at the top of the view. 1:25 @model 1:26 Treehouse.fitnessFrog.Models.Entry. 1:28 Then we can switch back to our Add view, select our entire form. 1:38 Cut the selection to the clipboard by pressing control X. 1:48 Switch back to the partial view. 1:55 Put our cursor just a couple of lines below the model directive. 1:57 And paste by pressing Ctrl+V. 2:01 Scrolling down a bit. 2:07 We can see that Visual Studio's underlined entry here with a red squiggle. 2:08 We need to add a using directive to our model's namespace 2:15 @using Treehouse.FitnessFrog.Models. 2:22 That looks better now. 2:36 Let's switch back to the ad view. 2:38 We can remove our using statement. 2:40 It's no longer needed now that our form code has been moved to the partial view. 2:42 Now we can use the partial Html helper method 2:47 to include a partial view in this field. 2:50 @Html.Partial, and 2:53 then the name of the View _EntryForm. 2:56 That's all there is to it. 3:02 Let's switch over to our edit view. 3:04 First, we need to make the view strongly typed by adding a model directive to 3:08 the top of the view. 3:12 Then, right below our heading, add the call to 3:18 the partial Html helper method @Html.Partial, and 3:23 again the name of our partial view, _EntryForm. 3:28 If we compare the edit view to the add view, 3:33 you'll notice that they're almost identical. 3:36 The only difference is the ViewBag title property value. 3:39 Having two views whose names match their corresponding action method names, 3:43 that share a common partial view or 3:47 views, is a common pattern in MVC apps or applications. 3:49 It allows you to embrace the default in MVC naming conventions, 3:54 while keeping your code dry. 3:58 Let's press F5 to run and test our app. 4:00 Here's our add entry page. 4:04 We're still seeing our form which is good, provide values for 4:06 the activity, And duration fields and save the form. 4:10 Now we're seeing the entries list page and 4:17 here's our new entry at the top of the list. 4:20 Let's try editing that entry, by clicking its edit button here on the right. 4:23 Let's change the date and save the form. 4:27 Great, here's our entry on the entries list page with the updated date. 4:34 Let's edit our entry again. 4:40 This time, let's change every field value before we save our form. 4:43 First the date, then the activity, then the duration, 4:49 change the intensity, check exclude and add a note. 4:57 And save the form. 5:06 Then from the list, click the edit button again so 5:08 that we can verify every field value. 5:10 Good, every field has retained its new value. 5:14 We also made a change to our server side validation. 5:18 Let's test both the Add Entry and Edit Entry pages, 5:21 to ensure that our server side validation still works as expected. 5:24 First, our Add Entry page. 5:28 Provide a value for the activity field, then save the form 5:31 Good, here's the expected server side validation message. 5:38 Click the Cancel button to return to the entries list page. 5:42 And click the Edit button on the first entry in the list. 5:46 Change the Duration field value to 0 and save the form. 5:51 And here's the expected server side validation message again. 5:57 Testing every change that you've made is a good habit to develop. 6:01 All too often in my career, I've assumed that something is working correctly, 6:05 only to have a user later discover that my assumption was false. 6:09 Save yourself the embarrassment and your user's time. 6:14 Test all of your changes. 6:18 Go ahead and stop the app. 6:20 If you're using GitHub, let's commit our changes. 6:23 Enter a commit message of, Completed the "Edit 6:30 Entry" page, and click the Commit All button. 6:36 After a short code challenge, 6:41 we'll update our web app with the ability to delete entries. 6:43
You need to sign up for Treehouse in order to download course files.Sign up