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.

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.

Step 4

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

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

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.