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.

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
}

Answer 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)

Answer 3

One alternative way is to use C# Tuples
http://www.dotnetperls.com/tuple
In your view and controller, define a tuple that is a list of your classes(models)