将对象列表传递给ASP.net MVC中的模态弹出窗口

时间:2017-01-06 20:46:20

标签: c# asp.net-mvc bootstrap-modal

我想将对象列表传递给模态弹出窗口,该窗口在单独的.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>&nbsp;
                                            <span class="hidden-sm hidden-xs">Assign Device&nbsp;</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

问题是,当我点击按钮时,弹出模式会立即显示并消失!

如何解决这个问题?

0 个答案:

没有答案