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

Question

我想根据主机页面发送的参数动态加载带有数据的模式窗口。主机页面将在表格中包含一组编辑链接。单击任何编辑链接应打开一个窗口，其中包含基于发送的行 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>

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

所做的更改：

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

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

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

编辑：

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