Question

I am making an AJAX call with jQuery:

        var topic = new Array();

        $('.container-topico').each(function (i) {
            topic.push(
            {
                "TopicsModel":
            {
                begins: $(this).find('.HoursStart').val(),
                ends: $(this).find('.HoursEnd').val(),
                texts: $(this).find('.input-topic').val()
            }
            }
                );
        });

        var data = JSON.stringify({
            videoId: '<%=Url.RequestContext.RouteData.Values["id"]%>',
            topics: topic
        });

        $.ajax({
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            url: '<%= Url.Action("SubmitTopics") %>',
            traditional: true,
            data:
            data
        ,

            beforeSend: function (XMLHttpRequest) {
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            },
            success: function (data, textStatus, XMLHttpRequest) {
                $(data).each(function () {
                });
            }
        });

It is sending the JSON in the format (e.g):

{"videoId":"1","topics":


[{"TopicsModel": {"begins":"00:00:33","ends":"00:01:00","texts":"1. Primeiro tema"}},
    {"TopicsModel": {"begins":"00:01:00","ends":"00:01:33","texts":"2. Segundo tema"}},    
    {"TopicsModel": {"begins":"00:01:33","ends":"00:02:00","texts":"3. Terceiro tema"}},
    {"TopicsModel": {"begins":"00:02:00","ends":"00:00:21","texts":"dasdasdsa ada as das s"}},
    {"TopicsModel": {"begins":"0","ends":"0","texts":""}}]}

And on the server side it has the Model:

 public class TopicsModel
    {
        public string begins;
        public string ends;
        public string texts;
    }

and the Controller:

public ActionResult SubmitTopics(int videoId, List<TopicsModel> topics)

What happen is:

It have the correct number of objects, but is not binding the properties of each element, as you can see bellow:

Why is it not binding to the properties ?

Answer 1

The binding can’t find the TopicsModel property in your TopicsModel object, so it can’t bind the value.

Try this instead :

{"videoId":"1","topics":


[{"begins":"00:00:33","ends":"00:01:00","texts":"1. Primeiro tema"},
    {"begins":"00:01:00","ends":"00:01:33","texts":"2. Segundo tema"},    
    {"begins":"00:01:33","ends":"00:02:00","texts":"3. Terceiro tema"},
    {"begins":"00:02:00","ends":"00:00:21","texts":"dasdasdsa ada as das s"},
    {"begins":"0","ends":"0","texts":""}]}

The binding should then resume normally.

---

You also have to change your model this way :

public class TopicsModel
    {
        public string begins { get; set; }
        public string ends { get; set; }
        public string texts { get; set; }
    }