Question

我必须按照以下方式实施：

我需要显示我模型中所有联系人的联系人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">

Answer 1

我在传递“身份证”方面遇到了问题。对话框的参数元件。

您使用id的方式不正确，因为您使用它如下所示。在下面的给定代码中（取自您的代码），您使用id作为索引，并且大部分时间都不会工作，尤其是id s不以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';
}

我该如何实现这样的东西？

1 个答案: