Question

我想在单独的视图文件中创建bootstrap模式弹出窗口的内容，并在呈现视图之前调用与视图文件相关的相应操作方法GET Action，并将自定义对象列表传递给通过动作方法查看。

模态：

 <div class="modal fade" id="assign_device" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
               <h4 class="modal-title">Assign Device</h4>
            </div>
            <div class="modal-body">
                Device list here
            </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>
         </div>
      </div>
   </div>

当我点击按钮时，上面的modal弹出窗口必须出现在当前页面中（例如index.cshtml）。

Answer 1

您可以创建一个操作方法。

public PartialViewResult GetDevice()
{
   var devices= FetchDevices();

   return PartialView("viewName", devices);
}

您的观点将是这样的

@model DeviceModelNamespace
<div class="modal fade" id="assign_device" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Assign Device</h4>
                    </div>
                    <div class="modal-body">
                        foreach over devicemodel
                    </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>
                </div>
            </div>
        </div>

并在其他视图中调用它

@Html.Partial("viewName")

并在bootstrap模型中使用它

<script>
    $("#load-partial").on('click', function () {
        console.log('click');
        //setup modal
        $('#dynamic-modal').modal({
            keyboard: false,
            remote: '/controllername/partialviewname'
        }).show();
    });
    $('#dynamic-modal').on('showen.bs.modal', function(e) {
        console.log('shown');
    });
</script>

将自定义对象列表传递给模态弹出窗口

1 个答案: