MVC PartialView is not refreshing data

Question

I have an index page:

@model AlfoncinaMVC.Models.VentaIndexViewModel

@{
    ViewBag.Title = "Ventas";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script>
    var d = 1;
    setInterval(function () {
        d++;
        $('#testLabe').text(d);
        $.ajax("Ventas");
    }, 1000 * 1 * 1);
</script>

<div id="ventasTable">
    @{ Html.RenderPartial("_VentasTable"); }
    @*@Html.Partial("_VentasTable")*@
</div>

<label id="testLabe"></label>

With a partial view (_VentasTable):

@model AlfoncinaMVC.Models.VentaIndexViewModel

<table>
    <thead>

    </thead>
    <tbody>
        @foreach (var item in @Model.Ventas)
        {
            <tr>
                <td>
                    @item.nombreArticulo
                </td>
            </tr>
        }
    </tbody>
</table>

With this controller:

public ActionResult Ventas()
        {
            var db = new AlfonsinaEntities();
            var ventas = db.Set<Venta>();

            var vm = new VentaIndexViewModel
            {
                Ventas = ventas.Select(x => new VentaViewModel
                {
                    nombreArticulo = x.NombreArticulo
                }).ToList()
            };

            if (Request.IsAjaxRequest())
            {
                return PartialView("_VentasTable", vm);
            }
            return View("Ventas", vm);
        }

And i can NOT get the data to refresh in the partial view (_VentasTable) after the Html.RenderPartial it's being called, (NOT also with HTML.Partial, please note that is commented in my code.) After putting a breakpoint on my partial view i see that the data is CHANGED from the DB query, but this data is not being replaced in the partial view. Any help please?

what is `$.ajax("Ventas");` supposed to achieve? Read http://api.jquery.com/jquery.ajax/ — Igor, Mar 20 '15 at 01:59
To provide a little more context to @Igor's comment, you can't just provide the name of your `ActionResult` to jquery's ajax call. It won't work that way. — ethorn10, Mar 20 '15 at 02:02
@Igor Im sorry, what you mean? I do not see any issue with my call, it is reaching the controller. — user1287678, Mar 20 '15 at 02:03
You need to read the link @Igor gave you. You need to add the returned data to the DOM in the `success` callback. And what is the point of `1000 * 1 * 1` (which is always `1000`)? — , Mar 20 '15 at 02:07

Igor · Accepted Answer · 2015-03-20T03:33:07.117

8

As @StephenMuecke said - "You need to add the returned data to the DOM":

$.ajax({
  type: "GET",
  url: '@Url.Action("Ventas", "ControllerName")',
  async: true,
  cache: false,
  dataType: "html",
  success: function (data, textStatus, jqXHR) {
    $("#ventasTable").html(data);
  },
  error: function (jqXHR, textStatus, errorThrown) {
    alert(textStatus + " - " + errorThrown);
  }
});

edited Mar 20 '15 at 03:33

answered Mar 20 '15 at 02:45

Igor

15,833
1
27
32

Suggest you use `url: '@Url.Action("Ventas", "ControllerName")',` to ensure the url will be correct. – Mar 20 '15 at 03:30
Might also be worth mentioning that the script should be at the bottom of the page or wrapped in `document.ready()` – Mar 20 '15 at 03:42

MVC PartialView is not refreshing data

1 Answers1