Quantcast
Channel: Using Optimizely Platforms
Viewing all articles
Browse latest Browse all 8020

Create block/s to display list of images based on some category

$
0
0

Hi,

I am new to Episerver and have created a block which can display list of images of a folder. Now I want to categorize and then display images according to their respective categories. I have displayed categories in the form of dropdown and on dropdown change I am making a call to controller method in which I'm passing viewmodel instead of current block but unable to hit that method even by using Html.beginform. If possible please help .

Here is my code

Controller Code:

public override ActionResult Index(ImageGalleryBlock currentBlock)
{           var categoryList = new List<string>();           var distinctCategories = new List<string>();           var contentRepository = ServiceLocator.Current.GetInstance<IContentRepository>();           var galleryImages = contentRepository.GetChildren<ImageFile>(currentBlock.Folder);           foreach (var item in galleryImages)           {               if (item.CategoryName != null)               {                   categoryList.Add(item.CategoryName);               }                          }           if (categoryList.Count > 0)           {               distinctCategories = categoryList.Distinct().ToList();           }                    var model = new ImageGalleryBlockViewmodel(currentBlock)               {                   CategoryList = distinctCategories,                   Images = galleryImages               };                                return PartialView("~/Views/ImageGalleryBlock/ImageGalleryBlock.cshtml", model);       }
[HttpPost]       public ActionResult GetImagesByCategory(ImageGalleryBlockViewmodel model)        {
.....
return PartialView("~/Views/ImageGalleryBlock/ImageGalleryBlock.cshtml", model);
}
Model Code:

[ContentType(DisplayName = "ImageGalleryBlock", GUID = "74c05989-af27-4dfa-95ed-8f6b2bec9994", Description = "")]   public class ImageGalleryBlock : SiteBlockData   {       [UIHint(UIHint.MediaFolder)]       [Display(Name = "Folder", GroupName = SystemTabNames.Content, Order = 1)]       public virtual ContentReference Folder { getset; }         }
ViewModel code:

public class ImageGalleryBlockViewmodel 
 {    
   public ImageGalleryBlockViewmodel(ImageGalleryBlock block)  
     {                 
}       
public IEnumerable<ImageFile> Images { getset; }              
public IEnumerable<string> CategoryList { getset; }    
}
View:

@model EpiserverProject.Models.ViewModels.ImageGalleryBlockViewmodel    @using (Html.BeginForm("GetImagesByCategory""ImageGalleryBlock"new { language = ContentLanguage.PreferredCulture.Name },FormMethod.Post))    {        <div> <div>                @Html.DropDownListFor(m => m.CategoryList, new SelectList(Model.CategoryList), "--Select--"new { id = "CategoryID", onchange = "$(this.form.submit());" })             div>             <div class="row"> @foreach (var images in Model.Images)                 {                    <div class="col-md-3">                        @{var t1 = images.Name;                           var t2 = images.Language; var url = UrlResolver.Current.GetUrl(images.ContentLink);                            <img src="@Url.ContentUrl(url)" onclick="openModal(); currentSlide(@i)" class="hover-shadow img-responsive">                            <h3><a href="@url" download="@t1">@t1</a>h3>
 <h3>@t2</h3> i++;                        }div> }  <div>
</div>
}



         

Viewing all articles
Browse latest Browse all 8020

Latest Images

Trending Articles



Latest Images