Wie MVC-Modell an ein UI-bootstrap Modal übergeben werden

Question

Ich versuche, ein Angular/Bootstrap-Modal zu verwenden, um MVC ApplicationUser-Gerüstansichten zu bearbeiten. Ich habe ein paar Beispiele gefunden, die meistens jQuery sind. Ich habe einen gefunden, der mit jquery-ui gut funktioniert. Ich möchte mit meinen Modalitäten konsistent sein, also muss ich es mit angular-ui oder einfachem Bootstrap arbeiten lassen. Ich bin nicht sicher, wie dies den MVC-Controller für die Datenbindung nennt.

Arbeits JQuery-ui Beispiel

<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> 

Hier ist, wie ich Winkel verwenden, um eine modale mit einem API-Aufruf zu öffnen.

$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; 
        } 
       } 
      }); 
     }; 

Ansicht

<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 Diese Syntax

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

diesen Fehler zu werfen.

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.org/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)

Answer 1

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

Nur um Sie in Hinweis auf die interessanten Teile

// 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; 
}); 

, die im Grunde alle "Bindungsdaten" ist in der jquery Version geht. Wie Sie sehen können, ist es wirklich nichts Besonderes.

Sie möchten wahrscheinlich etwas eleganteres tun, wie zum Beispiel eine eckige Anweisung für Ihre editDialog oder so ähnlich.

EDIT:
ich wieder lesen, wie Sie Ihre modal init und wenn ich alles richtig verstanden sollten Sie in der Lage sein, so etwas zu tun (nicht rasiermesser klug genug zu 100% auf die Syntax zu sein, aber Sie bekommen die Idee

)

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

auch Sie könnten oder müssen unter Umständen nicht zu Umfang editUser innerhalb ng-click.

Answer 2

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 Ihrer Eltern Ansicht:

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

    <!-- Modal content--> 


    </div> 
</div> 

Im Edit in Popup bauen Sie den Code in

<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> 

Answer 3

Beispiel für mit Bootstrap-modal und MVC-Modell löschen :(Asp.net mvc6) HTML-Seite:

<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 Ihrem Controller denken [ 'ui.bootstrap'] in Ihrer app.js hinzuzufügen:

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(); 
    } 
} 

ich diese Ihnen helfen, Hoffnung