I am trying to use a Angular/bootstrap modal to edit MVC ApplicationUser scaffolded views. I have a found a few examples, they are mostly jquery. I found one that works well using jquery-ui. I want to be consistent with my modals so I need to make it work with angular-ui or plain bootstrap. I am not sure how this is calling the MVC controller for the data binding.

Working Jquery-ui example

<script type="text/javascript">
$(document).ready(function () {
    $.ajaxSetup({ cache: false });
    $(".editDialog").live("click", function (e) {
        var url = $(this).attr('href');
        $("#dialog-edit").dialog({
            title: 'Edit Customer',
            autoOpen: false,
            resizable: false,
            height: 355,
            width: 400,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(this).load(url);
            },
        });
        $("#dialog-edit").dialog('open');
        return false;
    });
});

 <tbody>
    @foreach (var item in Model)
        {
      <tr>
       <td>
        @Html.DisplayFor(modelItem => item.FullName)
        </td>
       <td>
    @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "editDialog" })|
      @Html.ActionLink("Details", "Details", new { id = item.Id }) |
     </td>
     </tr>
       }
      </tbody>

 <div id="dialog-edit" style="display: none"> </div>

Here is how I use angular to open a modal with a api call.

 $scope.editLocation = function (id) {
        $scope.close();
        var deferred = $q.defer();
        $http({ method: 'get', url: '/api/Locations/' + id })
                .success(function (model) {
                    deferred.resolve(model);
                    $scope.model = model;
                }).error(function (error) {
                    deferred.reject(error);
                }).then(function () {
                    $modal.open({
                        templateUrl: "EditLocationModal.html",
                        controller: 'ModalInstanceController',
                        resolve: {
                            model: function () {
                                return $scope.model;
                            }
                        }
                    });
                })
        return deferred.promise;
    }

UPDATE

$scope.editUser = function (id) {

            $modal.open({
                templateUrl: "Modals/ApplicationUserModal.html",
                controller: 'ModalInstanceController',
                resolve: {
                    model: function () {
                        return $scope.model;
                    }
                }
            });
        };

View

 <div class="card-body card-padding" ng-controller="ApplicationUserController">
  <div class="table-responsive">
    <table class="table table-striped table-vmiddle">
      <thead>
       <tr>
         <th>Full Name</th>
       </tr>
      </thead>
      <tbody>
         @foreach (var item in Model)
             {
               <tr>
                <td>
                 @Html.DisplayFor(modelItem => item.FullName)
                </td>
                <td>
                @Html.ActionLink("Edit", "Edit", null, new { ng_click = "editUser(item.Id)" })
                </td>
               </tr>
             }
      </tbody>
     </table>
    </div>
  </div>

UPDATE 2 This syntax

 @Html.ActionLink("Edit", "Edit", null, new { ng_click = "editUser(" + item.Id + ")" })

is throwing this error.

Error: [$parse:syntax] Syntax Error: Token 'bc05f5' is unexpected, expecting [)] at column 12 of the expression [editUser(87bc05f5-35c2-4278-a528-b7e237922d4e)] starting at [bc05f5-35c2-4278-a528-b7e237922d4e)]. .3.15/$parse/syntax?p0=bc05f5&p1=is%20unexpected%2C%20expecting%20%5B)%5D&p2=12&p3=editUser(87bc05f5-35c2-4278-a528-b7e237922d4e)&p4=bc05f5-35c2-4278-a528-b7e237922d4e)

I am trying to use a Angular/bootstrap modal to edit MVC ApplicationUser scaffolded views. I have a found a few examples, they are mostly jquery. I found one that works well using jquery-ui. I want to be consistent with my modals so I need to make it work with angular-ui or plain bootstrap. I am not sure how this is calling the MVC controller for the data binding.

Working Jquery-ui example

