The first create action

Implementing the create action method

Let us now work on implementing the first create action method of the MoviesController, which will present an empty movie form for the user to fill in the movie details so that he can create one entry.

Scaffolding a view for create

We can use the same technique to scaffold a view, like we did for Index view. But the view name and template need to be as shown below:

Click on Add

The code generated is a shown, we could also do this manually:

@model MvcMovie.Models.Movie

@{
    ViewData["Title"] = "Create";
}

<h1>Create</h1>

<h4>Movie</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Id" class="control-label"></label>
                <input asp-for="Id" class="form-control" />
                <span asp-validation-for="Id" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Title" class="control-label"></label>
                <input asp-for="Title" class="form-control" />
                <span asp-validation-for="Title" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ReleaseDate" class="control-label"></label>
                <input asp-for="ReleaseDate" class="form-control" />
                <span asp-validation-for="ReleaseDate" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Genre" class="control-label"></label>
                <input asp-for="Genre" class="form-control" />
                <span asp-validation-for="Genre" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Price" class="control-label"></label>
                <input asp-for="Price" class="form-control" />
                <span asp-validation-for="Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

That's a lot of markup code! Thanks to scaffolding, we did not have to do it manually!

What does this code have?

The code has a standard html form with razor tag helpers for dynamically creating labels, fields and validation elements based on the datatype of the property of the model for which it is being created! OfCourse, we can modify them as required as long as we are not breaking any conventions.

Notice that the datatype the view will be working on, as declared on the top of the code is @model MvcMovie.Models.Movie and not a collection of movies!

Preparing the first Create action method

Let us see what we have to do for preparing the first Create action method in the controller. Here is the current code for it:

// GET: MoviesController/Create
public ActionResult Create()
{
    return View();
}

There would be two Create() methods in the MoviesConrtoller, one for GET request which just shows a new movie form to the user, the other is for actual creation which we will see next!

This method will be selected by the controller when it get's the request like shown below. It will then return the corresponding view by matching names, which is Create!

https://localhost:7161/Movies/Createlocalhost

No need to modify this since it is just a new movie object that is required to hold the (html from) data that the user will enter in order to create a movie!

Above URL must be working by now, you can actually try running the app! We will see how to process with this next.