I have a PartialViewResult action that displays the PartialView that I call from the $ .ajax call on the page.
PartialView also has a foreach loop for elements in the VM, and inside this PartialView I have two RenderAction that display the other two Partials.
Everything works fine except for the speed at which it is displayed. When I comment on two nested RenderAction, the main partial view looks very fast. When I uncomment them, the main partial view displays from 3 to 5 seconds. Even if I delete all data from partial views and all data from actions in order to return only an empty view, it still takes 3-5 seconds.
Somehow, my application has problems rendering these two parts, even when they are empty.
My code: Main action:
public PartialViewResult MyTasks(int milestoneId, int currentPage = 1) { var mergedTasks = new List<MergedTask>(); var TrackingTeams = _TrackingTeams.GetAll().ToList(); var pagingInfo = new PagingInfo() {CurrentPage = currentPage, ItemsPerPage = 10, TotalItems = _TrackingTeams.GetAll().Count() }; mergedTasks.AddRange(from TrackingTeam in TrackingTeams let task = allTasks.Single(x=>x.TestId == (int)TrackingTeam.TrackingTask.TestId) select new MergedTask() { Summary = TrackingTeam.TrackingTask.Description, InternalId = task.Id, DevTrackingTask = TrackingTeam.TrackingTask, LastUpdate = task.DateModified }); return PartialView(new DevTrackingTaskViewModel { MergedTasks = mergedTasks, Category = _categories.GetById(categoryId), PagingInfo = pagingInfo }); }
Associated ViewModel:
public class TrackingTaskViewModel { public List<MergedTask> MergedTasks { get; set; } public int CountTasks { get; set; } public PagingInfo PagingInfo { get; set; } public Category Category { get; set; } } public class MergedTask { public int InternalId { get; set; } public string Summary { get; set; } public TrackingTask TrackingTask { get; set; } public DateTime LastUpdate { get; set; } }
My main PartialView:
@foreach (var item in Model.MergedTasks) { <script type="text/javascript"> $(document).ready(function () { $("# TrackingTask@ (item.TrackingTask.Id)").hover(function () { if ($("# snapshotFixerForTrackTask@ (item.TrackingTask.Id)").length == 1) { $("# expandTrackingTaskForTask@ (item.TrackingTask.Id)").removeClass("hide"); } else { $("# expandTrackingTaskForTask@ (item.TrackingTask.Id)").toggleClass("hide"); } }); }); </script> <div class="TrackingTaskDiv" id=" TrackingTask@ (item.TrackingTask.Id)"> <div class="TrackingContainer"> <div id=" flagsForTrackingTask@ (item.TrackingTask.Id)" class="flags"> @{Html.RenderAction("ShowFlags", "Task", new { trackingid = item.TrackingTask.Id });} </div> <div id=" TestStatusForTrackTask@ (item.TrackingTask.Id)" class="TestStatusWrapper"> @{Html.RenderAction("CheckTrackStatus", "Task", new { trackingid = item.TrackingTask.Id });} </div> </div> <div id=" expandTrackingTaskForTask@ (item.TrackingTask.Id)" class="expandTrackingTask collapsed hide"></div> </div> }
I can insert Action for "ShowFlags" and "CheckTrackStatus" if necessary. But, as I mentioned, even if I remove all the code from the action and view, the rendering still takes 3-5 seconds to display the whole view, there is no difference.
One solution that we came up with would be to completely delete the partial data, put the virtual machine of each partial inside the main virtual machine, and do the same for HTML in partial. But I like the idea of clipping certain functions in appearance.