MVC Partial View Not Refreshing when using JSON data

Posted by 40-Love on Stack Overflow See other posts from Stack Overflow or by 40-Love
Published on 2014-06-04T20:38:54Z Indexed on 2014/06/04 21:24 UTC
Read the original article Hit count: 290

Filed under:
|
|

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

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about asp.net-mvc