MVC 3 - Adding multiple objects to a entity

Question

I have a classes like this:

public class member
{
 public string name {get;set;}
 public IList<Note> notes {get;set;}
}

public class note
{
 public string text {get;set;}
 public datetime created {get;set;}
}

I want to have a page which inserts the member class - which i am fine with. My question lies in how to go about adding multiple notes to the member on the same page?

What would be the best way to go about this? (maybe some ajax solution to show sub forms for the note class)

Can anyone point me in the right direction of some related examples learning material?

Thanks in advance.

I answered something [very similar a while back](http://stackoverflow.com/questions/3317416/asp-net-mvc2-custom-templates-loading-via-ajax-and-model-updating/3319853#3319853), will probably help :-) — WestDiscGolf, Jun 13 '11 at 21:39

score 2 · Accepted Answer · edited May 23 '17 at 11:55

I'd create an Ajax form that posts to a method called AddNote(AddNoteViewModel viewModel) on your controller. AddNoteViewModel would contain all the information you need to create a new note. The AddNote Action Method would add the new note, SaveChanges and return a list of notes for the given Member. You can use a partial view for the content that is returned from AddNote.

On the Ajax form you should set UpdateTargetId to the id of the <div> you want to update with the latest list of notes.

Another option might be to use JQuery.

Here is a good example of both: Using Ajax.BeginForm with ASP.NET MVC 3 Razor

UPDATE : I've adapted Darin Dimitrov's example (from the link) to suit your scenario. This is off the top of my head so won't be perfect but it should give you a decent starting point

Model:

public class AddNoteViewModel
{
    [Required]
    public int MemberId { get; set; }
    [Required]
    public string Text { get; set; }
}

Controller:

    [HttpPost]
    public ActionResult AddNote(AddNoteViewModel model)
    {
        var member = //Get member from db using model.MemberId
        member.Notes.Add(new Note{Text = model.Text, Created = DateTime.Now});
        //SaveChanges();

        var notes = //Get notes for member

        return View(notes);
    }

View:

@model AppName.Models.AddNoteViewModel

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

<div id="result"></div>

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
{
    @Html.HiddenFor(x => x.MemberId)
    @Html.EditorFor(x => x.Text)
    @Html.ValidationMessageFor(x => x.Text)
    <input type="submit" value="OK" />
}

Using JQuery:

View:

@model AppName.Models.AddNoteViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/index.js")" type="text/javascript"></script>

<div id="result"></div>

@using (Html.BeginForm())
{
    @Html.HiddenFor(x => x.MemberId)
    @Html.EditorFor(x => x.Text)
    @Html.ValidationMessageFor(x => x.Text)
    <input type="submit" value="OK" />
}

index.js:

$(function () {
    $('form').submit(function () {
        if ($(this).valid()) {
            $.ajax({
                url: this.action,
                type: this.method,
                success: function (result) {
                    $('#result').html(result);
                }
            });
        }
        return false;
    });
});

Thanks for your response i will have a go later tonight and let you know how i get on — gdp, Jun 13 '11 at 09:30
@NinjaNye One question - what if i want to add the notes to a member that hasn't been persisted to the database yet? — gdp, Jun 14 '11 at 22:06
You can create a new Member class and add notes to that class before calling SaveChanges() and EF will usually sort it all out for you. You will need to alter the AddNoteViewModel to take all the info to create a member. The tricky part will be posting multiple notes. If you have a choice I'd alter the workflow to so that a member is created first and notes are then added to the persisted member — NinjaNye, Jun 14 '11 at 22:13
@NinjaNye Thats what i was thinking of - i will add notes after the member has been persisted. cheers for all of your help. — gdp, Jun 14 '11 at 22:45
@NinjaNye Also do you think creating the add note view as a partial view then rendering it below the member form is a good way to go? — gdp, Jun 14 '11 at 23:15
Yeah, as above, create a partial view that only deals with the adding and displaying of notes. keeps everything simple and clean that way — NinjaNye, Jun 15 '11 at 06:49

MVC 3 - Adding multiple objects to a entity

1 Answers1