使用JSON数据时MVC局部视图未刷新

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

Answer 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'