logo标签列表

如何将MVC模型传递到UI-bootstrap模态框

javascriptjqueryasp.net-mvcangularjstwitter-bootstrap
6

我正在尝试使用Angular/bootstrap模态框编辑MVC ApplicationUser的脚手架视图。我找到了一些示例，它们大多是jQuery编写的。我找到了一个可以使用jquery-ui很好地运行的示例。我希望与我的模态框保持一致，因此需要让它与angular-ui或普通bootstrap配合工作。我不确定这是如何调用MVC控制器进行数据绑定的。

可行的Jquery-ui示例

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

以下是我如何使用Angular通过API调用打开模态框的方法。

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

更新

$scope.editUser = function (id) {

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

查看

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

更新2 这个语法

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

出现了这个错误。

错误：[$parse:syntax] 语法错误：Token 'bc05f5' 不是预期的，应该是 [)]，位于表达式 [editUser(87bc05f5-35c2-4278-a528-b7e237922d4e)] 的第12列开始，而该表达式从 [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)

3个回答
5

我不确定这样是如何调用MVC控制器进行数据绑定的。

只是为了让你了解一下有趣的部分。

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

这基本上就是jQuery版本中所有的"数据绑定"。如您所见，这并不复杂。
您可能想要做更加优雅的事情，比如为您的editDialog设置一个Angular指令或类似的操作。
编辑：
我重新阅读了您初始化模态框的方式，如果我理解正确，您应该能够像这样做（对语法不是很熟悉，但您可以理解一下）。
@Html.ActionLink("Edit", "Edit", 
   new { id = item.Id }, 
   new { ng_click = "editUser('" + @item.Id + "')" })

另外，您可能需要在ng-click中对editUser进行范围限定。

看看我的更新答案，看看是否适合你。如果你绝对需要像jquery一样加载整个URL，那么你需要在你的模态框内使用一个iframe，但这似乎是不必要的。 - Jan
ng-click在控制器中没有触发函数。 - texas697
那么它们可能不在同一作用域下运行。你尝试过从该方法中警报或记录一些内容来验证它是否真的没有触发吗？另外，就像我说的，我不能百分之百确定我的Razor语法是否正确。 - Jan
刚刚更新了帖子。是的，我尝试过使用警告。如果我在这里完全迷失方向，请原谅我。今天是漫长的一天。 - texas697
也许你需要 ng_click = "editLocation(" + @item.Id + ")"？不过我认为这可能是作用域问题。无论如何，你可以尝试完全省略变量 ng_click = "editLocation()" 直到你确定它能够触发。 - Jan
显示剩余7条评论
0
这段代码用于显示Bootstrap弹出窗口。
<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>

在您的父视图中：

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

    <!-- Modal content-->


  </div>
</div>

在弹出窗口中进行编辑，将代码构建到其中

  <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>
我有点困惑最后一部分。那去哪里？ - texas697
将你的代码整合到打开弹出窗口的哪个部分。@texas697 - Saravanan Arunagiri
这是一个jQuery解决方案，OP已经拥有了。他们特别要求一个非jQuery解决方案。 - Jan
-1

使用Bootstrap模态框和MVC模型进行删除的示例：（asp.net mvc6） HTML页面：

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

在你的控制器中，记得在你的app.js文件中添加['ui.bootstrap']：
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();
    }
 }

希望这能对你有所帮助

这只是你自己从http://stackoverflow.com/a/31743478/78639复制的代码。这与问题完全无关。 - Jan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接