Question

我想在模态对话框中使用ViewComponent来编辑一些数据，我可以让ViewComponent显示在屏幕上，当我点击按钮时，如果我硬编码一个值，它将检索正确的数据。

@await Component.InvokeAsync("Contact", 2);

或
@await Component.InvokeAsync（“Contact”，new {id = 2}）;

但是我看不到该怎么做才能使Id依赖于我点击的按钮。理想情况下，我想使用data-id。我见过的所有例子都使用了固定值。

编辑：

ViewComponent用于ModalTagHelper，它通过锚标记切换，但我也有一些首先触发的jQuery。

$('.btnShow').on('click', function () {
    $('#hdnContactId').val($(this).data('id'));
    alert($('#hdnContactId').val());
});

<a href="#" data-toggle="modal" data-id="@Model.StudentContactId" data-target="#EditContact" class="btnShow btn btn-default">Edit</a>


<modal id="EditContact" title="Contact Details">
    <modal-body>
        @await Component.InvokeAsync("Contact", new { id=2 });
    </modal-body>
    <modal-footer>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </modal-footer>
</modal>

Answer 1

好的，所以我终于找到了办法我从模态部分删除了@await等，所以默认情况下它没有数据。然后在控制器中我添加了：

public IActionResult ContactViewComponent(int Id) {  
    return ViewComponent("Contact", Id);  
}

并将我的脚本更改为：

$('.btnShow').on('click', function (e) {
    $('#hdnContactId').val($(this).data('id'));
    var container = $(".modal-body");
    $.get("/Contact/ContactViewComponent?Id=" + $(this).data('id'), function (data) { container.html(data); });
});

它现在有效：）

如何将data-id值传递给ViewComponent

1 个答案: