How to bind ViewComponent inside the bootstrap modal

Question

ViewComponent inside Bootstrap Modal popup

I am trying to render a ViewComponent as modal data of a bootstrap Modal. My ViewComponent consists a Telerik Kendo UI Grid, as the grid is being used in many places I made it as Viewcomponent but unable to render it as modal content.

ViewComponent class file:

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

ViewComponent View file (path: 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)
            ))

I am able to render ViewComponent from any view as following

@await Component.InvokeAsync("PriorityList")

when using the above line inside the bootstrap modal content, it's loading the grid during page load itself but not when I manually click on button to trigger the bootstrap modal.

Answer 1

Finally, got it worked. I created a method in my Home controller which will invoke the viewcomponent. Created a bootstrap modal with a div inside the modal body. Upon loading the modal, using jquery "load" method to call the controller method and loading the result inside the div defined in modal's body.

Note: If viewcomponent is used multiple times in a same view then the grid may not be visible but if we inspect we can see it, to avoid that we always make sure each time a new id for grid is generated.

[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>

Final Result:

Still not sure, Why my earlier approach of invoking ViewComponent in view using @await Component.InvokeAsync("PriorityList") is loading it in page load itself though I keep it in click event of the button, may be it's because Asynchronous ???