[1/5] Become a Full Stack .NET Developer: Building a Form with Bootstrap

We begin this module by building a View to represent our form to add a gig. At this moment we will not concern ourselves with validation or saving data yet. We will be using Bootstrap (a CSS framework) to build the form elements.

We start by creating a new empty MVC5 controller called GigsController.CS in the Controller folder of the Solution Explorer and changed the name of the default ActionResult method from Index() to Create().

View fullsize

The default View template in ASP.NET with the navigation bar edited to point to our Add a Gig form.

We then proceeded to make a new folder in the Views folder called Gigs (as it needs to be the same name as our new Controller) and in this new folder we added a new View named Create. By hitting F5 and running our app in the browser we were presented with the default ASP.NET view template and by going to /Gigs/Create/ in the browser we could see were our form would soon be. We needed to modify the Layout.CSHTML in the Views folder so that the HTML.ActionLinks in the navigation bar pointed to our form for adding a gig.

We reviewed the Bootstrap documentation about how to add form controls. Our form would have 4 inputs - 3 textboxes (Venue, Date and Time) and 1 dropdown (for Genres). We used Lambda Expressions on our inputs to perform LINQ queries. Here is the code below.

@model GigHub.ViewModels.GigFormViewModel
@{
    ViewBag.Title = "Create";
}
<h2>Add a Gig</h2>
<form>
    <div class="form-group">
        @Html.LabelFor(m => m.Venue)
        @Html.TextBoxFor(m => m.Venue, new { @class = "form-control"})
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Date)
        @Html.TextBoxFor(m => m.Date, new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Time)
        @Html.TextBoxFor(m => m.Time, new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Genre)
        @Html.DropDownListFor(m => m.Genre, new SelectList(Model.Genres, "Id", "Name"), "", new { @class = "form-control" })
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
</form>

One problem we encountered was with capturing the Date and Time of a gig. In the domain model we made, Date and Time are represented as one, but in our View to the user we want to present them separately on the form. We could change our domain and split Date and Time up, but instead we decided to make a ViewModel. ViewModels are a great tool to use when you want to change the presentation logic of your app without changing the domain logic.

To achieve this we created a new folder called ViewModels in the Solution Explorer and in here we made a new class called GigFormViewModel.CS and in here we set up new separate properties for Date and Time that would be used in our form.

View fullsize

Our form after this module with 4 inputs and a button built using Bootstrap.

Also in the ViewModel class we had just made we set Genre as a IEnumerable. As we don't intend to add any new genres to our app, this was the easiest way to iterate through a dropdown list of genres instead of using arrays or collections. For this to work we need to populate the Genres in the ViewModel which is the job of the Controller, so in GigsController.CS we added a new ApplicationDbContext. This context was then feed into a Genres.ToList().

The final touch to add to our form was a Save button which was fairly easy to do using the "btn-primary" class for button found in Bootstrap.

Afterwards we made a new database migration and then committed our code to the Visual Studio Online repository.