绑定生成的字段以在razor视图中建模

Question

UPDATE: fixed this issue by adding the name attribute to the select tag that was added in order for it to be added to the formelement upon submit.

I have a partial view that get's passes a model that has a foreign key. The partial view's sole purpose is to create a new object in the database for this model. I created a drop down for one of the fields based on something outside of the model and now when I post the form, that field isn't included in the api post to create the record. (for those familiar, yes, this is pretty much the contact example out of the box, I'm trying to extend it a bit and could use some help)

<form id="addContact" data-bind="submit: createContactFromForm">
@Html.ValidationSummary(true)

<fieldset>
    <legend>Contact</legend>

    @Html.EditorForModel()

    <div class="editor-label"><label>Store:</label></div> 
    <div class="editor-field" id="storediv">
        <select id="StoreId" **name="StoreId"** data-bind="options: stores, optionsText: 'Name', optionsValue: 'Id', optionsCaption: 'Choose...'"></select>
    </div>
    <p>
        <input type="submit" value="Save" />
    </p>
</fieldset>
</form>

How can I get the Store field to be part of the model on form submit? I'm overriding the submit to call the createContactFromForm function in the knockoutjs viewmodel.

Updated with portion of the viewmodel that is being called:

self.createContactFromForm = function (formElement) {
        // If valid, post the serialized form data to the web api
        $(formElement).validate();
        if ($(formElement).valid()) {
            $.post("api/contacts", $(formElement).serialize(), "json")
                .done(function (newContact) {
                    self.contacts.push(newContact);
                    $('#addContact')[0].reset();
                });
        }
    }

Server side model:

public Contact()
    {
        this.Created = DateTime.Now;
        this.Emails = new List<Emails>();
    }

    [ScaffoldColumn(false)]
    public int Id { get; set; }
    [Required, MaxLength(256)]
    public string FirstName { get; set; }
    [Required, MaxLength(256)]
    public string LastName { get; set; }
    [ScaffoldColumn(false)]
    public string Name { get { return string.Concat(this.FirstName, " ", this.LastName); } set { } }
    [MaxLength(256)]
    public string EmailAddress {
        get
        {
            return this.Emails.Count == 0 ? string.Empty : this.Emails[0].EmailAddress;
        }
        set
        {
            if (this.Emails.Count == 0)
            {
                this.Emails.Add(new Emails());
            }
            this.Emails[0].EmailAddress = value;
        }

    }
    [MaxLength(50)]
    public string PhoneNumber { get; set; }
    [MaxLength(256)]
    public string Address { get; set; }
    [MaxLength(256)]
    public string City { get; set; }
    [MaxLength(50)]
    public string State { get; set; }
    [MaxLength(256)]
    public string ZipCode { get; set; }
    [Required]
    [ScaffoldColumn(false)]
    public int StoreId { get; set; }
    public Store Store { get; set; }
    [ScaffoldColumn(false)]
    public DateTime Created { get; set; }

    public virtual IList<Emails> Emails { get; protected set; }

Answer 1

So I figured out how to add the 'new' field to the model that was being submitted. I have to give created to this article that got me going in the right direction. DynamicallyAddedForm , which was a link from this question stack link

I've updated the code to show the added HTML properties that passed to with the submit. Came down to naming convention and making it sure it matches the model.