是否可以在 ASP.Net.Core 2.2+ 中将视图组件动态添加到剃刀页面？

Question

我正在编写一个非常简单的内容管理系统，我想知道是否可以动态地将 ViewComponent（或其他活动元素）动态地添加到 Razor 页面，最好是从数据库中。

我创建了一堆小部件，但我必须将它们放在页面上，然后根据用户的选择有选择地显示或隐藏它们。它工作正常，但我认为必须有更好的方法。

我已经研究了一段时间了，但我似乎找不到解决方案，或者您可能做不到。

非常感谢任何想法

:)

感谢@Arjun Vachhani，如果其他人想尝试的话，这是我想出的。

//item 是一个 class 包含 ComponentName 作为字符串属性和 Data 作为动态属性。 @model 是那些 class 中的 List<>。

public class MyClass
{
    public string ComponentName { get; set; }
    public dynamic Data { get; set; }
}

在我看来我有

@model List<MyClass>

@foreach (var item in Model)
{
    @await Component.InvokeAsync(item.ComponentName, item.Data );
}

在控制器中（作为测试）

List<MyClass> list = new List<MyClass>();

var definition = new { id = "" };

var user = await _adminService.GetUserByEmail(User.Identity.Name);

//one of these for each component. You could just as easily get them from the database via `dbcontext` or `Service` method.
//in this case I wanted the logged in user id from Asp.Net.Identity but could equally be any parameter you wanted.

list.Add(new JsonApiResult { ComponentName = "CompenentName1", Data = JsonConvert.DeserializeAnonymousType($"{{ id : {user.Id} }}", definition) });
list.Add(new JsonApiResult { ComponentName = "CompenentName2", Data = JsonConvert.DeserializeAnonymousType($"{{ id : {user.Id} }}", definition) });
//etc...

return View(list);

我正在研究 jQuery.Sortable，所以如果我得到一个好的解决方案，我也会 post。

Answer 1

您可以将视图组件的名称保存在数据库中，并可选择在视图组件中传递值。用户可以select他感兴趣的组件。select编辑的组件将保存在数据库中。在页面呈现期间循环遍历 selected 组件并动态呈现。

下面是动态呈现组件的示例代码。

@* some other code *@
<div>
    @foreach(var component in Model.SelectedComponent)
    {
        <div class="component">
            @await Component.InvokeAsync(component.Name, component.OptionalJsonString)
        </div>
    }
</div>
@* some other code *@

这是如何实现的想法。实施细节可能因您的要求而异。

https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components?view=aspnetcore-3.0 是关于视图组件的官方文档以获取更多信息

是否可以在 ASP.Net.Core 2.2+ 中将视图组件动态添加到剃刀页面？

Is it possible to dynamically add viewcomponents to a razor page in ASP.Net.Core 2.2+?

asp.net-core

razor-pages