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

时间:2010-06-30 19:41:51

标签: asp.net-ajax asp.net-mvc-2

首先让我说我对JavaScript缺乏经验。

这是我想要做的。当用户在一行数据上单击“显示详细信息”时,它们会弹出(模态?)窗口,其中包含从MVC应用程序中的另一个操作生成的一些数据。我在哪里可以找到实现这样的事情的例子?

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

任何方向都将受到高度赞赏。

1 个答案:

答案 0 :(得分:1)

首先,你需要在页面的某个地方使用DIV - 比如给它一个id“PopUpPanel”。现在为jQuery创建一个“ready”事件来初始化弹出/模态对话框:

<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>

这些应该会让您到达弹出/对话框窗口中显示详细信息页面的位置。要在详细信息对话框中弹出另一个表单或替换详细信息对话框,它应该非常相似。