1

好吧，我必须实现以下内容：

我需要显示模型中所有联系人的联系人 ID 列表。

<ul>
    @for (int i = 0; i < Model.Contacts.ToList().Count; i++)
    {
        <li><a onclick="showContactInfoDialog(@Model.Contacts.ToList()[i].ContactId)">Model.Contacts.ToList()[i].ContactId</a></li>
    }
</ul>

每个列表元素都是可点击的，点击后会弹出一个对话框。

function showContactInfoDialog(id) {
document.getElementById('contact-dialog').style.display = 'block';
}

该对话框应显示特定联系人的名字、姓氏、职务、电子邮件。

<div id="contact-dialog">
    <form action="Contact/SaveContactEdits" method="post">
        <table>
            <tr>
                <td>First Name</td>
                <td>
                    <input type="text" name="FName"value="@Model.Contacts.ToList()[id].FirstName" /></td>
            </tr>

            <tr>
                <td>Last Name</td>
                <td>
                    <input type="text" name="LName" value="@Model.Contacts.ToList()[id].LastName" /></td>
            </tr>

            <tr>
                <td>Title</td>
                <td>
                    <input type="text" name="Title" value="@Model.Contacts.ToList()[id].Title" /></td>
            </tr>

            <tr>
                <td>Email Address</td>
                <td>
                    <input type="text" name="Email" value="@Model.Contacts.ToList()[id].Email" /></td>
            </tr>
        </table>

    <input type="submit" value="Save"/>
    </form>
</div>

该对话框应允许用户编辑联系人的详细信息。

我该怎么做呢？我在将“id”参数传递给对话框元素时遇到问题。

<div id="contact-dialog">
4

1 回答 1

0

我在将“id”参数传递给对话框元素时遇到问题。

您使用的id方式不正确，因为您使用它如下所示。在下面给定的代码中（取自您的代码），您使用 id 作为索引，并且大多数情况下这不起作用，特别是如果ids 不以 0 开头。

Model.Contacts.ToList()[id]

这也不起作用，因为onclick事件发生在模型不再可用的客户端。所以你可以做的是，因为调用另一个控制器方法不是一个选项，所以你可以在隐藏字段中写入所有细节。将它们放在一个容器上，例如每个联系人一个 div，将联系人的 id 分配给 div。单击 a 标签时，您从 div 中读取值并将它们分配给表单。所有这些都可以使用敲除等工具更轻松地处理，但如果使用它不是一个选项，那么这里的代码可以解决问题。

// in your loop do this
// btw, it would be better if you Contacts object is an IList so you can do indexing easier
<li><a onclick="showContactInfoDialog(@Model.Contacts.ToList()[i].ContactId)">Model.Contacts.ToList()[i].ContactId</a>
    <div id="@("contactrow"+Model.Contacts.ToList()[i].ContactId)">
        @Html.HiddenFor(m=>Model.Contacts.ToList()[i].FirstName)
        // do the same for the rest of the fields you want to show on the dialog
    </div>
</li>

在显示对话框之前，将内容复制到表单中：

function showContactInfoDialog(id) {
    // we are targetting this -> <input type="text" name="FName"
    // assign an id (fname) for optimal performance
    var container = $("#contactrow"+id);
        $("#fname").val(container.find('#FirstName').val());
    // do the same for the rest of the fields
    document.getElementById('contact-dialog')
        .style.display = 'block';
}
于 2013-04-30T07:09:54.690 回答