ASP.NET Core - Help with ViewComponents RRS feed

  • Question

  • User1864322503 posted

    Hi Everyone,

    I need to implement a popup on my website for users to make a selection from a dropdown list, that selection will be stored in a Session variable. If any page loads and this session variable is not set, then it'll force them to make a selection again. I am not an MVC expert, and was hoping for some advice with where I'm at so far. I am using Telerik Kendo controls for the popup. The popup HTML is inside of a ViewComponent, and the ViewComponent is being Invoked on the _Layout.cshtml view. I am brand new to ViewComponents.

    In my _Layout.cshtml:


    @await Component.InvokeAsync("CompanySelector")



        public class CompanySelectorViewComponent : ViewComponent
            private readonly ModelContext _context;
            public CompanySelectorViewComponent(ModelContext context)
                _context = context;
            public IViewComponentResult Invoke()
                var companyData = _context.UnvCompanyConfigurator.OrderBy(c => c.CompanyName).ToList();
                CompanySelectorModel model = new CompanySelectorModel
                    Companies = companyData,
                    CompanySelectList = companyData.Select(b => new SelectListItem { Text = b.CompanyName, Value = b.Id.ToString() }).ToList(),
                    IsCompanySelectionNeeded = HttpContext.Session?.GetInt32(Constants.SESSIONKEY_COMPANYID) == null
                return View(model);

    CompanySelectorModel (ViewModel for the ViewComponent)

        public class CompanySelectorModel
            public bool IsCompanySelectionNeeded { get; set; }
            public List<UnvCompanyConfigurator> Companies = new List<UnvCompanyConfigurator>();
            public List<SelectListItem> CompanySelectList = new List<SelectListItem>(); 

    Default.cshtml for the ViewComponent: (Note that the entire Popup Dialog is only rendered if Model.IsCompanySelectionNeeded is true)

    @model RTC.UCube.Web.ViewComponents.CompanySelectorModel
    @if (Model.IsCompanySelectionNeeded)
        <div id="SelectCompanyDialog">
                .Title("Company Selection")
                .Content("<p>Please select a company from the list below</p>" + Html.Kendo().DropDownList()
                            .OptionLabel("Select Company...")
                .Actions(actions => { actions.Add().Text("Save").Primary(true); })
                .Events(ev => ev.Close("setCurrentCompanyFromDialog"))

    Screenshot of the popup (link):

    I'm having issues knowing if I'm using ViewComponents in the right way here. Also, I need to enable users to MODIFY their selected company. So I was hoping that I'd just show the ViewComponent again if they were to click on a "Edit Company" link, but I think that showing a ViewComponent based on a user button click is not a correct way of doing this. All in all I'm just sort of confused on how to implement this in a good way and would appreciate any advice.

    Also, I know I haven't given much detail, so please ask away if I can clarify anything.


    Friday, September 27, 2019 6:32 PM

All replies