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

Question

我正在尝试.net Core ViewComponents而不是局部视图。 这是我的情况。 我有一个包含几个剑道列表框控件的视图。 单击任何列表框中的项目时，我需要在列表框中调用具有选定项目ID的Web组件。 我还需要保持ViewComponents处于隐藏状态，直到用户单击列表框项目为止。 每个列表框都有其自己的ViewComponent，因为每个列表框的viewComponent中的控件都不同。 因此，我将不得不隐藏一些viewcomponents并仅显示列表框的相关组件。 我不知道如何在选定时将任何列表框中的项目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 );
    }
}

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

因此，我的问题再次是：

1. 如何有条件地从视图中调用组件？
2. 如何将选定的ID从选定的列表框中传递给invoke方法？

Answer 1

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

正如我所看到的，您必须（1）捕获ListBox更改（Javascript），然后（2）将其发回到控制器（再次是Javscript），该控制器（3）将处理请求，根据提交的内容更改模型（ C＃），最后（4）返回具有更改模型的视图，这样您就可以弄清楚该视图如何调用相关的ViewComponent （C＃，Razor）（参数值）。 您可能还决定返回其他视图，但这并不常见。 并不是很简单，但这是网络。 很久以前，在Web表单中，复选框和下拉菜单都具有属性PostBack （或simillar），该属性在选中时基本上相同。

实际上，将更改后的视图模型以及更改后的视图模型发回到控制器后，将导致ViewComponent的调用发生更改。

在Core 2.0中，共有三种ViewComponent调用。 您可以在这里阅读有关它们的信息： https : //docs.microsoft.com/zh-cn/aspnet/core/mvc/views/view-components#invoking-a-view-component 。