CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-3
Samantha J T Star
Samantha J T Star

Reputation: 32828

How can I create a view that shows both master and detail information using a viewmodel in MVC?

I have the following viewmodel:

namespace WebUx
{
    public class CityViewModel
    {
        public City City { get; set; }
        public IList<CityDetail> CityDetails { get; set; }
    }
}

The following master class:

Class City {
     public string Name { get; set; }
     public string Type { get; set; }
}

The following detail class:

Class CityDetail {
     public string   Number { get; set; }
     public string   Street { get; set; }
}

What I would like to do is to use the viewmodel in a view where a form in the view will first show some basic city information and then have an area at the bottom where there are ten CityDetail records.

Is there a way that I can do this with a partial view? I understand some things about the partial view but how could I write this to meet my needs? Can I even call a partial view from within a view and at the same time create blank records with details that can be filled in and that would be part of the model when I return to my action. How could I handle labels also. For example I would like the labels for each Street to show as "Street 1", "Street 2" etc.

Upvotes: 2

Views: 1543

Answers (2)

archil
archil

Reputation: 39501

Yes you can. Actually you are on the correct way, but generally, for editors and displays, EditorTemplates and DisplayTemplates are prefered over partial views

CityViewModel design is correct, i would do it that way

Create DisplayTemplate for CityDetail Views/Shared/DisplayTemplates/CityDetail.cshtml.

Create EditorTemplate for City Views/Shared/EditorTemplates/City.cshtml. This will be something like

@model City
@Html.LabelFor(model => model.Name)
@Html.EditorFor(model => model.Name)
@Html.LabelFor(model => model.Type)
@Html.EditorFor(model => model.Type)

Add the action view

@model CityViewModel
@using(Html.BeginForm())
{
     @Html.EditorFor(model => model.City) // this will render city editor by calling editor template above
     <input type="submit" value="ok"/>
}
@Html.DisplayFor(model => model.CityDetails) //this will render all of cities in list by calling display template above for each

And the action

public ActionResult CreateCity(CityViewModel cityModel)
{
    // cityModel.City is populated with values entered by user
}

Upvotes: 1

Daria Barteneva
Daria Barteneva

Reputation: 494

You can have both entities in the same view. I use to create an area for master entity, followed by the grid for detail entities and the buttons to open these detail entities in the ChildWindow to create, edit or delete. Everything using the same view model.

Don«t forget to include the detail entities in the the object on the server side, like this:

[MetadataTypeAttribute(typeof(MasterEntity.MasterEntityMetadata))]
    public partial class MasterEntity
    {
        internal sealed class MasterEntityMetadata
        {
            private MasterEntityMetadata()
            {
            }

            [Include]
            public EntityCollection<DetailEntity> DetailEntity{ get; set; }
        }
    }

And then, on your service do like this:

public IQueryable<MasterEntity> GetMasterEntity()
        {
            return this.ObjectContext.MasterEntities.Include("DetailEntity").Where(p => SOMEFILTER).OrderBy(p => SOMEVALUE);
        }

Upvotes: 0

Related Questions