Problems Serializing form data and submitting it to the control with mapping

Question

I have a form that is flexible. Meaning that depending on what selection you make in a dropdownlist the fields will be different. Also, the controller action that is called will also change. I am trying to get this to work with just a simple example, but I can't find how to submit data to the controller and have the controller map it correctly to a defined class.

Clarification: When a user creates a new question that has only one choice this is the form/controller that they are using. However, when they create a question with multiple choices I would like to use the same form/controller. The error i am getting is that the object is null. Which i think means that whenever the data is being passed to the controller, it is not being properly mapped into the object. How can i map the data explicitly into my defined object? Or should i do this whole thing differently?

Here is the controller:

    [HttpPost]
    public ActionResult CreateSimpleQuestion(SimpleQuestion question)
    {
        if (ModelState.IsValid)
        {
            question.question.is_counted = true;
            question.question.DateCreated = DateTime.Now;
            db.Questions.Add(question.question);
            db.QuestionChoices.Add(question.choices[0]);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(question);
    }

Here is the class:

    [Serializable]
    public class SimpleQuestion
    {
        public Question question { get; set; }

        public QuestionChoices[] choices { get; set; }
    }

Here is the script that is calling the controller action:

<script type="text/javascript">
    $("form").on("submit", function (event) {
        event.preventDefault();
        var data = $('form').serialize();
        console.log(data);
        $.post('/Question/CreateSimpleQuestion/', data);
    });
</script>

This is the serialized data:

QuestionTitle=faketitle&Keywords=fakekeywords&Description=fakedescription&Comments=fakecomments&QuestionType=Simple&DisplayText=fakequestiontext&OrderNumber=fakeorder

And in case you need the specifics of the model:

public class Question
{
    public int QuestionId { get; set; }

    public string QuestionTitle { get; set; }

    public DateTime DateCreated { get; set; }

    public string QuestionType { get; set; }

    public string Keywords { get; set; }

    public bool is_counted { get; set; }

    public int? ParentId { get; set; }

    [Column(TypeName = "ntext")]
    [MaxLength]
    public string Description { get; set; }

    [Column(TypeName = "ntext")]
    [MaxLength]
    public string Comments { get; set; }

    //These define a one to many relationship
    public virtual ICollection<TeamQuestionRoster> TeamQuestionRosters { get; set; }

    public virtual ICollection<Response> Responses { get; set; }

    public virtual ICollection<QuestionChoices> QuestionChoices { get; set; }
}



public class QuestionChoices
{
    public int QuestionChoicesId { get; set; }

    public string DisplayText { get; set; }

    public int OrderNumber { get; set; }

    public bool is_correct { get; set; }

    //These are the FK properties
    public int QuestionId { get; set; }

    //This defines the FK Relationships
    public virtual Question Question { get; set; }

    //These define a one to many relationship
    public virtual ICollection<ResponseDetails> ResponsDetails { get; set; }
}

Answer 1

I think you might be having a issue with your media type. Try posting JSON like this:

$.post('/Question/CreateSimpleQuestion', data, function() { /* success callback */ }, 'application/json');

EDIT: The $.post shorthand method might be expecting 'json' rather than 'application/json'. I typically use $.ajax instead.

TAKE 2: Based the JSON you posted, I can see that your data is not being serialized properly. You're getting name/value pairs instead of actual JSON objects. Your JSON data should like this:

{
    "QuestionId" : 0, 
    "QuestionTitle" : "My Title",
    "Description": "My Description"
}

Here's another SO post explaining how to convert the jQuery serialize results to an appropriate JSON object: Convert form data to JavaScript object with jQuery

Hope that helps :)