2.2 Writing the Views

The user interface for both creating and editing posts are very similar. In fact we can probably get away with using the same form, for both of the those actions. So we can create a few for our create, action method, and then one for our edit, action method. And then both of those views could reference a partial view, that would contain our form. But before we do that, let's create a layout page that we will use throughout our entire admin portion of the application. So inside of the shared folder in views and, of course, inside of the admin area, let's right click and add a new MVC 5 layout page. And let's just call this _AdminLayout. Now we're not going to worry about markup or styling or anything like that, but this way we have this layout page that we can reference throughout all of our other views. And then when it's time to add the markup that we need and the styling, we have this already here, and we don't have to really do anything except add that stuff. So now that we have our admin layout page, it kind of also makes sense to have a layout page for all of our post stuff. So, we would have a layout page for the index action the create and the post. So inside of our post folder, let's add a NVC5 view page with layout, and then we are going to make this a layout page. So let's call this underscore PostLayout. And then we will reference the _AdminLayout page. Let's go to Areas > Admin > Views > Shared, and then _AdminLayout. Now once again we're not going to worry about markup or styling here. Let's just close this layout page. And now we can add the views for our create and edit action methods. So let's start with the create views. Let's right-click on, one of the create methods, and let's add the view. The view name is going to be Create. Let's use the empty template, and this is going to force us to have to type in the at model declaration at the top of our view. But that's pkay, and this is not a partial view, but we do want to reference a layout page. So let's look for out post layout. So let's go to Views > Post, and there we have our _PostLayout. So we will reference that, and we will click Add. And the first thing we should add is the at model. And our model is going to be of type Post. But we do need the fully qualified name here, so mvccms.models.post, and let's set the title to Create New Post. Let's set this heading to something other than create, let's do Create a Post, and then we need to include our partial view, so we will use our HTML helper and the partial method. Let's call this _postForm. And then we also want to pass in the Model. And that's basically all that we need to do here. So let's copy this code on line 9, because we are going to reuse that inside of the Edit view. So let's go back to our PostController. Let's find an edit method. Let's right-click and add a view. We want to do the same thing that we did before. So let's just click Add. And the first thing we need is our model so @modelMvcCms.Models.Post and then we can paste in that code. Now later on we might want to edit the title and this heading, but we would do that whenever we actually have host information to work with. And now we just need to create our _postForm partial view. So let's go back to our solution explorer. Let's add a new view, and we want to call this _postForm. This is a partial view. But now let's select one of our templates. Let's do Create. And then we can select our model class. And let's click Add. And as you can see, Visual Studio generated a lot of markup for us. And that's a wonderful thing, because that is something that we don't have to do. Now it's not perfect, because, as you can see, we have the Author ID here. We don't really specify the author ID. The author is going to be whoever is logged in, so that is a change that we will need to make, and I don't see the ID for the post, and we need that in some way, either as a hidden field or we might even want to make it editable. So that the user could modify the ID. Now, of course we would need some modification to ensure that everything is okay there, but we might want to add that. Now, the first thing we want to do is validate this anti-forgery token. And the reason why I say that should be first is because I always forget to. So let's go back to our post controller. And we need to add an attribute for the post methods for create and edit. So here for create method, for the post request, we need to validate the anti-forgery token. And then we need to do the same thing for the edits method. For post requests, now let's go back to our form and let's go ahead and let's add the field for the IT. And let's make this the first thing, or at least let's make it after the title, so let's grab this DIV element copy and paste after our title. And then we will set the label for model.Id. There shouldn't be anything else that we need to modify for the label, but we do need to make some changes for the EditorFor, so we just need to change title to ID. Nothing else needs to be done there. And we do need to change the validation message for and that should be all that we need to do. Let's go ahead and get rid of the author ID as well because that is something we will not set through the form. Let's change the value of our submit button to simply submit that way regardless if it's a create or in edit then that is going to be something that works for both of those situations and that should be it. So let's run this let's see what this is going to look like. Now we do need to go to admin/post and let's go to create and we should see our form. We have issues and that's because we didn't call RenderBody on our underscore post layout. So we don't have that file open. Let's go back to our _PostLayout and we need to call render body method. Let's go back to the browser and refresh and hopefully now we will see our form. And we do. It's certainly not pretty by any stretch of the imagination. But it at least gives us something to work with. And since we are primarily dealing with the user interface in this lesson. Let's go to our model class, and lets add some data annotations. More specifically lets add the display data annotation. So, we do need a using statement for a System.ComponentModel.DataAnnotations. And for the ID, let's call this the Slug because that's basically what it is. And then, we can just copy that and paste it. For the title, we can call it Title. And for the Content property, let's set it to Post Content. And then for the Created property, we can call it Date Created. And then for the Publish property, it will be the same thing. Except it will be date published. And we won't worry about the author ID. So, let's run this again, and we should see these new display names for the labels of our fields. So, once again, we want to go to Admin > post and create. And now we should see title, slog, post content, date created, and date published. Now the post content does not need to be a text box. That is not going to be good. So let's go back to our _postForm file, and we need to find the content. Instead of editor four, I believe we have text area four. And then that should be good in that case. That's a little better. But when we add styling, we will make that larger. So now we have the user interface ready to go for, creating and editing posts. Now we need to worry about the functionality of these forms, and we also need to validate the input that users will submit with these forms. And we will do that in the next lesson