ASP.NET MVC 3 (Adding a Create Method and Create View ) (6/9)

Adding a Create Method and Create View

In this section we're going to implement the support necessary to enable users to create new movies in the database. We'll do this by creating a controller action method that we can call using /Movies/Create on the end of the URL.

Implementing the code to handle /Movies/Create in the URL is a two-step process. When a user first visits the /Movies/Create URL we want to show an HTML form that they can fill out to enter a new movie. Then when the user submits the form and posts the data back to the server, we want to retrieve the values they posted and save them in the database.

We'll implement these two steps using two Create methods in the MoviesController class. One method will display the HTML form that the user fills in to create a new movie. The second method will process the posted data when the user submits the HTML form and save a new Movie object in the database.

The following example shows the code to add to the MoviesController class to implement this:

public ActionResult Create()  
{ 
    return View(); 
} 
 
[HttpPost] 
public ActionResult Create(Movie newMovie)  
{ 
    if (ModelState.IsValid)  
    { 
        db.Movies.Add(newMovie); 
        db.SaveChanges(); 
        return RedirectToAction("Index"); 
    }  
    else  
    { 
        return View(newMovie); 
    } 
}

The ModelState.IsValid test in the code uses the default model binder to verify that the data submitted in the form can be used to create a Movie object. We'll talk more about this in a moment.

Let's now actually implement the Create view that we'll use to display the form to the user. Right-click inside the first Create method and select Add View to create the view template for the movie form.

Specify that you're going to pass a Movie object to the view template as its view data class, and indicate that you want to scaffold a Create template.

After you click the Add button, the /Movies/Create.cshtml view template is created. Because you selected Create in the Scaffold template list, Visual Web Developer automatically scaffolded some default content. The scaffolding created an HTML form and a place for validation error messages. The scaffolding tool in Visual Web Developer examined the Movies class and created code to render <label> and <input> elements for each property of the class. The example below shows the scaffolded Create view.

@model MvcMovie.Models.Movie 
 
@{ 
    ViewBag.Title = "Create"; 
} 
 
<h2>Create</h2> 
 
<script src="@Url.Content("/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 
 
@using (Html.BeginForm()) { 
    @Html.ValidationSummary(true) 
    <fieldset> 
        <legend>Movie</legend> 
 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.Title) 
        </div> 
        <div class="editor-field"> 
            @Html.EditorFor(model => model.Title) 
            @Html.ValidationMessageFor(model => model.Title) 
        </div> 
 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.ReleaseDate) 
        </div> 
        <div class="editor-field"> 
            @Html.EditorFor(model => model.ReleaseDate) 
            @Html.ValidationMessageFor(model => model.ReleaseDate) 
        </div> 
 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.Genre) 
        </div> 
        <div class="editor-field"> 
            @Html.EditorFor(model => model.Genre) 
            @Html.ValidationMessageFor(model => model.Genre) 
        </div> 
 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.Price) 
        </div> 
        <div class="editor-field"> 
            @Html.EditorFor(model => model.Price) 
            @Html.ValidationMessageFor(model => model.Price) 
        </div> 
 
        <p> 
            <input type="submit" value="Create" /> 
        </p> 
    </fieldset> 
} 
 
<div> 
    @Html.ActionLink("Back to List", "Index") 
</div>

The scaffolding correctly assumes that the database will generate the ID field for a new movie, so it doesn't include the ID in the Create view. The LabelFor helper displays the name of the field ("Title", "Release date", "Genre", or "Price"). The EditorFor helper displays an HTML <input> element where the user can enter a value. The ValidationMessageFor helper displays validation messages. (You'll see an example of a validation message below when "abc" is entered for the date.)

How do we know if a field is not valid? The ModelState.IsValid property will tell us. If a field value cannot be used as a property value for the model, the Create form will be redisplayed showing the data that the user submitted and an error message for each property that had an error. For example, suppose you submit a new movie with an invalid release date like "abc":

When you click the Create button, the if (ModelState.IsValid) call returns false, so the Create form is redisplayed with the data originally submitted plus an error. You need to correct only the field containing the error; all the data is preserved so you don't need to re-enter it.

Now let's now create a new movie and add it to the database. Run the application and navigate to the MoviesController class by appending /Movies to the URL. Click the Create link.

After you click the Create button, the movie is saved in the database and the controller redirects you to the Index page, where the movie is displayed.

You've probably noticed that the price displayed is $10, not the $9.99 we entered. The database created by the code-first approach did not create the right kind of field for money, so the value you entered was rounded up. We'll fix this problem later in the tutorial.

When the Create button was clicked, the values in the Create form were posted (using HTTP POST) to the Create method of the movie controller. Just like you saw earlier when ASP.NET MVC automatically took the numTimes and name parameter values out of the URL and mapped them to parameters for a method, the system automatically takes the form fields from a POST and maps them to an object in the model. In this case, values from HTML fields like ReleaseDate and Title are automatically put into the corresponding properties of a new instance of the Movie class. The code-first approach enables the Movie object to be saved in the Movie table of the MovieDBContext database that was generated by the code-first approach.

Let's look at the second Create method from the MoviesController again. Notice how it takes a Movie object as a parameter:

[HttpPost] 
public ActionResult Create(Movie newMovie)  
{ 
    if (ModelState.IsValid)  
    { 
        db.Movies.Add(newMovie); 
        db.SaveChanges(); 
        return RedirectToAction("Index"); 
    }  
    else  
    { 
        return View(newMovie); 
    } 
}

This Movie object was passed to the [HttpPost] version of the Create action method, which saved it in the database and then redirected the user back to the Index action method. The code-first approach transparently handled adding the new movie to the database with two lines of code. The Index method ends up displaying the movie list:

With only a few lines of hand-written code plus the scaffolded code, we have the beginning of an application that can create and display data from a database. In the next section, we'll add validation to the model to make sure the user doesn't enter a movie without a title.