ASP.NET Core : view component with 2 invokes

Question

I have many view components and used in a Page Maker software. But now I need make a dynamic setting page for each view component.

Something like this:

@Component.InvokeAsync("Image");
@Component.InvokeSettingPage("Image");

or any idea to make something like this.

Thanks in advance.

Answer 1

The parameters will be passed to the InvokeAsync method. The PriorityList view component developed in the article is invoked from the Views/ToDo/Index.cshtml view file. In the following, the InvokeAsync method is called with two parameters

namespace ViewComponentSample.ViewComponents
{
    public class PriorityListViewComponent : ViewComponent
    {
        private readonly ToDoContext db;

        public PriorityListViewComponent(ToDoContext context)
        {
            db = context;
        }

        public async Task<IViewComponentResult> InvokeAsync(
        int maxPriority, bool isDone)
        {
            var items = await GetItemsAsync(maxPriority, isDone);
            return View(items);
        }
        private Task<List<TodoItem>> GetItemsAsync(int maxPriority, bool isDone)
        {
            return db.ToDo.Where(x => x.IsDone == isDone &&
                                 x.Priority <= maxPriority).ToListAsync();
        }
    }
}

@await Component.InvokeAsync("PriorityList", new { maxPriority = 4, isDone = true })

Here is a sample code to render the component dynamically.You Can Pass Paramters whit Json in ViewComponent Like this

 @foreach(var component in Model.SelectedComponent)
    {
        <div class="component">
            @await Component.InvokeAsync(component.Name, component.OptionalJsonString)
        </div>
    }