Question

I have the following jQuery script to show a model dialog to enable editing of the selected item from a table:

<script type="text/javascript">
$(function () {
    $('#dialog').dialog({
        autoOpen: false,
        width: 800,
        resizable: false,
        title: 'Edit Person',
        modal: true,
        open: function (event, ui) {
            var url = '@Html.Raw(Url.Action("Edit", "Person", new {
                id = **Need item.Id here**,
                selectedPersonFor = Model.SelectedPersonFor,
                selectedPersonForId = Model.SelectedPersonForId,
                clientAccountId = Model.ClientAccountId
            }))';
            $(this).load(url);
        },
        buttons: {
            "Save": function () {
                $(this).dialog("save");
                // prevent the default action, e.g., following a link
                return false;
            },
            "Close": function () {
                $(this).dialog("close");
                // prevent the default action, e.g., following a link
                return false;
            }
        }
    });

    $('#editperson').click(function () {
        $('#dialog').dialog('open');
    });
});

This dialog is opened when the user clicks the edit button for a specific row in the following table (only partial mark up for table is shown):

@foreach (var item in Model.Persons)
{
   <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Title.Name)
        </td>
        ......
        <td>
            <button id="editperson">Edit</button>
        </td>
    </tr>
 }

What I need to be able to do is to get the item.id value from the foreach loop into my jQuery script to populate the id value in the url variable (I’ve marked the place in the script with the text Need item.Id here).

Is there a way to achieve this – or do I need to approach this in a different way?

Answer 1

One way to achieve this using the structure above is by adding a function to trigger the dialog manually and set the ‘working’ person ID before displaying it as follows:

var workingPersonId;

function showPersonDialog(personId) {
    workingPersonId = personId;
    $('#dialog').dialog('open');
}

$('#dialog').dialog({   
        autoOpen: false,   
        width: 800,   
        resizable: false,   
        title: 'Edit Person',   
        modal: true,   
        open: function (event, ui) {   
            var url = '@Html.Raw(Url.Action("Edit", "Person", new {   
                id = workingPersonId,   
                selectedPersonFor = Model.SelectedPersonFor,   
                selectedPersonForId = Model.SelectedPersonForId,   
                clientAccountId = Model.ClientAccountId   
            }))';   
            $(this).load(url);   
        },   
        buttons: {   
            "Save": function () {   
                $(this).dialog("save");   
                // prevent the default action, e.g., following a link   
                return false;   
            },   
            "Close": function () {   
                $(this).dialog("close");   
                // prevent the default action, e.g., following a link   
                return false;   
            }   
        }   
    });   

Trigger with something like:

<button id="editperson" onclick="showPersonDialog(@item.ID);return false;">Edit</button>