Either the 'ViewComponentName' or 'ViewComponentType' property must be set in order to invoke a view component.

Dung Do Tien May 18 2021 21

I have a project in Asp.Net Core 3.1 and I created an action in HomeController to return view component as below:

 public IActionResult HomeAjax(string viewComponentName)
{
    if (viewComponentName == "HomeAjax")
    {
        return PartialView(viewComponentName);
    }
    return ViewComponent(viewComponentName);
}

And I call ajax to that action to return some HTML  to append it to the home page.

 doInfiniteScroll() {
    var instance = this;
    instance.flagData = true;
    instance.urlAction = "/Home/HomeAjax";
    switch (instance.viewName) {
        case "":
            instance.viewName = "TopUsedCarList";
            break;
        case "TopUsedCarList":
            instance.viewName = "TopNewCarList";
            break;
        default:
            instance.viewName = "HomeAjax";
            break;
    }
    $.ajax({
        type: "GET",
        cache: false,
        url: instance.urlAction,
        data: { "viewComponentName": instance.viewName },
        beforeSend: function () {
        },
        success: function (html) {
            instance.containerSelector.append(html);
            instance.initHomeAjaxHtml();
            if (instance.viewName != "HomeAjax") {
                instance.flagData = false;
            }
            else {
                instance.showFooter();
            }
        },
        complete: function () {
        }
    });
};

When I call the ajax function and I got an error: Either the 'ViewComponentName' or 'ViewComponentType' property must be set in order to invoke a view component.

 System.InvalidOperationException: Either the 'ViewComponentName' or 'ViewComponentType' property must be set in order to invoke a view component.
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewComponentResultExecutor.GetViewComponentResult(IViewComponentHelper viewComponentHelper, ILogger logger, ViewComponentResult result)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewComponentResultExecutor.ExecuteAsync(ActionContext context, ViewComponentResult result)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewComponentResultExecutor.ExecuteAsync(ActionContext context, ViewComponentResult result)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|29_0[TFilter,TFilterAsync](ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext[TFilter,TFilterAsync](State& next, Scope& scope, Object& state, Boolean& isCompleted)

HomeAjax is a partial view and TopUsedCarListTopNewCarList are view components.

Thanks for any suggestions.

Have 1 answer(s) found.
  • A

    Aa May 18 2021

    I think the message error throw is very clear.  I think when viewComponentName variable  is null or empty so the method ViewComponent() will throw this exception.

    So to resolve this issue you have to check null for this variable first. You can check as below:

     public IActionResult HomeAjax(string viewComponentName)
    {
        if (string.IsNullOrEmpty(viewComponentName)) return Content("");
    
        if (viewComponentName == "HomeAjax")
        {
            return PartialView(viewComponentName);
        }
        return ViewComponent(viewComponentName);
    }

    I hope it works for you.

Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close