MVC Widget Public Properties - List

I have built a bunch of MVC widgets in my project and have a pretty good understanding of them at this point. I have to build a new widget which requires several public properties. My issues is I need these public properties to be in a list: 

 Here is my model - 

public class HomePageSliderModel

        public List<EP_SliderImageModel> EP_SliderImages get; set;  

public class EP_SliderImageModel
         
        public string EP_ImageURL get; set;
        public string EP_PresentingOrg get; set;
        public string EP_ShowTitle get; set;
        public string EP_Dates get; set;
        public string EP_Link get; set;
        public DateTime EP_StartDate get; set;
        public DateTime EP_EndDate get; set;
   

 As you can see I need a list of EP_SliderImageModels
, but I don't know how many EP_SliderImageModel lists I will need. I want to let the user create as many lists as they want. Is this possible in public properties of an MVC widget? The only way to do it now I think is to create a bunch of lists, which would be a finite amount, say six, like this in the controller: 

         public Guid EP_Image1 get; set;
        public string EP_ImageURL1 get; set;
        public string EP_PresentingOrg1 get; set;
        public string EP_ShowTitle1 get; set;
        public string EP_Dates1 get; set;
        public string EP_Link1 get; set;
        public DateTime EP_StartDate1 get; set;
        public DateTime EP_EndDate1 get; set;

        public Guid EP_Image2 get; set;
        public string EP_ImageURL2 get; set;
        public string EP_PresentingOrg2 get; set;
        public string EP_ShowTitle2 get; set;
        public string EP_Dates2 get; set;
        public string EP_Link2 get; set;
        public DateTime EP_StartDate2 get; set;
        public DateTime EP_EndDate2 get; set;

        public Guid EP_Image3 get; set;
        public string EP_ImageURL3 get; set;
        public string EP_PresentingOrg3 get; set;
        public string EP_ShowTitle3 get; set;
        public string EP_Dates3 get; set;
        public string EP_Link3 get; set;
        public DateTime EP_StartDate3 get; set;
        public DateTime EP_EndDate3 get; set;

 ...

 Then take these public properties and make them each a EP_SliderImageModel then add to List<EP_SliderImageModel> EP_SliderImages, Of course this means a finite amount of EP_SliderImageModels and a pretty ugly long MVC Widget designer. 

Please give me any insight you have on a better way to go about this. THANKS!

Hi Chip,

Thank you for the detailed explanation. At the end of the day, it is all about empowering the non-technical folks to do content changes, so I completely understand your question.

It is definitely possible, so let's see how we, the developers, can achieve that for the non-technical users.

Before going to any sort of instructions, I want to ask you why don't you create such a Dynamic Module that represents the structure you are requesting? You will have all those items managed in the backed of Sitefinity and you will achieve that requirement in no time. Please check the example on the link here.

This is really aligned with the best practices and you can configure really slick UI for the users. Is there a reason for you not to choose that approach?

Speaking on your question though, I am afraid it will take considerable time for development. You would need to create some dynamic UI in the widget designer that allows to add the items as you have requires. I am thinking of using something like the Kendo UI list example, so you can add more items to the collection (link here).

In your case, you would need to add this to the next level to reuse the Image selector and all the other fields and hence the complexity - it will need a lot of client side logic for the dynamic UI, but it is definitely possible and I have seen some developers doing something similar.

Please review the options and let me know on the direction you want to pursue here.

Regards,
Peter
Telerik

Thanks Peter! That is the direction I needed. I created a custom module with the data items. Everything is going well except for one thing. I can't seem to retrieve an image (related data item) from the custom module. Here is the code in a nutshell: 

 var heroImageCollection = dynamicModuleManager.GetDataItems(mainPageSliderType).Where(i => i.Status == ContentLifecycleStatus.Live && i.GetValue<string>("Section") == testThisString);

            foreach (var heroImage in heroImageCollection)
           
                           
                    var relatedImage = heroImage.GetRelatedItem("Image");
                    
                    slider.Add(
                            new SliderImageModel
                           
                                ImageURL = relatedImage.Url,
                                TopText = heroImage.GetValue("TopText").ToString(),
                                MainTitle = heroImage.GetValue("MainTitle").ToString(),
                                BottomText = heroImage.GetValue("BottomText").ToString(),
                                Link = heroImage.GetValue("Link").ToString()
                           
                      );
               

I have tried everything I can find to get the image url including: 

var relatedImage = heroImage.GetRelatedItem(heroImage, "Image", ContentLifecycleStatus.Live);

var relatedImage = (Telerik.Sitefinity.Libraries.Model.Image
)heroImage.GetRelatedItem(heroImage, "Image", ContentLifecycleStatus.Live);

 var relatedImage =
heroImage.GetValue<Telerik.Sitefinity.Libraries.Model.Image
>("Image");

 There is no option for GetRelatedItems, it throws an error. I have been fighting this for a while now and searching with no luck.