<script type="text/javascript">
$(document).ready(function () {
    $.ajaxSetup({ cache: false });
    $(".editDialog").live("click", function (e) {
        var url = $(this).attr('href');
        $("#dialog-edit").dialog({
            title: 'Edit Customer',
            autoOpen: false,
            resizable: false,
            height: 355,
            width: 400,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(this).load(url);
            },
        });
        $("#dialog-edit").dialog('open');
        return false;
    });
});

 <tbody>
    @foreach (var item in Model)
        {
      <tr>
       <td>
        @Html.DisplayFor(modelItem => item.FullName)
        </td>
       <td>
    @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "editDialog" })|
      @Html.ActionLink("Details", "Details", new { id = item.Id }) |
     </td>
     </tr>
       }
      </tbody>

 <div id="dialog-edit" style="display: none"> </div>

Here is how I use angular to open a modal with a api call.

 $scope.editLocation = function (id) {
        $scope.close();
        var deferred = $q.defer();
        $http({ method: 'get', url: '/api/Locations/' + id })
                .success(function (model) {
                    deferred.resolve(model);
                    $scope.model = model;
                }).error(function (error) {
                    deferred.reject(error);
                }).then(function () {
                    $modal.open({
                        templateUrl: "EditLocationModal.html",
                        controller: 'ModalInstanceController',
                        resolve: {
                            model: function () {
                                return $scope.model;
                            }
                        }
                    });
                })
        return deferred.promise;
    }

UPDATE

$scope.editUser = function (id) {

            $modal.open({
                templateUrl: "Modals/ApplicationUserModal.html",
                controller: 'ModalInstanceController',
                resolve: {
                    model: function () {
                        return $scope.model;
                    }
                }
            });
        };

View

 <div class="card-body card-padding" ng-controller="ApplicationUserController">
  <div class="table-responsive">
    <table class="table table-striped table-vmiddle">
      <thead>
       <tr>
         <th>Full Name</th>
       </tr>
      </thead>
      <tbody>
         @foreach (var item in Model)
             {
               <tr>
                <td>
                 @Html.DisplayFor(modelItem => item.FullName)
                </td>
                <td>
                @Html.ActionLink("Edit", "Edit", null, new { ng_click = "editUser(item.Id)" })
                </td>
               </tr>
             }
      </tbody>
     </table>
    </div>
  </div>

UPDATE 2 This syntax

 @Html.ActionLink("Edit", "Edit", null, new { ng_click = "editUser(" + item.Id + ")" })

is throwing this error.

Error: [$parse:syntax] Syntax Error: Token 'bc05f5' is unexpected, expecting [)] at column 12 of the expression [editUser(87bc05f5-35c2-4278-a528-b7e237922d4e)] starting at [bc05f5-35c2-4278-a528-b7e237922d4e)]. http://errors.angularjs/1.3.15/$parse/syntax?p0=bc05f5&p1=is%20unexpected%2C%20expecting%20%5B)%5D&p2=12&p3=editUser(87bc05f5-35c2-4278-a528-b7e237922d4e)&p4=bc05f5-35c2-4278-a528-b7e237922d4e)

• javascript
• jquery
• asp-mvc
• angularjs
• twitter-bootstrap

Share Improve this question Follow edited Aug 6, 2015 at 10:46 texas697 asked Aug 2, 2015 at 16:54 texas697texas697 6,4271919 gold badges7070 silver badges136136 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5 +50

I am not sure how this is calling the MVC controller for the data binding.

Just to clue you in on the interesting parts

// 1. here it binds a "click" event to all elements with class "editDialog"
$(".editDialog").live("click", function (e) { 
    // 2. here it fetches the HREF attribute of that element
    var url = $(this).attr('href');
    $("#dialog-edit").dialog({
        title: 'Edit Customer',
        autoOpen: false,
        resizable: false,
        height: 355,
        width: 400,
        show: { effect: 'drop', direction: "up" },
        modal: true,
        draggable: true,
        open: function (event, ui) {
            // 3. And here it loads that HREF attribute in the modal
            $(this).load(url);
        },
    });
    $("#dialog-edit").dialog('open');
    return false;
});

