我想将对象列表传递给模态弹出窗口,该窗口在单独的.cshtml
文件中表示为视图
这里我做了什么:
首先,我有以下index.cshtml
视图:
@model E_Voucher.Models.Contract
@{
ViewBag.Title = "Details";
Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
Contract @Html.DisplayFor(model => model.ContractId) Details
</div>
</div>
<div class="portlet-body">
<div class="tabbable-line">
<ul class="nav nav-tabs ">
<li class="active">
<a href="#tab_info" data-toggle="tab"> Info </a>
</li>
<li>
<a href="#tab_project" data-toggle="tab"> Projects </a>
</li>
<li>
<a href="#tab_devices" data-toggle="tab"> Devices </a>
</li>
<li>
<a href="#tab_cards" data-toggle="tab"> Cards </a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_info">
#1 Tab
</div>
<div class="tab-pane" id="tab_project">
#2 Tab
</div>
<div class="tab-pane" id="tab_devices">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="actions" style="padding-left:5px">
<a class="btn btn-circle btn-outline red" data-target="#AssignDeviceModal" data-toggle="modal">
<i class="fa fa-plus"></i>
<span class="hidden-sm hidden-xs">Assign Device </span>
</a>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab_cards">
#4Tab
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="AssignDeviceModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
@Html.Action("AssignDevice")
</div>
</div>
</div>
</div>
</div>
index.cshtml
视图包含4个标签,在device_tab
中有一个按钮,负责向用户显示包含所有可用设备的模态弹出窗口,如您在{{ 1}} div
我设置id=AssignDeviceModal
来调用从DB获取设备的操作方法@Html.Action("AssignDevice")
,并呈现以下AssignDevice
视图:
AssignDevice.cshtml
这是行动方法@model IEnumerable<E_Voucher.Models.Device>
<div class="modal-header">
<h4 class="modal-title">Assign Device</h4>
</div>
<div class="modal-body">
@*for example print the brand of device*@
@foreach (var item in Model)
{
<li>@item.Brand</li>
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
:
AssignDevice
问题是,当我点击按钮时,弹出模式会立即显示并消失!
如何解决这个问题?