使用jquery ui在mvc 4中打开带有参数的模态窗口

Posted 2023-05-09

【中文标题】使用jquery ui在mvc 4中打开带有参数的模态窗口

【英文标题】：open modal window with paramters in mvc 4 using jqueryui

【发布时间】：2013-04-30 16:47:45

【问题描述】：

我想根据主机页面发送的参数动态加载带有数据的模式窗口。主机页面将在表格中包含一组编辑链接。单击任何编辑链接应打开一个窗口，其中包含基于发送的行 ID 的相应数据。我在下面的代码不起作用。我需要进行哪些更改，以便当我单击编辑链接时，我可以将 rowid 发送到“dialogMsg”div 层，以便可以将数据动态放置在其中

<div id="dialogMsg" title="Editing " + StudentFirstName >
            Show other student details here
</div>

<table >
<tr>
    <td>
        James
    </td> <td><a href="#" id="editlink">Edit</a></td>
</tr>
<tr>
    <td>
        John
    </td> <td><a href="#" id="editlink">Edit</a></td>
</tr>
<tr>
    <td>
        Doe
    </td> <td><a href="#" id="editlink">Edit</a></td>
</tr>
</table>

<script type="text/javascript">

    $(document).ready(function () 
    
        $("#dialogMsg").dialog(
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: 
                "Create an account": function () 
                    var bValid = true;

                    $(this).dialog("close");

                ,
                Cancel: function () 
                    $(this).dialog("close");
                
            

        );


        $('#editlink')
        .click(function () 
            $('#dialogMsg').dialog('open');
        );
    );
</script>

【问题讨论】：

您可以在使用 ajax 编辑链接的部分视图中填充对话框消息，然后显示它。

看看他的问题：***.com/questions/15959639/…

【参考方案1】：

我对你的代码做了一些修改：

<div id="dialogMsg" title="Editing ">Show other student details here</div>
<table>
    <tr>
        <td>James</td>
        <td>
            <a href="#" class="editlink">Edit</a>
            <input type="javascript" class="personId" value="1" />
        </td>
    </tr>
    <tr>
        <td>John</td>
        <td>
            <a href="#" class="editlink">Edit</a>
            <input type="javascript" class="personId" value="2" />
        </td>
    </tr>
    <tr>
        <td>Doe</td>
        <td>
            <a href="#" class="editlink">Edit</a>
            <input type="javascript" class="personId" value="2" />
        </td>
    </tr>
</table>

<script type="text/javascript">
    $(document).ready(function () 
        $("#dialogMsg").dialog(
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: 
                "Create an account": function () 
                    var bValid = true;

                    $(this).dialog("close");

                ,
                Cancel: function () 
                    $(this).dialog("close");
                
            

        );


        $('.editlink').click(function () 
            $('#dialogMsg')
                .dialog('option', 'title', "Editing " 
                    + $(this).closest('tr').find('td:first').text())
                .dialog('open');

            var personId = $(this).closest('tr').find('.personId').val();
            // work it out with the ID here
        );
    );
</script>

所做的更改：

将标题移至 JavaScript。你不能像<div id="dialogMsg" title="Editing " + StudentFirstName >这样设置title属性。

将Edit 链接的id 属性更改为class 属性。 id 对于页面中的每个元素必须是唯一的。

在 JavaScript 中设置对话框标题。 $(this).closest('tr').find('td:first').text()).dialog('open');。在这里我得到最近的父tr标签，并得到第一个td子标签的文本。

编辑：

为带有 css 类的 ID 添加了隐藏字段。该类可以在jQuery select中用于获取ID。

【讨论】：

谢谢。现在标题已显示。如何传递该记录的行 ID？行 ID 不会显示在网格上。但是我仍然需要将id发送到模态窗口以从数据库中提取记录详细信息并将其显示在模态窗口中。

$(this).closest('tr') 返回表中选定的行。您可以在 ID 的每一行中设置一个隐藏字段。然后您可以使用$(this).closest('tr').find('input[type=hidden]').val() 获取ID。您可以将其保存在变量中，并在用户单击按钮时使用它。

谢谢，编辑您的答案，我会将其标记为正确。顺便说一句，如果该行有多种输入类型怎么办？

对于多种输入类型，您可以为隐藏字段添加一个 css 类并使用该类进行选择。查看更新的代码以了解情况。