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

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

//索引
$（函数（）{
$（'#对话框包装器'）。对话框({
宽度：380，
身高：270，
莫代尔：对
});
$（'.action link'）。单击（函数（）{
$（'#对话框包装器'）。对话框（“打开”）；
});
})
@DisplayNameFor（model=>model.Link.Name）
@foreach（模型中的UserLink-UserLink）
{
@DisplayFor（modelItem=>userLink.Link.Name）
}
@Html.Partial（“\u对话框”）

---

所以问题是，如何将单击链接的ID传递到局部视图？我知道我可以向另一个参数添加到.HTML.Pult调用，但是如何传递与链接链接对应的ID？

你可以考虑一些类似的东西。

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

//索引
$（函数（）{
$（'#对话框包装器'）。对话框({
宽度：380，
身高：270，
莫代尔：对
});
$（'.action link'）。单击（函数（e）{
e、 preventDefault（）；//停止超链接尝试导航
var theId=$（this.attr（“数据链接ID”）；
$（“#对话框包装器”）.dialog（“打开”，theId）；
});
})
@DisplayNameFor（model=>model.Link.Name）
@foreach（模型中的UserLink-UserLink）
{
@DisplayFor（modelItem=>userLink.Link.Name）
}

---

这可能会将您的“id”写入超链接上的伪属性中，然后可以使用jQuery中的action link click方法将其作为属性访问。

这并不完全是您需要的，但它确实有助于您我猜，它会显示特定网格行的id，因此在您的情况下，使用相同的按钮来获取id，请选中此提琴（复制此链接）

---

//jsfiddle.net/m8fsv/23/

您将在运行时通过ajax调用加载部分视图？很酷，这是有道理的。但如何在部分视图中访问ID？在对话框方法中，我假设有一种传递状态的方法？我不熟悉该方法。最坏的情况下，您可以使用对话框包装器的“数据”属性，例如$（“#对话框包装器”）。数据（'linkid'，theId）；然后使用脚本var theId=$（'#数据包装器'）在部分中检索。数据（'linkid'）；仅因为部分视图加载较晚，并不意味着它无法使用jQuery选择器访问页面上的其他元素，例如#数据包装器仍应在脚本中可访问