locked
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")

    ...

    CompanySelectorViewComponent:

        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">
            @(Html.Kendo().Dialog()
                .Name("SelectCompanyDialog")
                .Title("Company Selection")
                .MinWidth(400)
                .Content("<p>Please select a company from the list below</p>" + Html.Kendo().DropDownList()
                            .Name("CompanyOptions")
                            .DataTextField("Text")
                            .DataValueField("Value")
                            .OptionLabel("Select Company...")
                            .Filter(FilterType.Contains)
                            .BindTo(Model.CompanySelectList)
                            .ToHtmlString()
                           )
                .Modal(true)
                .Closable(false)
                .Actions(actions => { actions.Add().Text("Save").Primary(true); })
                .Events(ev => ev.Close("setCurrentCompanyFromDialog"))
            )
        </div>
    }

    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.

    Thanks

    Friday, September 27, 2019 6:32 PM

All replies