List model razor view

Question

I have an application asp.net mvc . in the controller i have this:

 public ActionResult Index()
        {
            Upload.Models.ClientModels model1 = new Models.ClientModels();
            ArrayList client = model1.Client_List();

            Upload.Models.AkeoModels model2 = new Models.AkeoModels();
            ArrayList akeo = model2.Akeo_List();


            ArrayList model = new ArrayList();
            model.Add(client);
            model.Add(akeo);
            return View(model);




        }

I passed two concatenated list to the view Index as a model:

@{
    ViewBag.Title = "Bienvenue";
    int i = 0;
}

<hgroup class="title">
    <h1 style="color:darkcyan">Liste des clients</h1>
</hgroup>

<section >

<form>


<table style="margin-top: 50px;">
    <tr ><td ></td>
        <td ><center><b>Login</b></center></td>
        <td><center><b>Email</b></center></td>
        <td><center><b>Password</b></center></td>
        <td><center><b>Name</b></center></td>

    </tr>
    @{
        Upload.Models.ClientModels client = null;
        int j = 0;
        while( j != -1)
    {
        try
        {
            client = Model[j];
          <tr>
        <td width=10px>
            @if (i == 0)
            {
      <input type="radio" 
        name="color" checked >
            }
            else
            {<input type="radio"  name="color" >
            }      
    </td>
    <td>
      <a type="text" 
        name="color" >@client.Login</a>
    </td>

    <td>
      <a type="text" 
        name="color" >@client.Mail</a>
    </td>
      <td>
      <a type="text" 
        name="color" >@client.Password</a>
    </td>
      <td>
      <a type="text" 
        name="color" >@client.Name</a>
    </td>
  </tr>
            i++;
            j++;
        }
        catch {j = -1;}
    }
        i = 0;
    }

</table>

</form>

</section>

<section style="margin-top: 30px">

    <a type="button"   style="width:120px;display:inline-block; height:20px;text-decoration:none;color:white;text-align:center;background-color:darkcyan;padding:5px;border-style:outset;border-width:2px;border-color:darkcyan;margin-left:150px"  href="@Url.Action("Delete_client", "Admin")">Supprimer</a>
    <a type="button" style="width:120px;display:inline-block; height:20px;text-decoration:none;color:white;text-align:center;background-color:darkcyan;padding:5px;border-style:outset;border-width:2px;border-color:darkcyan;" href="@Url.Action("Edit_client", "Admin",new { Id = 1 })">Editer</a>
    <br /> <br />
     <a href="@Url.Action("Create","Client")" style="color:blue; margin-top : 30px;margin-left:150px">Créer un nouveau compte</a>

    </section>
    <br />
<section>
<hgroup class="title">
    <h1 style="color:darkcyan">Liste des akeos</h1>
</hgroup>

<section >

<form>


<table style="margin-top: 50px;">
    <tr ><td ></td>
        <td ><center><b>Login</b></center></td>
        <td><center><b>Email</b></center></td>
        <td><center><b>Password</b></center></td>
        <td><center><b>Name</b></center></td>

    </tr>
     @{
        Upload.Models.AkeoModels akeo = null;
        int k = 0;
        while( k < Model.Count)
    {
        try
        {
            akeo = Model[k];

  <tr>
        <td width=10px>
            @if (i == 0){
      <input type="radio" 
        name="color" checked >
            }
            else{<input type="radio"  name="color" >
            }      
    </td>
    <td>
      <a type="text" 
        name="color" >@akeo.Login</a>
    </td>

    <td>
      <a type="text" 
        name="color" >@akeo.Mail</a>
    </td>
      <td>
      <a type="text" 
        name="color" >@akeo.Password</a>
    </td>
      <td>
      <a type="text" 
        name="color" >@akeo.Name</a>
    </td>
  </tr>
         i++;
            k++;
        }
        catch {k++;}
    }
    }
</table>
</form>

</section>






 <section style="margin-top: 30px">


    <a type="button"   style="width:120px;display:inline-block; height:20px;text-decoration:none;color:white;text-align:center;background-color:darkcyan;padding:5px;border-style:outset;border-width:2px;border-color:darkcyan;margin-left:150px"  href="@Url.Action("Delete_akeo", "Admin",new { Id = 1})">Supprimer</a>
    <a type="button" style="width:120px;display:inline-block; height:20px;text-decoration:none;color:white;text-align:center;background-color:darkcyan;padding:5px;border-style:outset;border-width:2px;border-color:darkcyan;" href="@Url.Action("Edit_akeo", "Admin",new { Id = 1 })">Editer</a>
    <br /> <br /> <br />
     <a href="@Url.Action("Create","Akeo")" style="color:blue; margin-top : 30px;margin-left:150px">Créer un nouveau compte</a>

    </section>

    </section>

The problem is : the values of the list is not shown . in the view Index only the labels and the buttons below the tables are shown but the content of the model isn't. i'am debugging the program and the model is not empty, it contains two elements.

1. Where is the error in the view?
2. How can i fix it?

Answer 1

You should not use ArrayList. You should create a custom type that contains properties from both models.

For example:

public class CustomModel 
{
   public int PropertyOne { get; set; }
   public string PropertyTwo { get; set; }
}

Or alternatively you can have:

public class CustomModel2 
{
   public List<Models.ClientModels> ClientModels { get; set; }
   public List<Models.Akeo_List> AkeoModels { get; set; }
}

Controller:

public ActionResult Index() 
{
  var model = new List<CustomModel>();
  model.Add(new CustomModel() { });
  return View(model);
}

View

@Model List<CustomModel>

foreach(var cm in @Model) {
     cm.PropertyOne
}

If you were using CustomModel2 you could iterate over all of the clients by doing:

   foreach (var client in @Model.ClientModels) {
       @client.ClientName
   }