title: How to use multiple seperate models in a razor view in ASP.NET MVC?
body: <p>I'm currently working on a project where I want to display 2 webgrid tables with each different models. I've found alot of tutorials how to use multiple models in a regular MVC View but it does not work in a Razor View. I'm kinda stuck on this now.</p>
  
  <p><strong>What I've tried so far - 1</strong></p>
  
  <p>Controller:</p>
  
  <p>I've tried using an dynamic ExpandObject to add two lists to this View, look code:</p>
  
  <pre><code>public ActionResult Index(int page = 1, string sortApi = "ApiName",string sortCompany = "CompanyName", string sortdir = "asc", string search = "")
  {
          int pageSize = 13;
          int totalRecords = 0;
          if (page &lt; 1)
          {
              page = 1;
          }
          int skip = (page * pageSize) - pageSize;
          ViewBag.TotalRows = totalRecords;
          ViewBag.search = search;
  
          //Dynamic ExpandObject
          var dataApiRedirects = getRedirects(search, sortApi, sortdir, skip, pageSize, out totalRecords);
          var dataCompanies = getCompanies(search, sortCompany, sortdir, skip, pageSize, out totalRecords);
          dynamic mymodel = new ExpandoObject();
          mymodel.ApiList = dataApiRedirects;
          mymodel.CompanyList = dataCompanies;
  
          return View(mymodel);
  }
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>&lt;div class="col-sm-1 d-flex align-items-stretch" style="padding-top: 5%;"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal"&gt;+API&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;!--MODAL--&gt;
                  &lt;div class="modal fade" id="myModal" &gt;
                      &lt;div class="modal-dialog" style="width: 20%;"&gt;
                          &lt;div class="modal-content"&gt;
                              &lt;div class="modal-header"&gt;
                                  &lt;a href="#" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/a&gt;
                                  &lt;h3 class="modal-title"&gt;Add API&lt;/h3&gt;
                              &lt;/div&gt;
                              &lt;div class="modal-body"&gt;
                                  &lt;form id="myForm"&gt;
                                      &lt;p&gt;@Html.TextBoxFor(Model.ApiList.ApiName, new { @class = "form-control", @placeholder = "Name" })&lt;/p&gt;
                                      &lt;p&gt;@Html.TextBoxFor(model =&gt; model.ApiList.First().Company.CompanyName, new { @class = "form-control", @placeholder = "Company" })&lt;/p&gt;
                                      &lt;p&gt;@Html.TextBoxFor(model =&gt; model.ApiList.First().ApiURL2, new { @class = "form-control", @placeholder = "URL" })&lt;/p&gt;
                                  &lt;/form&gt;
                              &lt;/div&gt;
                              &lt;div class="modal-footer"&gt;
                                  &lt;a href="#" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/a&gt;
                                  &lt;input type="reset" value="Submit" class="btn btn-success" id="btnSubmit" /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>However when I want to create textboxes in my modal im getting the following error:</p>
  
  <p><a href="https://i.stack.imgur.com/v1Wcp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v1Wcp.png" alt="enter image description here"></a></p>
  
  <p><strong>What I've tried so far - 2</strong></p>
  
  <p>I've also tried using a ViewBag:</p>
  
  <p>Controller code:</p>
  
  <pre><code>public ActionResult Index(int page = 1, string sortApi = "ApiName",string sortCompany = "CompanyName", string sortdir = "asc", string search = "")
  {
          int pageSize = 13;
          int totalRecords = 0;
          if (page &lt; 1)
          {
              page = 1;
          }
          int skip = (page * pageSize) - pageSize;
  
          var dataApiRedirects = getRedirects(search, sortApi, sortdir, skip, pageSize, out totalRecords);
          var dataCompanies = getCompanies(search, sortCompany, sortdir, skip, pageSize, out totalRecords);
          dynamic mymodel = new ExpandoObject();
          mymodel.ApiList = dataApiRedirects;
          mymodel.CompanyList = dataCompanies;
  
          //Model 1 data
          ViewBag.CompaniesList = dataCompanies;
  
  
          ViewBag.TotalRows = totalRecords;
          ViewBag.search = search;
  
          //Model 2 data
          return View(mymodel);
  }
  </code></pre>
  
  <p>HTML Code:</p>
  
  <pre><code>var getlist = ViewBag.CompaniesList as IEnumerable&lt;APIBrokerFrontend.Models.Company&gt;;
  
  &lt;div class="modal fade" id="myModalCompany"&gt;
                  &lt;div class="modal-dialog" style="width: 20%;"&gt;
                      &lt;div class="modal-content"&gt;
                          &lt;div class="modal-header"&gt;
                              &lt;a href="#" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/a&gt;
                              &lt;h3 class="modal-title"&gt;Add Company&lt;/h3&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-body"&gt;
                              &lt;form id="myForm"&gt;
                                  @&lt;p&gt;@Html.TextBoxFor(getlist.First().CompanyName, new { @class = "form-control", @placeholder = "Company Name" })&lt;/p&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-footer"&gt;
                              &lt;a href="#" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/a&gt;
                              &lt;input type="reset" value="Submit" class="btn btn-success" id="btnSubmit" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Using ViewBag I'm getting the following error:</p>
  
  <p><a href="https://i.stack.imgur.com/SA0Z1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SA0Z1.png" alt="enter image description here"></a></p>
  
  <p>Does anyone have a solution for this?</p>
  
  <p>Thanks in advance!</p>