单击表行后，将参数传递给"查看组件"

Question

在普通视图中，我们通过模型填充一个表，其中包含以下内容：

@foreach (var item in Model)
{
if (item.PartnerSubscriptionID > 0)
{
<tr id='[e-mail]'>
<td>
<button type="button" class="btn btn-secondary" onclick='ListCustomEdit("@item.CustomList.ListID")'>
<i class='fas fa-users'></i>
</button>                                    
</td>
<td style="display:none">@Html.DisplayFor(modelItem => item.CustomList.ListID)</td>
<td style="text-align:left">@Html.DisplayFor(modelItem => item.CustomList.ListName)</td>
<td><button id='btnDelete' type='button' class='btn btn-danger' onclick='ListCustomDeleteConfirm(" @item.CustomList.ListID ")'><i class='fas fa-trash'></i></button></td>
</tr>
}
}

在同一页上，我有一个视图组件。当我像这样硬编码ListID时，它就工作了：

<div class="col-8">
@await Component.InvokeAsync("ListCustomMembers" ,  new {ListID = 7 } )
</div>

但是，当用户单击该行时，我们需要传入ID。即，在我们当前有onclick=ListCustomEdit()的情况下，我们需要用正确的ID刷新View Component。

我该怎么做？

Answer 1

ViewComponent是在服务器端渲染的，因此当用户在浏览器中单击时，您需要向服务器发送另一个请求来渲染，并返回带有新参数的ViewComponent，为此您可以使用controller。在要返回ViewComponent的controller中创建action，然后使用jquery单击按钮后更新视图，如下所示

public class TestController : Controller
{
public IActionResult GetNewList(int listId)
{
return ViewComponent("ListCustomMembers", new { listId });
}
}

在视图侧：

<button type="button" class="btn btn-secondary" onclick='ListCustomEdit("@item.CustomList.ListID")'>
<div class="col-8" id="ListCustomMembers">
@await Component.InvokeAsync("ListCustomMembers" ,  new {ListID = 7 } )
</div>

<script>
function ListCustomEdit(listId) {
$.get('/test/GetNewList/?listId=' + listId,
function(result) {
$("#ListCustomMembers").html(result);
});
}
</script>