How do I implement something like this?

Question

Well I have to implement something as follows:

I need to display a list of Contact IDs of all the contacts I have in my model.

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

Each list element will be clickable, upon clicking which, a dialog will popup.

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

The dialog should show that particular contact's First Name, Last Name, Title, Email.

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

The dialog should let user make edits to the contact's details.

How do I do this? I'm having problem in passing the 'id' parameter to the dialog box element.

<div id="contact-dialog">

Answer 1

I'm having problem in passing the 'id' parameter to the dialog box element.

The way you are using the id is not correct as you use it like the following. In the given code below (taken from your code) you are using the id as the index and that won't work most of the time especially if the ids does not start with 0.

Model.Contacts.ToList()[id]

That also won't work because the onclick event happens on the client side where the model is no longer available. So what you can do, since calling another controller method is not an option is to write all the details in a hidden field. Put them on a single container, for example one div per contact, the assign the id of the contact to the div. When the a tag is clicked, you read the values from the div and assign them to the form. All of this can be handled easier with tools like knockout, but if using it is not an option then here's the code that will do the trick.

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

before you show the dialog, copy the contents to the form:

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';
}