Ajax ActionLink not working
I am developing a MVC widget. My widget will show all categories and then on the selected category get 3 latest news.
This is my Controller
public class CustomNewsController : Controller
public ActionResult Index()
var vm = new CustomNewsCategoryViewModel Categories = new Dictionary<Guid, string>() ;
var taxonomyManager = TaxonomyManager.GetManager();
var category =
taxonomyManager.GetTaxonomies<HierarchicalTaxonomy>().SingleOrDefault(x => x.Name == "Categories");
if (category != null)
var categories = category.Taxa.Select(x => new
x.Id,
x.Title
).ToList();
foreach (var cat in categories)
vm.Categories.Add(cat.Id, cat.Title);
vm.InitialNews = categories.Any() ? GetNews(categories.First().Id) : new CustomNewsNewsContentViewModel() NewsContent = new List<string>();
return View(vm);
public ActionResult GetNewsFor(Guid categoryId)
return PartialView("NewsContent", GetNews(categoryId));
private CustomNewsNewsContentViewModel GetNews(Guid categoryId)
var vm = new CustomNewsNewsContentViewModel() NewsContent = new List<string>() ;
var taxonomyManager = TaxonomyManager.GetManager();
var taxon =
taxonomyManager.GetTaxa<HierarchicalTaxon>().SingleOrDefault(x => x.Id == categoryId);
if(taxon == null)
return vm;
var taxonId = taxon.Id;
var newsManager = NewsManager.GetManager();
var newsContent =
newsManager.GetNewsItems()
.Where(
x =>
x.Status == ContentLifecycleStatus.Live &&
x.GetValue<TrackedList<Guid>>("Category").Contains(taxonId))
.OrderByDescending(x => x.LastModified)
.Take(3);
foreach (var newsItem in newsContent)
vm.NewsContent.Add(newsItem.Content);
return vm;
and here is my Index view
@model SitefinityWebApp.Mvc.Models.ViewModel.CustomNewsCategoryViewModel
<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<div id="customNewsContainer" style="width: 100%; overflow: hidden">
<div id="customNewsCategories" style="float: left; padding-bottom: 1000px; margin-bottom: -1000px; padding-right: 20px;">
<ul>
@foreach (var item in Model.Categories)
<li>@Ajax.ActionLink(item.Value, "GetNewsFor", new categoryId = item.Key , new AjaxOptions UpdateTargetId = "customNewsContent" )
</li>
</ul>
</div>
<div id="customNewsContent" style="overflow: hidden; padding-bottom: 1000px; margin-bottom: -1000px; vertical-align: top;">
@ Html.RenderPartial("NewsContent", Model.InitialNews);
</div>
</div>
and my partial view
@model SitefinityWebApp.Mvc.Models.ViewModel.CustomNewsNewsContentViewModel
<ul>
@foreach (var item in Model.NewsContent)
<li>@item</li>
</ul>
When the page loads everything works. I the left column (div customNewsCategories) I get all the categories and in the right column top 3 news from that category are being displayed.
However, when i click on the category, in the right column (div customNewsContent, where the partial view should be displayed) the entire page is displayed... :S
Can anyone tell me what am I doing wrong?
Any help?
Hi,
I think that your code is fine. It seems that the links generated for an ajax action are something like this is sitefinity
<a href="/sf_codebase/fsdfs/GetNews/cat 2/" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'GET', updateTargetId: 'categoryNews' );">View news</a>
and they must be something like this
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#categoryNews" href="/Home/GetNews?name=cat%202">View news</a>
This is not working so it is a bug. I've logged a bug in our system and you can see it's progress right here:
http://www.telerik.com/support/pits.aspx#/public/sitefinity/15068
Regards,