Creating multiple models in ASP.Net MVC

Question

I am using Code-First EF. A simplified version of the models:

public class Person
{
    public int PersonID { get; set; }

    public string Name { get; set; }

    public List<Phone> Phones { get; set; }
}
public class Phone
{
    public int PhoneID { get; set; }

    public string Number { get; set; }

    public virtual Person Person{ get; set; }

    public int PersonID { get; set; }
}

So I have a one to many relationship between Person and Phone.

I would like to enable the user to add as many phones as possible in the create view for person. When the form in that view is submitted, I would save both the Person and all of the phones that were added.

Can anyone point me in the right direction? I read about editor-for templates, is this the proper use case?

might be a duplicate http://stackoverflow.com/questions/33190604/how-to-insert-to-master-detail-tables-in-asp-net-mvc-5 How to insert master detail tables in mvc 5 — silverfighter, Nov 10 '16 at 20:15
probably just some javascript for when they click a `+` button, add another input element onto the form — Jonesopolis, Nov 10 '16 at 20:19
I have that part, it's more getting what they typed into the added input and saving it to the db that is my question. Thanks though! — bak, Nov 10 '16 at 20:19
Refer [this answer](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) for some options. — , Nov 10 '16 at 21:15

score 0 · Answer 1 · answered Nov 10 '16 at 21:51

you can use viewModel like this

public class PersonAddViewModel
{
    public string Name{set;get;}
    public List<string> Phones{set;get;}
}

on your form of your view you can add this code

@using (Html.BeginForm("Add", "Person", FormMethod.Post }))
{
    <div class="col-md-6">
        <div class="form-group">
            @Html.LabelFor(p => p.Name)
            @Html.EditorFor(p => p.Name, new { @class = "form-control" })
        </div>
   </div>
   <div class="col-md-6" id="#row-0">
        <div class="form-group">
            @Html.LabelFor(p => p.Phones[0])
            @Html.EditorFor(p => p.Phones[0], new { @class = "form-control" })
        </div>
   </div>
   <div id=OtherPhones></div>
   <button type="button" class="btn btn-danger btn-float btn-float-lg btn-     rounded" id="add"><i class="icon-plus2"></i></button>
  <button type=submit>Submit</button>
}

then add this jquery script to your page

$("#add").click(function () {

inputCount++;

var newDiv = $("#row-0").clone();
newDiv.attr('id', 'row-' + inputCount);

newDiv.find("input,select").each(function () {
    $(this).attr({
        'name': function (_, name) { return name.toString().replace('0', inputCount) },
        'id': function (_, id) { return id.toString().replace('0', inputCount) },
        'item': function (_, item) { return item.toString().replace('0', inputCount) }
    });

    var type = $(this).attr('type');
    if (type === 'hidden') {

        $(this).val('0');
    } else {
        $(this).val('');
    }
});

newDiv.find(".available").each(function () {
    $(this).attr({
        'id': function (_, id) { return id.toString().replace('0', inputCount) }
    });

});

newDiv.find(".delCol").each(function () {
    $(this).find('button').attr('item', inputCount);
    $(this).fadeIn();
});

newDiv.find("label").each(function () {
    $(this).attr({
        'for': function (_, id) { return id.toString().replace('0', inputCount) }
    });
});

newDiv.find(".field-validation-valid").each(function () {
    $(this).attr({
        'data-valmsg-for': function (_, id) { return id.toString().replace('0', inputCount) }
    });
}).end();

$("#Other").append(newDiv);

$('form').data('validator', null);
$.validator.unobtrusive.parse('form');

});

Creating multiple models in ASP.Net MVC

1 Answers1