Columns from two models in one webgrid

Question

first, please note that I am a little new in that. I would like to know, how can I make Webgrid with columns from two models (two tables).

I have two models, like that: Model1:

public int Id { get; set; }
public string Name { get; set; }

Model2:

public int Id { get; set; }
public int Model1_Id { get; set; }
public string Level { get; set; }
public string AdditionalInfo { get; set; }
public string Note { get; set; }

In controller handle data and send to view.

...
List<Model2> data = new List<Model2>();
...
return View(data)

Now starts the problem. In the view I am creating Webgrid from the model. Once problem is, that names of columns have to be identical with property names or it falls.

@model IEnumerable<Model2>

<div class="class-name">
    @grid.GetHtml(columns: new [] {
    grid.Column("Level"),
    grid.Column("AdditionalInfo", header: "Additional info"),
    grid.Column("Note")
    }, tableStyle: "some-name")
</div>

That's all ok, but I want in that grid also name from Model1 and the values will be depends on Model1_Id.

If I try add new column by grid.Column it falls.

If I add second model (after the first line) it writes 'Only one 'model' statement is allowed in file'.

Everything what I tried it fell.

I tried work with google but after several hours, I would like ask you guys. Thank you

Answer 1

You can create a ViewModel with both model

public class MyViewModel
{
    public Model1 Model1Data { get; set; }
    public List<Model2> Model2List { get; set; }
}

In Controller

    MyViewModel model = new MyViewModel();
    model.Model2List = new List<Model2>()
    model.Model1Data = new Model1() 

In your View,

@model MyViewModel 

Answer 2

Try this,

It's just an example:

Model

  public class EmployeeDetailsModel
    {
        public string EnteredValue { get; set; }
        public int EmployeeId { get; set; }
    }
  public class SampleModel
    {
        public int inx { get; set; }
        public bool studentclass { get; set; }
        public string SampleDescription { get; set; }
        public string SampleCode { get; set; }
        public string SampleItems { get; set; }
        private EmployeeDetailsModel _employee = new EmployeeDetailsModel();
        public EmployeeDetailsModel employee { get { return _employee; } set { _employee = value; } }
    }

Controller

 public ActionResult IndexJquery()
        {
            ViewBag.RegisterItems = GetSamples();
            return View();
        }
  public IEnumerable<SampleModel> GetSamples()
        {
            List<SampleModel> sampleAdd = new List<SampleModel>();
            SampleModel s12 = new SampleModel();
            s12.inx = 1;
            s12.SampleCode = "123se";
            s12.SampleDescription = "GOOD";
            s12.SampleItems = "newone";
            s12.employee.EmployeeId = 1;
            s12.employee.EnteredValue = "jaimin";


            SampleModel s2 = new SampleModel();
            s12.inx = 2;
            s2.SampleCode = "234se";
            s2.SampleDescription = "Average";
            s2.SampleItems = "oldone";
            s2.employee.EmployeeId = 2;
            s2.employee.EnteredValue = "jaimin2";


            sampleAdd.Add(s12);
            sampleAdd.Add(s2);

            return sampleAdd;
        }

View

 <div>
        @{
            var grid = new WebGrid(ViewBag.RegisterItems);
            @grid.GetHtml(
                 alternatingRowStyle: "alt",
                  columns: grid.Columns(
                    grid.Column("SampleCode"),
                    grid.Column("SampleDescription"),
                    grid.Column("SampleItems"),
                    grid.Column("employee.EmployeeId", header: "EmployeeId"),
                    grid.Column("employee.EnteredValue", header: "EnteredValue")
                 ));
        }
    </div>