Sunday, 12 June 2016

How to implement Modal popup using Angular UI in ASP.NET MVC

5 comments
Hi every body in this article i am going to teach you How to implement modal popup using Angular js framework in ASP.NET MVC application.I hope you saw already know about Jquery UI Modal  popup.The same thing we are implementing here using Angular UI with Bootstrap as front end.

Angular UI

Angular User Interface is an alternative to the Jquery User interface which uses Angular framework as dependency with Bootstrap.It is a open source project hosted on GitHub.
Angular UI is project that includes UI modules developed to used in AngularJS Applications. It includes UI-bootstrap that is Bootstrap UI elements for AngularJS. It also includes many other Angular variants of famous jquery UI modules
 In future posts i going to explain all the components of angular UI.But, Modal popup is the main part of Web UI development that's why i am explaining separately.The basic UI popup is like below.

modal-popup-window-using-angular-ui
I took this form as an example but it does not shows any form behavior like validation and saving data.

Steps to implement Angular UI Modal popup

Step 1: Create a web application and add controller

1.Create a web application using ASP.NET MVC web application.
2.Right click on Controllers folder --> Add controller --> name it .
3.Add Index Action Method.
public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }  
    }

4.Add Index View -->Right click on Action method --> Add View.

Step 2: Add Angular Reference files to project

1.we can add Angular UI reference(library) files to solution using Nuget package(better way).or by downloading from official site here.

How to implement Modal popup using Angular UI in ASP.NET MVC

2.Add below reference files in _Layout.cshtml(present in Views --> Shared folder) page or Index.cshtml page.
 <!--Add angular references here-->
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-route.min.js"></script>
    <script src="~/Scripts/angular-animate.min.js"></script>
    <script src="~/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

Step 3: Add Angular Script file for functionality

1.Right click on Scripts folder --> Add --> Java script file.
2.here i named it as modalapp.js.
3.Replace the code with below java script code.
var app = angular.module('modalapp', ['ngAnimate','ui.bootstrap']);
//debugger;
app.controller('modalcontroller', function ($scope,$uibModal) {
    $scope.msg = "Hi Angular buddy";
    $scope.desc = "this is from desc";
    $scope.animationsEnabled = true;
    //based on size parameter the size of modal chages.
    $scope.openModal = function (size) {
        var ModalInstance = $uibModal.open({
            animation: $scope.animationsEnabled,
            templateUrl: 'myModal.html',
            controller: 'InstanceController',
            //appendTo:     //appends the modal to a element
            backdrop: false,  //disables modal closing by click on the background
            //size:size,
            //template: 'myModal.html',
            //keyboard:true,     //dialog box is closed by hitting ESC key
            //openedClass:'nameofClass',  //class styles are applyed after dialog opens.
            resolve: {
                items: function () {
                    //we can send data from here to controller using resolve...
                    return $scope.desc;
                }
            }
            //windowClass:'AddtionalClass',   //class that is added to styles the window template
            //windowTemplateUrl:'Modaltemplate.html',    template overrides the modal template
        });
    };
});
app.controller('InstanceController', function ($scope, $uibModalInstance,items) {
    $scope.ok = function () {
        //it close the modal and sends the result to controller
        $scope.data = "welcome";
        $uibModalInstance.close($scope.data);
    };
    $scope.cancel = function () {
        //it dismiss the modal 
        $uibModalInstance.dismiss('cancel');
    };
});

4. you will understand functionality of above code by reading comments above.

Step 4 : add view to display the popup

1.Upto now background functionality is done.Now its time for UI display.
2.Now replace the code in Index.cshtml using below code.
@{
    ViewBag.Title = "Home Page";
}
<div ng-app="modalapp" ng-controller="modalcontroller">
    <h3>{{msg}}</h3>
    <script type="text/ng-template" id="myModal.html">
        <div class="modal-header">
            <h2 class="modal-title">Sample form in Angular Modal</h2>
        </div>
        <div class="modal-body">
            <div>
                <!--We can implement forms and anything we want here-->
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="text-info">Email: </label>
                        <input type="email" ng-model="email" class="form-control" placeholder="Email" />
                    </div>
                    <div class="form-group">
                        <label class="text-info">Name:</label>
                        <input type="text" ng-model="name" class="form-control" placeholder="Name" />
                    </div>
                    <div class="form-group">
                        <label class="text-info">Password</label>
                        <input type="password" ng-model="password" class="form-control" placeholder="Password" />
                    </div>                  
                    <input type="button" class="btn btn-success" ng-click="ok()" value="Submit" />
                </form>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-default" type="button" ng-click="cancel()">cancel</button> 
        </div>
    </script>
    <button class="btn btn-default" type="button" ng-click="openModal()">Click to Open Modal</button>   
</div>
<script src="~/Scripts/UIModalScripts/modalapp.js"></script>

Finally after running of code you will get a button.Modal popup will be displayed after clicking on that button.
3.The open() method accepts the size parameter we can pass (large:'lg',small:'sm') for small and large windows.
Download the source code from here Source code.
Conclusion
I hope this tutorial is helpful for every reader.I will come with another tutorial.Please subscribe to this blog to get daily updates.Thanks u.


5 comments:

  1. well, thanks for the post. Can you explain to me, what should I do if the modal HTML in a separate file

    ReplyDelete
    Replies
    1. simply specify the complete URL of the file in templateUrl:"complete url of file" in open method options. see in step3..

      Delete
  2. Hi,

    I'm getting error

    Cannot create property 'message' on string 'Possibly unhandled rejection: cancel'

    Any suggestion??

    ReplyDelete
  3. Hi Ravi,

    Thanks for your article. Very helpful for me because I have just started learning AngularJS.

    Every thing is working except one thing I am not sure where the value of $scope.data is getting displayed once you close it.

    Thanks

    ReplyDelete
  4. Hi Ravi,

    Do you have another tutorial where you display the CRUD operation using Modal?

    If you have one, it would be very helpful to every body who are learning the AngularJS.

    Thanks

    ReplyDelete