使用jQuery onclick将数据传递到局部视图

Question

我有一个名为Index的视图，其中包含一个链接列表，每个链接都有一个ID。 当单击其中一个链接时，我想要一个jQueryUI对话框打开并显示该ID。 （对话框最终将包含一个HTML表单，但为了简单起见，我们首先打印链接ID。）

到目前为止，我试图使对话框的内容成为局部视图（因为最终会很复杂）。 我的索引视图如下所示：

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

所以问题是，如何将点击链接的ID传递给局部视图？ 我知道我可以在@Html.Partial调用中添加另一个参数，但是如何传递与单击链接相对应的ID？

Answer 1

你可能会考虑像

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

这可以将您的“id”写入超链接上的伪属性，然后在您的动作链接点击方法中使用jQuery作为属性进行访问。

Answer 2

这不是你需要的，但它确实可以帮助你我猜，它显示了特定网格行的ID，所以在你的情况下使用相同的按钮来获取ID，检查这个小提琴（复制此链接）

//jsfiddle.net/m8fsv/23/