ASP.NET Core - Help with ViewComponents RSS

• • Reply
  nvielbig

  Member

  135 Points

  401 Posts

  ASP.NET Core - Help with ViewComponents

  Sep 27, 2019 06:32 PM|nvielbig|LINK

  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

• • Reply
  Sherry Chen

  Contributor

  2070 Points

  606 Posts

  Re: ASP.NET Core - Help with ViewComponents

  Oct 01, 2019 07:25 AM|Sherry Chen|LINK

  Hi nvielbig ,

  nvielbig

  I'm having issues knowing if I'm using ViewComponents in the right way here.

  For using ViewComponent , you could refer to the official documentation : https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components?view=aspnetcore-3.0

  It inconvenient to test the code due to Telerik Kendo is charged. 

  Best Regards ,

  Sherry

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.