jQuery script needs value from asp.net mvc Razor ForEach

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

First set a variable in your javascript file that both the function and your Dialog can access. You just have to set that variable in the click and then use it in the dialog. But the problem is getting that id. Here are some solutions:

Solution 1 - Hidden field

You can add a hidden field in the same TD from the button or somewhere else.

<td>
    @Html.HiddenFor(i => item.Id)
    <button id="editperson">Edit</button>

</td>

When you click the button just do the following:

$(this).parent().find('input').first()

This will get the hidden field. Then you can get the value from it and do with it whatever you want.

Solution 2 - data attribute in button

You can add a 'data' parameter in the button that contains the id.

<button id="editperson" data-myitemid="@(Item.Id)">Edit</button>

You can then get the id in the jquery function like this:

var oItemId = $(this).attr('data-myitemid');

Solution 3 - Trigger the function with parameter in line.

You can trigger a javascript function with the onclick and just pass the parameter.

<button id="editperson" onclick="SomeJavascriptFunctionWithAParameter(@(Item.Id));">Edit</button>

Answer 2

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>