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.

Answer 1

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;
    });
});