javascript - 使用 jQuery onclick 将数据传递到部分 View

Question

我有一个名为 Index 的 View ，其中有一个链接列表，每个链接都有一个 ID。当单击其中一个链接时，我希望打开一个 jQueryUI 对话框并显示该 ID。 (该对话框最终将包含一个 HTML 表单，但为了简单起见，我们先从打印链接 ID 开始。)

到目前为止，我已经尝试使对话框的内容成为部分 View (因为最终它会很复杂)。我的索引 View 如下所示:

// 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传递给局部 View 呢？我知道我可以向 @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 将其作为属性进行访问。