如何将运行时参数传递给 ViewComponent Invoke 方法

Question

我正在试用 .net Core ViewComponents 而不是局部视图。这是我的场景。我有一个包含几个 kendo 列表框控件的视图。单击任何列表框中的项目时，我需要在列表框中调用具有所选项目 ID 的 Web 组件。我还需要隐藏 ViewComponents，直到用户单击列表框项。每个列表框都有自己的 ViewComponent，因为视图组件中的控件对于每个列表框都是不同的。因此，我将不得不隐藏一些视图组件并只显示列表框的相关组件。我不知道如何在选择时将任何列表框中的项目 ID 传递给 Invoke 方法。

这是我的主要观点（删除了非必要代码）

<div style="height:25%; width:100%; background-color:antiquewhite;">
    <b>Sections:</b>
        @(Html.Kendo().ListBox()
                    .Name( "SectionListBox" )
                    .Selectable( ListBoxSelectable.Single )
                    .DataTextField( "Name" )
                    .DataValueField( "id" )
                    //.DataSource( ds => ds.Read( r => r.Action( "GetAllPageSectionsAsync", "Home" ) ) )
                    .Events( e => e.Change( "onSectionSelected" ) )
                    .HtmlAttributes( new { style = "width:95%;height:85%;" } )
        )
</div>
<div style="height:25%; width:100%; background-color:cornsilk;">
    <b>Fields:</b>
        @(Html.Kendo().ListBox()
                    .Name( "FieldListBox" )
                    .Selectable( ListBoxSelectable.Single )
                    .DataTextField( "Name" )
                    .DataValueField( "id" )
                    //.DataSource( ds => ds.Read( r => r.Action( "GetAllFieldsAsync", "Home" ) ) )
                    .HtmlAttributes( new { style = "width:95%;height:85%;" } )
        )
</div>
<div class="col-md-8" style="height:100%">
    <div class="col-md-12" style="height:100%;">
        <div id="AttrGridDiv" class="col-md-5" style="height:40%;">
            <label>Attributes</label>
            @await Component.InvokeAsync( "PageAttributes", new { pageId = 123 } )
        </div>
    </div>
</div>

这是我的组件视图：

@model IEnumerable<aaaaaaaa>

@(Html.Kendo().Grid<dynamic>()
.Name( "Attributes" )
.Selectable()
.Sortable()
.Scrollable()
.Events( e => e.Change( "onAttributeGridSelected" ) )
.HtmlAttributes( new { style = "width:100%;" } )
//.DataSource( ds => ds
//.Ajax()
//.Read( r => r.Action( "GetPages", "Home" ).Type( HttpVerbs.Post ) ) )
)

这是我的视图组件：

[ViewComponent(Name ="PageAttributes")]
public class PageAttibutesViewComponent : ViewComponent
{
    private IRulesEngineService reService;

    public PageAttibutesViewComponent( IRulesEngineService _reService)
    {
        reService = _reService;
    }

    public async Task<IViewComponentResult> InvokeAsync(int pageId)
    {
        var pageAttribs = await reService.GetAllPageAttributesAsync( pageId );
        return View( pageAttribs );
    }
}

我只展示了其中一个组件。我有一些类似的组件，我需要根据选择的列表框调用这些组件，这些组件将呈现不同的控件。

所以，我的问题是：

如何从视图中有条件地调用组件？
如何将选定的 id 从选定的列表框传递到调用方法？

Answer 1

ViewComponents 由 Razor（或支持该功能的任何替代视图引擎）处理。您尝试实现的目标发生在浏览器中，但您还需要一些 服务器端处理。

如我所见，您必须 (1) 捕获 ListBox 更改 (Javascript)，然后 (2) post 将其返回到控制器（再次是 Javscript），(3) 将处理请求，根据提交的内容更改模型 (C#)，最后 (4) return 更改模型的视图，以便视图可以弄清楚如何（什么参数值）调用 ViewComponent 有问题（C#，Razor）。您也可以决定 return 不同的观点，但这并不常见。不是那么简单，但这是网络。很久以前，在Web表单中，复选框和下拉框的属性 PostBack（或Simillar），当检查时，它基本相同。

实际上，post 返回到控制器、更改的视图模型以及最终使用更改的模型呈现的视图导致 ViewComponent 的调用发生更改。

Core 2.0 中有三种类型的 ViewComponent 调用。您可以在这里阅读它们：https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components#invoking-a-view-component.

如何将运行时参数传递给 ViewComponent Invoke 方法

How to pass runtime parameter to ViewComponent Invoke method

c#

asp.net-core

asp.net-core-viewcomponent