如何在引導模態中綁定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事件中，可能是因為異步???