Ajax.ActionLink duplicating and inserting the entire view into a <div> inside that view

StackOverflow https://stackoverflow.com/questions/15766309

  •  31-03-2022
  •  | 
  •  

Question

I am new to MVC and working on an e-commerce application for my aunt's business. I have a Product List page with a partial view to display a menu to search by category. It all worked just fine with Html.ActionLink helpers, but when I switched to AJAX, it updates the products but inserts the entire List view into the div that I want updated(header and everything included). I'm assuming it has something to do with the UpdateTargetId I defined, or perhaps the layout(I'm no css whiz). So here goes:

ProductController:

public ViewResult List(string category, int page = 1)
    {
        JProductListViewModel model = new JProductListViewModel
        {
            JProducts = repository.JProducts
                .Where(p => category == null || p.Category == category)
                .OrderBy(p => p.ProductID).Skip((page - 1) * PageSize).Take(PageSize),
            PagingInfo = new PagingInfo
            {
                CurrentPage = page,
                ItemsPerPage = PageSize,
                TotalItems = category == null ?
                    repository.JProducts.Count() :
                    repository.JProducts.Where(x => x.Category == category).Count()
            },
            CurrentCategory = category
        };
        return View(model);
    }

Menu Partial:

@foreach (var link in Model)
{
    <div class="catmenuitem">
    @if (link != null)
    {
        @Ajax.RouteLink(link, "", new { controller = "Product", action = "List", category = link, page = 1 }, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, 
    UpdateTargetId = "List", LoadingElementId = "loading", LoadingElementDuration = 1000 },
    new { @class = link == ViewBag.SelectedCategory ? "selected" : null })
    }
    </div>
}

List View:

<div id="List">
    @foreach (var p in Model.JProducts)
    {
            Html.RenderPartial("ProductSummary", p);
    }
</div>

The result I am getting is the entire List.cshtml view being duplicated and inserted into the "List" div. I have a feeling it will be some sort of silly mistake, but I can't seem to find it.

Thanks, Kwinsor5

Was it helpful?

Solution

You must create a new partial view for your List view, name it _List. Then change your List view to include _List partial view and change your List controller to return _List partial view in case of AJAX request.

List partial view _List:

<div id="List">
@foreach (var p in Model.JProducts)
{
        Html.RenderPartial("ProductSummary", p);
}
</div>

List View:

<div></div>
@Html.Partial("_List", Model)
<div></div>

Change in List Controller:

        if (Request.IsAjaxRequest())
        {
            return PartialView("_List", model);
        }

Now you can have different elements in List view and its parial view

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top