嵌套的局部视图没有刷新

时间:2014-09-25 05:53:22

标签: jquery ajax asp.net-mvc partial-views renderaction

我有这个局部视图,如下所示:

@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>

在这个局部视图中,我有另一个部分视图,应该由这一行呈现:

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

嵌套的partialview包含一个显示某些信息的表。 当我在DropDownList中选择一个新值时,我会转到我的控制器并执行操作。 这很好用。 然后将结果传递给我的嵌套部分视图。

但结果并没有得到更新。我的屏幕仍然显示我第一次来到页面时获取的信息。

CallChangefunc看起来像这样

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) { }
    });
}

这是我控制器上DepositProductOrder-action的代码:

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

    return PartialView(depositProductOrderDTO);
}

我错过了什么?

1 个答案:

答案 0 :(得分:1)

问题是你在成功完成ajax调用后没有做任何事情。尝试添加一个包含局部视图的div,如下所示

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

然后使用ajax调用返回的html更新divDepositProductOrder的内容

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