MVC Partial View Not Refreshing when using JSON data

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

Answers


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'


Need Your Help

Inheriting height of a child node (IMG inside A)

css

I have a fancy CSS on my &lt;a&gt; tags. Putting an &lt;img&gt; inside of a link makes the image stick outside of the &lt;a&gt; block, even though it's still clickable, it looks stupid.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.