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 { get; set; } }
ViewModel code:
public class ImageGalleryBlockViewmodel
{
public ImageGalleryBlockViewmodel(ImageGalleryBlock block)
{
}
public IEnumerable<ImageFile> Images { get; set; }
public IEnumerable<string> CategoryList { get; set; }
}
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>
}