Question

我正在尝试使用.net Core ViewComponents而不是部分视图。这是我的情景。我有一个包含一些kendo列表框控件的视图。当单击任何列表框中的项目时，我需要在列表框中调用具有所选项目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 );
    }
}

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

所以，我的问题是：

如何从视图中调用组件？
如何将所选列表框中的选定ID传递给调用方法

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/en-us/aspnet/core/mvc/views/view-components#invoking-a-view-component。

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

1 个答案: