MVC Partial View Not Refreshing when using JSON data

Question

I have a dropdown that I'm using to refresh a div with checkboxes.

I am trying to figure out why my view is not refreshing if I pass in data in JSON format. If I pass in just a regular string, the view refreshes. If I pass in JSON data, the view does not refresh.

If I step through the code in the Partial view, I can see the correct number of records are being passed in, however the view doesn't get refreshed with the correct number of checkboxes.

I tried to add some cache directives, it didn't work.

This doesn't work:

$(function () {
    $('#ddlMoveToListNames').change(function () {
        var item = $(this).val();
        var selectedListID = $('#ddlListNames').val();

        var checkValues = $('input[name=c]:checked').map(function () {
            return $(this).val();
        }).toArray();

        $.ajax({
            url: '@Url.Action("Test1", "WordList")',
            type: 'POST',
            cache: false,
            data: JSON.stringify({ words: checkValues, moveToListID: item, selectedListID: selectedListID }),
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (result) {
            }
        })
        .done(function (partialViewResult) {
            $("#divCheckBoxes").replaceWith(partialViewResult);
        });
    });
});

This works:

$(function () {
    $('#ddlMoveToListNames').change(function () {
        var item = $(this).val();
        var selectedListID = $('#ddlListNames').val();

        var checkValues = $('input[name=c]:checked').map(function () {
            return $(this).val();
        }).toArray();

        $.ajax({
            url: '@Url.Action("Test1", "WordList")',
            type: 'POST',
            cache: false,
            data: { selectedListID: item },
            success: function (result) {
            }
        })
        .done(function (partialViewResult) {
            $("#divCheckBoxes").replaceWith(partialViewResult);
        });
    });
});

Partial View:

@model  WLWeb.Models.MyModel

<div id="divCheckBoxes">
    @foreach (var item in Model.vwWordList)
    {
        @Html.Raw("<label><input type='checkbox' value='" + @Html.DisplayFor(modelItem => item.Word) + "' name='c'> " + @Html.DisplayFor(modelItem => item.Word) + "</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
    }
</div>

Controller:

[AcceptVerbs(HttpVerbs.Post)]
[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public PartialViewResult Test1(MyModel vm, string[] words, string moveToListID, string selectedListID)
{
    int listNameID = Convert.ToInt32(moveToListID);
    List<vwWordList> lst = db.vwWordLists.Where(s => s.Word.StartsWith("wa") && s.ListID == listNameID).ToList();
    vm.vwWordList = lst;
    return PartialView("Partial1", vm);
}

View:

@Html.DropDownListFor(x => Model.FilterViewModel.MoveToListNameID, Model.FilterViewModel.MoveToListNameList,
            new { @id = "ddlMoveToListNames", style = "width:100px;" })

Ignacio Laborde · Accepted Answer · 2014-06-04 21:22:52Z

1

From jquery page

dataType (default: Intelligent Guess (xml, json, script, or html)) Type: String The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string). The available types (and the result passed as the first argument to your success callback).

http://api.jquery.com/jquery.ajax/

Using dataType:json expect json and your app returns html

Change dataType:'json' to dataType:'html'

answered Jun 4, 2014 at 21:22

Ignacio Laborde

1,4622 gold badges11 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

MVC Partial View Not Refreshing when using JSON data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related