mvc jquery model to controller empty

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!

Darin Dimitrov · Accepted Answer · 2013-01-22 10:55:30Z

2

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'
})

answered Jan 22, 2013 at 10:55

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

3 Comments

whodares Over a year ago

Thank you for the answer, but it seems I wasn't specific enough. My model goes down several relational levels. I also need those relational levels. Setting every value isn't an option, since it will be too many properties to list.

Darin Dimitrov Over a year ago

No you was very clear. I am afraid that the model binder is not some sort of a wizard with a crystal ball that will bind your model from the nowhere. If you don't send the values to your controller action you won't get them. It's as simple as that. If you don't want to send all properties then simply send only the id of this model and then query your backend in the controller action using this id in order to retrieve the entire model. Obviously that's only true for properties that do not get changed in the view. For all the other you will need to send them if you expect to fetch them back.

whodares Over a year ago

The last resort that I have is returning my entire list as models from a combination of razor and jquery and then change the hidden field to an id value. In the mvc controller action, I will do a .where on the list. This however, will eat up lots of resources if the list is too big and that's why I was looking for this kind of solution. If you would have a better solution, I would always like to hear it. I'm probably missing something here.

Collectives™ on Stack Overflow

mvc jquery model to controller empty

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related