Partial view won't update after ajax.beginform

Question

I'm fairly new to mvc3, so bear with me please.

This is the scenario: I have, inside my view, a small menu, and another partial view, which shows products whose names match the input from the user.

@model List<BlokCWebwinkelGroep3.Models.Product>

In the mini menu I have a slider (with 2 slider handles) and a button 'search' (both are in a ajax.beginform). when I click on the search button the 2 values of the slider get sent as parameters to a HttpPost actionmethod "search" (these values are in the hidden input field, which is updated by some javascript when someone slides the slider), which returns a partialview(_myPartial, model). (the model is a list).

Ajax.BeginForm

    @using (Ajax.BeginForm("Search",
                    new AjaxOptions
                    {
                        UpdateTargetId = "table-container",
                        InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace,
                        HttpMethod = "POST"
                    }))
{   
    <input type="hidden" name = "hidden" id="hidden_amount" />
    <div id="slider-range">
    </div>
    <br />
    <button type="submit" value="Search">
        Search</button>
}

Action Method

    [HttpPost]
    public PartialViewResult Search(string hidden)
    {
        List<Product> Model = null;
        string[] values = hidden.Split(' ');
        int[] convertedString = Array.ConvertAll<string, int>(values, int.Parse);
        string name = (string)TempData["searched"];
        try
        {
            Model = ResultDBController.GetAdvancedSearched(name, convertedString[0], convertedString[1]);
        }
        catch (Exception e)
        {
            ViewBag.Foutmelding = "Er is iets foutgegaan: " + e;
        }
        return PartialView("_Product", Model);
    }

The UpdateTargetId is the div "table-container"

    @*Calls the _Product partial view*@
<div class="table-container">@Html.Partial("_Product", Model)</div>

Then it runs through the partial view, however it does not show up on the screen..

Partial view

    <table class="productlist">
@foreach (BlokCWebwinkelGroep3.Models.Product product in Model)
{ 
    <tr class="product" onclick="location.href = '@(Url.Action("ProductPage", "Product", new {ProductID = @product.ProductID}))'">

        <td>
            <img src = '@product.ImageURL' alt = '@product.Name' />
        </td>
        <td>
            @product.Name
        </td>
        <td>
            €@product.Price
        </td>
    </tr>
}

Say I search "er", that will display 3 products on screen. 2 are < 75 euro the other one is 183 euro. If I set the slider to 75 - 300, I can debug and see that everything is alright. The partialview which gets returned in the actionmethod contains only the product which is 183 euro, then it loops through the partial view once, however the partial view does not update to that version, it stays on the same version with the 3 products.

What am I doing wrong here?

P.S. I use the following scripts in my header

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script type="text/css" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Answer 1

MSDN documentation states that UpdateTargetId updates a DOM Id, not a class as you are doing. Change your class to an ID and it should work as expected.

<div id="table-container"