Angular, Bootstrap And ASP.NET MVC - Part Seven (Bootstrap Modal Forms)

In previous articles, we have learned AngularJS project setup, styling with bootstrap, AngularJS structure, data-binding, routing, copying of Angular object when form is saved or cancelled, inserting/updating forms, etc. Please have a look at my previous articles before going through this article.

• Angular, Bootstrap And ASP.NET MVC - Part One
• Angular, Bootstrap And ASP.NET MVC - Part Two
• Angular, Bootstrap And ASP.NET MVC - Part Three
• Angular, Bootstrap And ASP.NET MVC - Part Four
• Angular, Bootstrap And ASP.NET MVC - Part Five
• Angular, Bootstrap And ASP.NET MVC - Part Six

From the previous articles, we have the following home page ready.


When we click on this “Add new student” button, it opens Student Form as below, where empty form is shown and we can fill the data.



In this article, we are going to learn bootstrap modal to open the form in a pop up. The modal is a dialog/popup window that is displayed on top of the current page. We will open the modal when “Add new student” button is clicked and display the same form in the modal.

Step 1

We need to install “Angular JS UI Bootstrap”. So, from the NuGet Package Manager, install “Angular.UI.Bootstrap”.

Step 2

Let’s include this Angular UI bootstrap file in the “index.html”. We are using “ui-bootstrap-tpls.min.js” because it provides lots of bootstrap controls.

Step 3

In “StudentFormsApp.js”, we need dependency on ‘ui.bootstrap’, so update your module with this command.

var studentFormsApp = angular.module('studentFormsApp', ["ngRoute", "ui.bootstrap"]);

Step 4

In the “HomeController.js” file, let's add “$uibModal” service, so it will look like -

studentFormsApp.controller("homeController",
    function ($scope, $location, $uibModal) {
        $scope.addNewStudent = function () {
            $uibModal.open({
                templateUrl: "app/StudentForm/sfTemplate.html",
                controller: "sfController"
            });

        };
        $scope.updateStudent = function (id) {
            $location.path('/updateStudentForm/'+ id);
        };
    })

In the above code snippet, we are opening modal in click event of “Add new student”.

$uibModal.open({
     templateUrl: "app/StudentForm/sfTemplate.html",
     controller: "sfController"
});

We are passing “templateUrl” and “controller” as options when opening the modal.

Step 5

Next, for the good layout of pop up dialog, we need to wrap up our html with classes “modal-header”, “modal-title”, “modal-footer”. We need to include these classes to make UI better.

So, in “sfTemple.html”

Final “sfTemplate.html” will look like the following.

<div class="modal-header">
    <h1>Create New Student</h1>
</div>

<div class="modal-body">
    <form role="form" class="form-horizontal">
        <fieldset>
            <legend>Basic Information</legend>
            <div class="form-group">
                <label for="fullName" class="col-sm-3 control-label">Name</label>
                <div class="col-sm-9">
                    <input type="text" id="fullName" name="fullName" class="form-control"
                           ng-model="updatedStudent.fullName" />
                </div>
            </div>
            <div class="form-group">
                <label for="objective" class="col-sm-3 control-label">Objective</label>
                <div class="col-sm-9">
                    <textarea name="objective" id="objective" class="form-control" rows="5" cols="40" ng-model="updatedStudent.objective"></textarea>
                </div>
            </div>

            <div class="form-group">
                <label for="department" class="col-sm-3 control-label">Department</label>
                <div class="col-sm-9">
                    <select name="department" id="department" class="form-control"
                            ng-model="updatedStudent.department"
                            ng-options="dept for dept in departments"></select>
                </div>
            </div>
        </fieldset>

        <br />

        <fieldset>
            <legend>Hobbies</legend>
            <div class="form-group">
                <div class="col-sm-3">

                </div>
                <div class="col-sm-9">
                    <div class="checkbox">
                        <label><input type="checkbox" value="hobbiesTravel" ng-model="updatedStudent.hobbiesTravel" />Travelling</label>
                    </div>
                    <div class="checkbox">
                        <label><input type="checkbox" value="hobbiesPhotography" ng-model="updatedStudent.hobbiesPhotography" />Photography</label>
                    </div>
                    <div class="checkbox">
                        <label><input type="checkbox" value="hobbiesGaming" ng-model="updatedStudent.hobbiesGaming" />Gaming</label>
                    </div>
                    <br />
                </div>
            </div>
        </fieldset>

        <fieldset>
            <legend>Gender</legend>
            <div class="form-group">
                <div class="col-sm-3"></div>
                <div class="col-sm-9">
                    <div class="radio">
                        <label><input type="radio" name="gender" value="Male" ng-model="updatedStudent.gender" /> Male</label><br />
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="gender" value="Female" ng-model="updatedStudent.gender" /> Female</label><br />
                    </div>
                    <br />
                </div>
            </div>
        </fieldset>
    </form>
</div>

<div class="modal-footer">
    <div class="col-sm-offset-3 col-sm-9">
        <div class="col-sm-offset-3 col-sm-9">
            <input type="button" class="btn btn-default" value="Cancel" ng-click="cancelForm()" />
            <input type="submit" class="btn btn-primary" value="Submit" ng-click="submitForm()" />
        </div>
    </div>
</div>

Step 6

Run the application.

When you click on the “Add new student”, then it will display a pop-up dialog as below.

Get the complete project from GitHub.

In this article, we have learned how to generate Bootstrap pop-up dialog. We will learn more in the next articles.

Thanks, Happy coding!