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モデルが利用できなくなったクライアント側でイベントが発生するため、これも機能しません。別のコントローラーメソッドを呼び出すことはオプションではないため、できることは、隠しフィールドにすべての詳細を書き込むことです。それらを 1 つのコンテナー (連絡先ごとに 1 つの div など) に配置し、連絡先の ID を div に割り当てます。タグがクリックされると、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 に答える