c# - How to edit multiple models in a single Razor View

Question

I am new to MVC3, I have an multiple models like BussinessDetails,ContactPerson,ServiceArea,Address and many more models. I have a single view page where shared view pages like Contacts,BusinessDetails,Address,ServiceArea etc.these are all in tabs. They have there own models.

My problem is that how to edit multiple models in a same edit view page. Before sending this post I take the help of the MVC3 "Music Store" example but there is only one model ALBUM and they give edit operation for one model if there is one or more model how I shall edit in the same view page.

I have already made a parent business specification class. This is from MVC "Music Store"

public ActionResult Edit(int id) {
    Album album = db.Albums.Find(id);
    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
    return View(album);
}                                                        

[HttpPost]
public ActionResult Edit(Album album) {
    if (ModelState.IsValid) {
        db.Entry(album).State = EntityState.Modified;
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
    return View(album);
}                                                                   

In HTTP POST there is only on model ALBUM if there is more models how i am perform edit operation on multiple models and view?

Answer 1

You need to include the other ViewModels into a main CompositeModel like so

public class CompositeModel {
    public Album AlbumModel { get; set; }
    public Another AnotherModel { get; set; }
    public Other EvenMore { get; set; }
}

Send that to your view like so

public ActionResult Index() {
    var compositeModel = new CompositeModel();
    compositeModel.Album = new AlbumModel();
    compositeModel.OtherModel = new AnotherModel();
    compositeModel.EvenMore = new Other();        
    return View(compositeModel)
}

Modify your view to take the new model type

@model CompositeModel

To refer to properties of the sub-models you can use syntax like this

@Html.TextBoxFor(model => model.Album.ArtistName)

or you can create a view in the EditorTemplates folder that takes a sub-model like AlbumModel and use EditorFor like this

@Html.EditorFor(model => model.Album)

The template would look something like this

@model AlbumModel

@Html.TextBoxFor(model => model.AlbumName)
@Html.TextBoxFor(model => model.YearReleased)
@Html.TextBoxFor(model => model.ArtistName)

Now just post CompositeModel back to your controller and then save all the sub-models and now Bob's your uncle!

[HttpPost]
public ActionResult Index(CompositModel model) {
    // save all models
    // model.Album has all the AlbumModel properties
    // model.Another has the AnotherModel properties
    // model.EvenMore has the properties of Other
}