C# 如何在引导模式内绑定ViewComponent

ViewComponent内部引导模式弹出窗口

我试图将ViewComponent呈现为引导模式的模式数据。 我的ViewComponent由Telerik Kendo UI网格组成，因为网格在许多地方都被使用，我将其作为ViewComponent制作，但无法将其作为模式内容呈现

ViewComponent类文件：

ViewComponent视图文件路径：Views/Home/Components/PriorityList/Default.cshtml

在引导模式内容中使用上述行时，它是在页面加载过程中加载网格的，但不是在我手动单击按钮触发引导模式时加载网格的。

最后，它成功了。 我在我的主控制器中创建了一个方法，该方法将调用viewcomponent。创建了一个引导模式，模式主体中有一个div。加载模态后，使用jquery load方法调用controller方法，并将结果加载到modal主体中定义的div中

注意：如果在同一个视图中多次使用viewcomponent，则网格可能不可见，但如果我们进行检查，则可以看到它，以避免每次生成网格的新id时总是确保它

[HttpGet]
public IActionResult IndexVC()
{
    //invokes the InvokeAsync method of PriorityListViewComponent
    return ViewComponent("PriorityList");
}

<button id="fireme" type="button" class="btn btn-primary">Fire me up!</button>

<div class="modal fade" id="EnSureModal" role="dialog">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times; 
                </button>                 
            </div>
            <div class="modal-body">
                <div id="modelContent">

                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#fireme").click(function () {
            $("#modelContent").load("/Home/IndexVC");
         });
    });
 </script>

最终结果：

仍然不确定，为什么我以前使用@await Component.InvokeAsyncPriorityList在视图中调用ViewComponent的方法 虽然我将其保存在按钮的点击事件中，但是否将其加载到页面加载本身，可能是因为异步

@model IEnumerable<GettingStartedWithTelerik.Models.Customer>


@(Html.Kendo().Grid(Model)
            .Name("grid1234")
            .Columns(columns =>
            {
                columns.Bound(c => c.ContactName).Width(140);
                columns.Bound(c => c.ContactTitle).Width(190);
                columns.Bound(c => c.CompanyName);
                columns.Bound(c => c.Country).Width(110);
            })
            .HtmlAttributes(new { style = "height: 380px;" })
            .Scrollable()
            .Sortable()
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
            .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            ))

@await Component.InvokeAsync("PriorityList")

[HttpGet]
public IActionResult IndexVC()
{
    //invokes the InvokeAsync method of PriorityListViewComponent
    return ViewComponent("PriorityList");
}

<button id="fireme" type="button" class="btn btn-primary">Fire me up!</button>

<div class="modal fade" id="EnSureModal" role="dialog">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times; 
                </button>                 
            </div>
            <div class="modal-body">
                <div id="modelContent">

                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#fireme").click(function () {
            $("#modelContent").load("/Home/IndexVC");
         });
    });
 </script>