在 MVC 中显示表格的 jQuery 模态窗口

Question

首先让我说我对 JavaScript 没有经验。

这就是我想要做的。当用户在一行数据上单击“显示详细信息”时，他们会得到一个弹出（模式？）窗口，其中包含从 MVC 应用程序中的另一个操作生成的一些数据。我在哪里可以找到实现这样的例子？

此外，当用户在此弹出窗口或原始数据行上单击“批准”时，将显示另一个弹出窗口，其中包含用户需要填写的表格。

任何方向都将不胜感激。

Answer 1

首先，您需要在页面的某个位置添加一个 DIV - 比如说给它一个 id “PopUpPanel”。现在为 jQuery 创建一个“就绪”事件来初始化弹出/模态对话框：

<script type="text/javascript">
    $(document).ready(function () {
        $("#PopUpPanel").dialog({
            modal: true,
            autoOpen: false,
            height: 'auto',
            width: 'auto',
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });
    });
</script>

假设该行有一个链接“显示详细信息” - 为“显示详细信息”点击创建一个“处理程序”：

<script type="text/javascript">
    function showDetail(id) {
        $.get('MyController/MyAction/' + id, function(data) {
            $('#PopUpPanel').html(data);
            $('#PopUpPanel').dialog('open');
        });
    }
</script>

这些应该会让您的详细信息页面显示在弹出/对话窗口中。要弹出除详细信息对话框之外的其他表单或替换详细信息对话框，它应该非常相似。