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?

Kevin Cloet · Accepted Answer · 2012-01-09 09:57:40Z

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>

Nick · Accepted Answer · 2012-01-09 09:47:32Z

0

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>

answered Jan 9, 2012 at 9:47

Nick

5,89211 gold badges54 silver badges99 bronze badges

4 Comments

daveywc Over a year ago

This solution worked, but I did have to do some string manipulation to get the workingPersonId parameter into the url variable.

daveywc Over a year ago

While this solution works, passing the correct id to the function, it will only work to open one row from the table. To get it to open a dialog for a different row I have to refresh the page. If I do not refresh the page then upon debugging the javascript I find that the showPersonDialog function is called each time, but the "open" function on the dialog is only called the first time. I also note that the Close button does not work on the dialog. I have to close the dialog using the upper right "x". So I guess the dialog is not getting closed properly somehow.

Nick Over a year ago

Did you remove $('#editperson').click(function () {... ? Also, check you've only initialised the dialog once. $(document).ready(function() { $('#dialog').dialog({

daveywc Over a year ago

Now that I've moved back to showing a partial view within the dialog it seems to be working ok when opening on subsequent occasions.

Collectives™ on Stack Overflow

jQuery script needs value from asp.net mvc Razor ForEach

2 Answers 2

Solution 1 - Hidden field

Solution 2 - data attribute in button

Solution 3 - Trigger the function with parameter in line.

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Solution 1 - Hidden field

Solution 2 - data attribute in button

Solution 3 - Trigger the function with parameter in line.

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related