asp.net-core - 在列表上下文中重用 Razor 视图组件

Question

比如说，在一个页面上，我有一个项目列表和每个项目旁边的删除按钮。单击后，我想显示一个带有确认消息的弹出窗口。

确认对话框和删除功能被放入视图组件中。

我知道我可以这样做：

foreach (var item in Model.List)
{
    <tr class="row">
        <td class="col-12">
            @item.Name
            <button class="btn btn-danger ml-auto" data-toggle="modal"
                data-target="#[e-mail]">&times;</button>
            <vc:delete-item-dialog id="[e-mail]" item-id="@item.Id"></vc:delete-item-dialog>
        </td>
    </tr>
}

但是随后每个delete-item-dialog视图组件都是单独呈现的，从而使生成的 HTML 变得臃肿。

是否可以将该视图组件仅放置在列表末尾之后的一个位置，并item-id更动态地提供参数？

标签： asp.net-corerazor

Answer 1

是否可以将该视图组件仅放置在列表末尾之后的一个位置，并更动态地提供 item-id 参数？

是的，您可以使用 ajax 动态加载视图组件。下面是一个工作演示。

看法：

@model List<User>

<table>
    @foreach (var item in Model)
    {
        <tr class="row">
            <td class="col-12">
                @item.Name
                <button class="btn btn-danger ml-auto" onclick="deleteuser(@item.Id)">
                    &times;
                </button>
            </td>
        </tr>
    }
</table>

<div id="container">

</div>

@section scripts{
    <script>
        function deleteuser(id){
            $.ajax({
                type: 'get',
                url: 'GetMyViewComponent?id=' + id,
                success: function (result) {
                    $("#container").html(result);
                    $('.modal').modal('show');
                }
            })
        }
    </script>
}

控制器：

public IActionResult UserList()
{
    var users = new List<User>
    {
        new User{ Id = 1, Name = "Mike"},
        new User{ Id = 2, Name = "John"},
        new User{ Id = 3, Name = "David"},
    };
    return View(users);
}

public IActionResult GetMyViewComponent(int id)
{
    return ViewComponent("PopUp", id);
}

PopUpViewComponent 类：

public class PopUpViewComponent : ViewComponent
{
    public IViewComponentResult Invoke(int id)
    {
        return View(id);
    }
    
}

PopUpViewComponent 剃刀视图：

@model int 

<div class="modal fade" id="delete-@Model" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure to delete @Model?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Ok</button>
            </div>
        </div>
    </div>
</div>

结果：