MVC Refresh Partial View after Ajax HTTPPost

Question

I am tryng to update a partial view after an Ajax HttpPost.

This is the controller for the Partial view:

    public PartialViewResult BrtMagazzino(DataMagazzino m)
    {
        if (Session["Data"] != null)
        {
            DateToView dt = (DateToView)Session["Data"];
            ViewBag.comm = dt.commSelected.COMMITTENTE;
            ViewBag.corriere = "Bartolini";
        }
        return PartialView(m);
    }

This is the code for the view that include the partial:

<div id="view-Bartolini">
   @{
      Html.RenderAction("BartoliniMagazzino", "Partial", new { m = item });
    }
</div>

This is the code for the button:

<input class='btn btn-info btnBordero' type='button' value='Salva Borderò' data-corriere="@ViewBag.corriere" data-magazzino="@Model.NomeMagazzino" data-committente="@ViewBag.comm" />

This is the code for the click of this button:

$(function () {
    $('.btnBordero').on('click', function (event) {
        event.preventDefault();
        _self = $(this);
        var uf = new FormData();
        uf.append('corriere', _self.data('corriere'));
        uf.append('magazzino', _self.data('magazzino'));
        uf.append('committente', _self.data('committente'));
        var url = "/Partial/SaveBordero";
        $.ajax({
            type: "POST",
            url: url,
            contentType: false,
            processData: false,
            data: uf,
            error: function (ts) { alert(ts.responseText) 
            },
            success: function (result) {
                $("#view-Bartolini").html(result);
            }
        });
    });
});

The SaveBordero function have this code:

[HttpPost]
public ActionResult SaveBordero(FormCollection form)
{
   DataMagazzino dt = new DataMagazzino();
   // Do something
   return PartialView("BartoliniMagazzino", new { m = dt });
}

All works fine but when i call the return PartialView in SaveBordero function the ajax call always go in the error part. I don't know how to go in success and update the partial view

In your Ajax call remove dataType: 'json',. This represents what you get from server and it's not json but html. — derloopkat
have you set a breakpoint in your server side code? seems like an error is being thrown on the backend — GregH
Remove the datatype property as @derloopkat suggested. the jquery will guess the dataType using the response headers and take care of it. — Shyju
I have try to put dataType:'html' or delete dataType but it doesn't change the result — roberto
That means you have some other issue which is causing the code to be thrown to error. What response you are getting from the network call ? Is it 200 OK ? — Shyju

roberto roberto · Accepted Answer · 2017-11-13T17:03:04

The problem is in this row: return PartialView("BartoliniMagazzino", new { m = dt });

If i call a new m Model this is an anonymus type and the system doesn't reconize it.

I have solved it just writing: return PartialView("BartoliniMagazzino", dt);

Thanks to all

MVC Refresh Partial View after Ajax HTTPPost

1 Answers