Nested partialview not refreshing

Question

I have this partial view that looks as follows :

@model  ComPost.Core.CommandsAndQueries.Contract.DataContract.FinalizeScreenDTO

<div  class="row">
  <p>
    <table id="ProductTable">
      <tr><td>Wijzig Product</td><td><input type="checkbox" id="OverrideCheckox" /></td></tr>
      <tr><td>Product</td><td>@Html.DropDownListFor(m => m.DepositProductId , new SelectList(Model.DepositProducts, "DepositProductId", "DepositProductName"),new{id="DepositProductSelect", disabled="disabled", style = "width: 500px;", onchange="CallChangefunc();"})</td></tr>
      <tr><td>Reden wijziging</td><td><textarea disabled ="disabled" id="OverrideReason" class="CommentText" cols="150" rows="5">@Model.OverrideReason</textarea></td></tr>
    </table>
  </p>

@{
    Html.RenderAction("DepositProductOrder", "Deposit", new { depositid = @Model.DepositId, depositproductid = @Model.DepositProductId });
}

  <p>
     <input type="submit" id="FinalizeButton" class="btn btn-default" Visible="false" data-url="@Url.Action("FinalizeDeposit", "Deposit")" data-overview="@Url.Action("Index", "Deposit")" value="Finalize" />
  </p>
</div>

Within this partialview I have another partialview which should be rendered by this line :

@{
    Html.RenderAction("DepositProductOrder", "Deposit", new { depositid = @Model.DepositId, depositproductid = @Model.DepositProductId });
}

The nested partialview contains a table to display some information. When I select a new value in the DropDownList, I go to my controller and do my action. This works fine. The result is then passed to my nested partialview.

But the result doesn't get refreshed. My screen still displays the information that was fetched when I first come to the page.

The CallChangefunc looks like this

function CallChangefunc()
{
    //TODO : call the post for a Finalize.
    var el = document.getElementById('DepositProductSelect');
    var url = "/Deposit/DepositProductOrder";
    var depositProductId = el.options[el.selectedIndex].value;
    var depositId = $("#MainTabs").data("depositid");

    $.ajax({
        url: url,
        type: 'POST',
        data: {
            depositId: depositId,
            depositProductId: depositProductId,
        },
        dataType: 'html',
        success: function (result) { },
        error: function (x, t, e) { }
    });
}

This is the code for the DepositProductOrder-action on my controller:

public PartialViewResult DepositProductOrder(int depositid, int depositproductid)
{
    DepositProductOrderDTO depositProductOrderDTO = this.QueriesServiceAgent.Call(s => s.GetDepositProductOrder(depositid, depositproductid));

    return PartialView(depositProductOrderDTO);
}

What am I missing?

Answer 1

The problem is you don't do anything after the ajax call is done successfully. Try to add a div that wraps the partial view as below

<div id="divDepositProductOrder">
@{
    Html.RenderAction("DepositProductOrder", "Deposit", new { depositid = @Model.DepositId, depositproductid = @Model.DepositProductId });
}
</div>

then update the content of divDepositProductOrder with the html returned by the ajax call

success: function (result) { 
    $('#divDepositProductOrder').html(result);
},