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

【问题标题】：Passing data into a partial view with a jQuery onclick使用 jQuery onclick 将数据传递到局部视图
【发布时间】：2014-05-07 04:35:22
【问题描述】：

我有一个名为 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？

【问题讨论】：

您将在运行时通过 ajax 调用加载部分视图？

标签： javascript jquery asp.net-mvc jquery-ui

【解决方案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 作为属性进行访问。

【讨论】：

酷，有道理。但是如何在部分视图中访问 theId？
在对话方法中我假设有一种方法可以传递状态？我不熟悉这种方法。在最坏的情况下，您可以使用 #dialog-wrapper 的“数据”属性，例如$('#dialog-wrapper').data('linkid',theId);然后使用脚本 var theId = $('#data-wrapper').data('linkid'); 在 Partial 中检索仅仅因为您的局部视图加载较晚并不意味着它不能使用 jQuery 选择器访问页面上的其他元素，例如#data-wrapper 应该仍然可以在脚本中访问

【解决方案2】：

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

//jsfiddle.net/m8fsv/23/

【讨论】：