如何将 MVC 模型传递给 UI 引导模式
Posted
技术标签:
【中文标题】如何将 MVC 模型传递给 UI 引导模式【英文标题】：how to pass MVC model to a UI-bootstrap modal 【发布时间】：2015-10-24 18:57:48 【问题描述】：我正在尝试使用 Angular/bootstrap 模式来编辑 MVC ApplicationUser 脚手架视图。我找到了一些例子，它们大多是 jquery。我发现一个使用 jquery-ui 效果很好的。我想与我的模态保持一致，所以我需要让它与 angular-ui 或普通引导程序一起工作。我不确定这是如何调用 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] 语法错误：令牌 '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-472 -b7e237922d4e)
【问题讨论】：
【参考方案1】：我不确定这是如何调用 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 或类似的设置一个角度指令。
编辑： 我重新阅读了你如何初始化你的模式，如果我正确理解了所有内容，你应该能够做这样的事情（不是精通到 100% 的语法，但你明白了）
@Html.ActionLink("Edit", "Edit",
new id = item.Id ,
new ng_click = "editUser('" + @item.Id + "')" )
此外，您可能需要也可能不需要在ng-click 内限定editUser。
【讨论】：
查看我更新的答案，看看是否适合您。如果您绝对需要像 jquery 那样加载整个 URL，您是否需要在模态框内使用 iframe，而这似乎没有必要。 它的工作原理肯定更有意义，但我仍然不确定如何用引导模式替换 jquery-ui 模式 ng-click 在控制器中没有触发功能 那么它们可能不在同一个作用域下运行。您是否尝试从该方法中发出警报或记录某些内容以查看它确实没有触发？另外，就像我说的，我并不是 100% 认为我的 Razor 语法是正确的。 刚刚更新的帖子。是的，我尝试过警报。如果我完全不知道在这里做什么，请原谅我。这是漫长的一天【参考方案2】：此代码显示引导弹出窗口
<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 这是一个 jquery 解决方案，OP 已经有了。他们专门要求非 jquery 解决方案。【参考方案3】：使用引导模式和 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">×</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();
希望对你有帮助
【讨论】：
这只是来自***.com/a/31743478/78639 的您自己的代码的复制粘贴。这根本与问题无关。以上是关于如何将 MVC 模型传递给 UI 引导模式的主要内容，如果未能解决你的问题，请参考以下文章