MVC / Knockout - Posting Model to MVC Controller

Question

The Code..

I'm trying to post the following json data to my songwriter controller:

id:1
photofilepath:http://songistry.blob.core.windows.net/profileimages/639585169.png
firstname:Mike
lastname:Cottingham
website:http://mikecottingham.ca
minibio:I am the web developer building this website!
publisherid:2
proid:2
contacts:[{"Id":1,"Name":"Mike Cottingham","Phone":"403.919.2706","Email":"[email protected]"},{"Id":2,"Name":"Bob Thebuilder","Phone":"403.919.2706","Email":"[email protected]"}]

Here is my songwriter model public class SongWriter : IEntity { public virtual Int32 Id { get; set; }

    [Required(ErrorMessage = "First Name is required")]
    [Display(Name = "First Name")]
    [StringLength(64, ErrorMessage = "First Name cannot exceed 64 characters.")]
    public virtual String FirstName { get; set; }

    [Required(ErrorMessage = "Last Name is required")]
    [Display(Name = "Last Name")]
    [StringLength(64, ErrorMessage = "Last Name cannot exceed 64 characters.")]
    public virtual String LastName { get; set; }

    [Display(Name = "Website")]
    [StringLength(128, ErrorMessage = "Website cannot exceed 128 characters.")]
    public virtual String Website { get; set; }

    [Display(Name = "Mini Bio")]
    [StringLength(128, ErrorMessage = "Mini Bio cannot exceed 128 characters.")]
    public virtual String MiniBio { get; set; }

    [Display(Name = "Bio")]
    [StringLength(4096, ErrorMessage = "Bio cannot exceed 4096 characters.")]
    public virtual String Bio { get; set; }

    [Display(Name = "Photo")]
    [StringLength(256, ErrorMessage = "File Path cannot exceed 256 characters.")]
    public virtual String PhotoFilePath { get; set; }

    [Column("DefaultPublisherId")]
    public virtual Int32? PublisherId { get; set; }

    [Column("DefaultProId")]
    public virtual Int32? ProId { get; set; }

    [Display(Name = "Invitation Email")]
    [StringLength(128, ErrorMessage = "Invitation Email cannot exceed 128 characters.")]
    public virtual String InvitationEmail { get; set; }

    [StringLength(128, ErrorMessage = "Invitation Code cannot exceed 128 characters.")]
    public virtual String InvitationSecretKey { get; set; }

    public virtual Int32? LoginId { get; set; }

    public virtual Login Login { get; set; }
    public virtual ICollection<SongWriterSong> SongWriterSongs { get; set; }

    public virtual Pro Pro { get; set; }
    public virtual Publisher Publisher { get; set; }

    public virtual ICollection<Contact> Contacts { get; set; }
}

Here is my contact model public class Contact : IEntity { public virtual Int32 Id { get; set; }

    [DisplayName("Name")]
    [Required(ErrorMessage = "Contact name is required.")]
    [StringLength(128, ErrorMessage="Contact name can not exceed 128 characters")]
    public virtual String Name { get; set; }

    [DisplayName("Phone Number")]
    [Required(ErrorMessage = "Contact phone number is required.")]
    [StringLength(32, ErrorMessage = "Contact phone number can not exceed 32 characters")]
    public virtual String Phone { get; set; }

    [DisplayName("Email Address")]
    [Required(ErrorMessage = "Contact email address is required.")]
    [StringLength(128, ErrorMessage = "Contact email address can not exceed 128 characters")]
    public virtual String Email { get; set; }

    public virtual SongWriter SongWriter { get; set; }
}

I post the data to the controller using the following code

self.savechanges = function () { var model = { id: self.songwriter.id(), photofilepath: self.songwriter.photofilepath(), firstname: self.songwriter.firstname(), lastname: self.songwriter.lastname(), website: self.songwriter.website(), minibio: self.songwriter.minibio(), bio: self.songwriter.bio(), publisherid: self.songwriter.publisherid(), proid: self.songwriter.proid() };

return $.post("/songwriter/edit", model, function (response) {
    self.isvalid(response.Success);
    if (!self.isvalid()) {
        helpers.errordialog(response.Errors);
    }
    else {
        self.songwriter.id(response.Data.Id);
    }
}, "json");

};

I am getting validation errors saying that Contact name is required, Contact email is required... etc. Isn't the MVC engine supposed to look into JSON objects and parse out data and map it to my model?

Anyone have any thoughts?

mcottingham mcottingham · Accepted Answer · 2013-01-30T03:09:19

Figured it out!

I need to use the JQuery.ajax, not JQuery.post function. The JQuery.post function does not properly tag the contentType and dataType for the request.

Working Code:

return $.ajax("/songwriter/edit", {
                data: JSON.stringify(model),
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                success: function (response) {
                    self.isvalid(response.Success);
                    if (!self.isvalid()) {
                        helpers.errordialog(response.Errors);
                    }
                    else {
                        self.songwriter.id(response.Data.Id);
                    }
                }
            });

MVC / Knockout - Posting Model to MVC Controller

1 Answers