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?

Solution 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
}

Solution 2

You'll need to create a View Model that contains both of the types that you need. Something like this (assuming you're editing both an Album and an Artist):

public class MyModel
{
    public Album Album { get; set; }
    public Artist Artist { get; set; }
    public SelectList Genres { get; set; }
    public SelectList Artists{ get; set; }
}

Then change your view to use the new model like so:

@model MyModel

Then change your Get method to be something like:

public ActionResult Edit(int id) 
{
    var model = new MyModel();
    model.Album = db.Albums.Find(id);
    model.Artist = yourArtist; //whatever you want it to be
    model.Genres = new SelectList(db.Genres, "GenreId", "Name", model.Album.GenreId);
    model.Artists = new SelectList(db.Artists, "ArtistId", "Name", model.Album.ArtistId);

    return View(model);
}  

Then change your Post method to take the MyModel type:

[HttpPost]
public ActionResult Edit(MyModel model) {

    if (ModelState.IsValid) {
    //save your items here

        db.SaveChanges();

        return RedirectToAction("Index");
    }

    model.Genres = new SelectList(db.Genres, "GenreId", "Name", model.Album.GenreId);
    model.Artists = new SelectList(db.Artists, "ArtistId", "Name", model.Album.ArtistId);

    return View(album);
}      

Assuming your view has something like (wrapped in a form with a submit button of course):

@Html.EditorFor(m => m.Artist.Name) //do this for all Artist Fields
@Html.EditorFor(m =? m.Album.Name) //do this for all Album Fields

//the following two show you how to wire up your dropdowns:
@Html.DropDownListFor(m => m.Album.ArtistId, Model.Artists)
@Html.DropDownListFor(m => m.Album.GenreId, Model.Genres)

Comments

[user1196392]

what i m writing after if (ModelState.IsValid) { to edit particular model.

[mattytommo]

@user1196392 Can you not call something like Save on your data classes? Something like model.Album.Save(); for each type in the model.

[CD Smith]

This was just pseudocode, not to be taken literally, you'll have to figure out how to get it correct or post the new code you are trying so we can help further. Keep the feedback loop going :-)