如何在引导模态中绑定ViewComponent

Question

Bootstrap Modal弹出窗口中的ViewComponent

我正在尝试将ViewComponent渲染为引导模态的模态数据。 我的ViewComponent包含一个Telerik Kendo UI网格，因为在许多地方都使用了该网格，所以我将其作为Viewcomponent，但无法将其呈现为模态内容。

ViewComponent类文件：

public class PriorityListViewComponent: ViewComponent
    {
        public IViewComponentResult InvokeAsync()
        {
           var items = GetToDoItems();
           return View("Default", items);
        }
    }

ViewComponent查看文件（路径：Views / Home / Components / PriorityList / Default.cshtml）

@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)
            ))

我可以从任何视图渲染ViewComponent，如下所示

@await Component.InvokeAsync("PriorityList")

当在引导程序模式内容中使用上述行时，它是在页面加载本身期间加载网格，但是当我手动单击按钮以触发引导程序模式时却没有。

Answer 1

终于，成功了。 我在Home控制器中创建了一个方法，该方法将调用viewcomponent。 用模态主体内的div创建了一个引导模态。 加载模态后，使用jquery的“ load”方法调用控制器方法，并将结果加载到模态主体中定义的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.InvokeAsync("PriorityList")在视图中调用ViewComponent的方法是在页面加载本身中加载它，尽管我将其保留在按钮的click事件中，可能是因为异步???