Join Jess Chadwick for an in-depth discussion in this video Creating strongly typed HTML forms, part of Up and Running with ASP.NET 5.
- In the previous chapter, I showed you how to create ASP.NET MVC controller actions that return HTML views to the browser using Razor syntax. The demo application I've been building is supposed to be a blog engine, but to this point all I've shown you how to do is render HTML by writing code for it. Wouldn't it be nice if we could dynamically manage the blog post in our application without having to resort to code changes? In this chapter, I'll show you how to work with data by using Razor to create HTML forms, then posting that data from those forms back to a controller action and saving that data to a database.
In order to accept data from our users, we need a view for them to put that data into. So let's start by creating a new controller action and view just like in the last few videos. To do that, I'll create a new MVC controller in our Controllers folder and call it post controller. You know what, I think our home controller is getting a little overcrowded, so let's move the post action from our home controller to this new controller. While we're at it, let's make our View folder as well and then move that post.cshtml file into that folder too.
Now that we've got all that reorganized, it's time to create our new view. Let's simply add a new controller action to our post controller named Create. Since the sole purpose of this controller action is to display a view to the user, we could just copy the index action and rename it. Next I'll go right ahead and create the view in the appropriate folder by creating a new MVC view page just like I used to create my other views. This time I'll call it Create to match my controller action name.
Since I'm going to be using this view to create an HTML form for editing fields in the post class, the first thing I'm going to do is make it a strongly typed view by specifying the @model tag at the top of the file, and then enter the full class name of the post type. I'll also specify the layout just as in the previous examples. Now I'll get to work creating the form post. Here I've got several options to create the HTML that I need. One option is to just hand craft the HTML form fields just like I would if I weren't using Razor.
This option would actually work just fine, but Razor gives us a far better approach that will generate much of the HTML for us, and that is called HTML helpers. HTML helpers are nothing more than .NET methods that we can call right from our Razor views to render dynamic HTML for us in a much cleaner way. For example, in order to generate the form tag that we need to wrap our form in in order to post it back to the server, we can just use the Html.BeginForm helper.
Since this helper returns a disposable object, we actually wrap it in a using statement. When ASP.NET MVC renders the page, everything inside that using statement will be wrapped in that form tag. Once we've got our form tag, we can add some form fields. I'll start by using the Html.TextAreaFor helper to render a text area element that is mapped to the body property on my post object. Notice how I use a landa expression to select the property that I want to render the input field for.
At run time, ASP.NET MVC will automatically resolve this landa expression to the name of that property and use that property name as the ID of this input field. Since it's C# code, if I want to rename this field later on using Visual Studio's renaming functionality, Visual Studio will be sure to rename this reference too, automatically keeping everything in sync. Now the TextAreaFor helper is just one of the many HTML helpers that ASP.NET MVC offers. In fact, it's got a helper for every type of HTML form field there is, for example, TextBoxFor, HiddenFor, PasswordFor, RadioButtonFor, et cetera.
There's even a LabelFor helper to help render label tags. However, there's one HTML helper that's a little more helpful than all of the others, and that's the EditorFor helper. This particular helper is smart enough to look at the property that you'd like to generate an input field for and figure out the best helper to use. For example, we'll use the Password helper for password fields, the TextArea helper for large text fields, et cetera. Now note that there's no HTML helper for creating buttons to submit your form.
You simply use normal HTML. Before I render this page, I'll add a little bit of markup to it to make it look at little bit nicer. When we're all done, let's run our site and see how it looks. The most interesting part is to view the page source and see the HTML that ASP.NET MVC rendered for us. Notice how ASP.NET used the URL of the current action as the post action. In other words, posting back to itself. In the next video, I'll show you how to handle that post in your controller action.
- Understanding ASP.NET 5's new request processing pipeline
- Downloading client-side libraries using Grunt and Bower in Visual Studio
- Adding ASP.NET MVC 6 to your application
- Handling web requests with controllers
- Rendering dynamic views with Razor markup
- Using Entity Framework to write and read data to a database
- Using TagHelpers to create simple dynamic HTML forms
- Registering and authenticating users with Identity services
- Dynamically update portions on the server using partial rendering
- Using dynamic routing logic to customize URLs
- Exposing data with web APIs
- Leveraging custom configuration and logging
- Increasing application maintainability with dependency injection