That's basically all of the "data binding" going on in the jquery version. As you can see it's really not anything fancy.

You'd probably like to do something more elegant, like setting up an angular directive for your editDialog or somesuch.

EDIT:
I re-read how you init your modal and if I understood everything correctly you should be able to do something like this (not razor-savvy enough to be 100% on the syntax but you get the idea)

@Html.ActionLink("Edit", "Edit", 
   new { id = item.Id }, 
   new { ng_click = "editUser('" + @item.Id + "')" })

Also, you might or might not need to scope editUser inside ng-click.

This code to show bootstrap popup

<script type="text/javascript">
    $(document).ready(function () {
        $.ajaxSetup({ cache: false });
        $(".editDialog").live("click", function (e) {
            $('#myModalContent').load(this.href,function(){
            $('#myModal').modal({
                   keyboard: true
              },'show');
              bindForm(this);
        });
           return false; 
    });

    function bindForm(dialog){
    $('form',dialog).submit(function(){
    $.ajax({
          url:this.action,
          type:this.method,
          data:$(this).serialize(),
          success: function(result){
              if(result.success)
    {
      $('#myModal').modal('hide');
      $('#YourFormId').load(result.url);
      }
      else
      {
    $('#myModalContent').html(result);
      bindForm(dialog);
      }  
    }
    });
    return false;
    )};
    </script>

In your parent view:

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->


  </div>
</div>

In Edit in popup build the code into

  <div class="modal-content">
          <div class="modal-header">
            //Your heading
          <div class="modal-body">
            //your body content
          </div>
          <div class="modal-footer">
           //your footer
          </div>
        </div>

Example for delete with bootstrap modal and mvc model:(asp mvc6) html page :

<div ng-controller="CustomersCtrl">
//template for modal with bootstrap
<div class="modal-header" style="background-color:#54a0fc !important;">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="cancel()"><span aria-hidden="true">&times;</span></button>
    <h3>Delete</h3>
</div>
<div class="modal-body">
    <table class="table">
        <thead>

        </thead>
        <tbody>
            <tr>
                <td>Last Name : </td>
                <td>{{customer.LastName}}</td>
            </tr>
            <tr>
                <td>First Name : </td>
                <td>{{customer.FirstName}}</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="modal-footer" style="background-color:#54a0fc !important;">
    <button ng-click="delete(customer.CustomerID)" class="btn btn-danger btn-lg">Delete</button>
    <button ng-click="cancel()" class="btn btn-default btn-lg">Cancel</button>
</div>

in your controller think to add ['ui.bootstrap'] in your app.js:

CustomersCtrl.$inject = ['$scope', '$http', '$location', '$modal'];

function CustomersCtrl($scope, $http, $location, $modal) {

 //function to open Delete modal
$scope.openDelete = function (id) {
        var modalInstance = $modal.open({
            templateUrl: 'Modals/Customers/delete.html',
            controller: $scope.modalDelete,
            //matches of the id of your item to recover object model in the controller of the modal
            resolve: {
                id: function () {
                    return id
                }
            }
        });
    }
    //controller of the modal. Inside you can recover your object with ajax request
    $scope.modalDelete = function ($scope, $modalInstance, id) {
        if (angular.isDefined(id)) {
            var reqGetCustomer = $http({ url: '/api/Customers/' + id, method: 'GET' });
            reqGetCustomer.success(function (dataResult) {
                $scope.customer = dataResult;
            });
        } else { alert('id is undefined'); }
        //function to close modal
        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        }
    }

    $scope.delete = function (id) {
        var customer = getCustomer(id);
        var reqDeleteCustomer = $http({ url: '/api/customers/' + id, method: 'DELETE' });
        reqDeleteCustomer.success(function (dataResult) {
            $scope.cancel();
        });
        $scope.customers = getListCustomers();
    }
 }

I hope this will help you