Passing data into a partial view with a jQuery onclick

Question

I have a view called Index that has a list of links, each with an ID. When one of those links is clicked, I want a jQueryUI dialog box to open and show that ID. (The dialog box will eventually have an HTML form in it, but for the sake of simplicity, let's just start with printing the link ID.)

So far, I've tried to make the content of the dialog box a partial view (since eventually it will be complex). My Index view looks like this:

// Index
<script>
    $(function() {
        $('#dialog-wrapper').dialog({
            width: 380,
            height: 270,
            modal: true
        });

        $('.action-link').click(function() {
            $('#dialog-wrapper').dialog("open");
        });
    })
</script>

<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Link.Name)
        </th>
        <th></th>
    </tr>

    @foreach (UserLink userLink in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => userLink.Link.Name)
            </td>
            <td>
                <a href="#" class="action-link">click here</a>
            </td>
        </tr>
    }
</table>
<div id="dialog-wrapper">
    @Html.Partial("_Dialog")
</div>

So the question is, how do I pass the ID of the clicked link to the partial view? I know I can add another parameter to the @Html.Partial call, but how do I pass the ID corresponding to the link clicked?

Answer 1

You might consider something such as

// Index
<script>
    $(function() {
        $('#dialog-wrapper').dialog({
            width: 380,
            height: 270,
            modal: true
        });

        $('.action-link').click(function(e) {
            e.preventDefault(); //stop the hyperlink from trying to navigate
            var theId = $(this).attr("data-linkid");
            $('#dialog-wrapper').dialog("open", theId);
        });
    })
</script>

<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Link.Name)
        </th>
        <th></th>
    </tr>

    @foreach (UserLink userLink in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => userLink.Link.Name)
            </td>
            <td>
                <a href="#" class="action-link" data-linkid="@Html.Raw(userLink.Link.Id)">click here</a>
            </td>
        </tr>
    }

This could write your "id" into a pseudo-attribute on the hyperlink which is then accessible as an attribute using jQuery within you action-link click method.

Answer 2

This is not exactly you need but it does helps you i guess, it shows the ID of that particular Grid Row, so in your case use the same button to get the ID, Check this fiddle(copy this link)

//jsfiddle.net/m8fsv/23/