如何在引导模式中绑定 ViewComponent答案

【问题标题】：How to bind ViewComponent inside the bootstrap modal如何在引导模式中绑定 ViewComponent
【发布时间】：2019-12-13 05:55:09
【问题描述】：

Bootstrap Modal 弹出窗口中的 ViewComponent

我正在尝试将 ViewComponent 呈现为引导模式的模式数据。我的 ViewComponent 由 Telerik Kendo UI Grid 组成，因为该网格在许多地方都被使用，我将其作为 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")

在引导模式内容中使用上述行时，它会在页面加载本身期间加载网格，但在我手动单击按钮触发引导模式时不会加载。

【问题讨论】：

标签： c# asp.net-core kendo-grid bootstrap-modal asp.net-core-viewcomponent

【解决方案1】：

终于成功了。我在 Home 控制器中创建了一个方法，该方法将调用视图组件。在模态体内创建了一个带有 div 的引导模态。加载模态时，使用 jquery "load" 方法调用控制器方法并将结果加载到模态体中定义的 div 中。

注意：如果在同一个视图中多次使用视图组件，则网格可能不可见，但如果我们检查我们可以看到它，以避免我们总是确保每次都有新的 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 的方法正在将它加载到页面加载本身中，尽管我将它保留在按钮的单击事件中，可能是因为异步？？？

【讨论】：