Question

I’m using asp.net mvc 4 VB.NET with jquery 1.8.3 and jquery-ui 1.9.2 and as the title suggests: my jquery callbacks to my controllers give me empty models.
The function does get called, but no properties of my model are set.
Here’s the scenario: I have an unordered list with several li’s in it. When I click on the li, I get the value from the hidden field in the li. This value is the model I’m trying to pass.
In my action in the controller, I’m setting a partial view with the provided model and give this back. I then overwrite a div with the returned partial view to finish my jquery script.

Here’s the code:

Html div with list

<div class="listContainer">
            <ul>
                @For Each attachment As EPower.eSuite.Model.DTO.HRCore.Attachment In Model.Documents
                    @<li>
                        <input type="hidden" value="@attachment" class="test" />
                        <a href="#">
                            <span class="title">@attachment.Filename</span>
                            <span class="description">@attachment.Tag.ID</span>
                        </a>
                    </li>
                Next
            </ul>
        </div>

JQuery function:

$('.listContainer ul li').on('click', function () {
            var jsonModel = $(this).children('input.test').val();
            $.ajax({
                type: "POST",
                url: '@Url.Action("SetPersonalDocumentPartial", "WhoIsWho")',
                data: JSON.stringify(jsonModel),
                dataType: 'json',
                contentType: 'application/json',
                error: function (t) {
                    $('.personalDocumentContent').html(t.responseText);
                },
                success: function (result) {
                    $('.personalDocumentContent').html(result);
                }
            });
        });

MVC Controller action:

<HttpPost> _
        Public Function SetPersonalDocumentPartial(ByVal attachment As Model.DTO.HRCore.Attachment) As ActionResult
            Return PartialView("_ViewPersonalDocumentPartial", attachment)
        End Function

The things that currently work:
My function succesfully calls my MVC action, but the model properties are not set.
When setting my model in the Controller to a set value, I get the partial back and it succesfully overwrites my div. For some reason, it goes to the errors though.

I hope we can work it out together!

Answer 1

The .val() method returns a string. And when you JSON.stringify a string guess what you get? Yeah, you’ve guessed it right: a string. So for example: JSON.stringify('foobar') gives you 'foobar'. And sending foobar to your controller actin doesn’t help the model binder at all.

If you want the model binder to be able to bind the model from the request make sure that you have included all properties of this model that you want to be bound in the request:

data: JSON.stringify({ filename: $(this).children('input.test').val() })

This will set the FileName property of your Model.DTO.HRCore.Attachment. If you have other properties make sure you include them as well:

data: JSON.stringify({ 
    filename: $(this).children('input.test').val(),
    someOtherProperty: 'some other value'
})