如何用多個模型創建視圖mvc 4？

Question

所以我在asp.net mvc 4項目中工作，我在我的視圖中有一個問題，我想要的是創建一個視圖與2不同類型的模型，第一視圖（索引）採取IEnumerable（Models.myModel）第二個用戶詳細信息）採取Models.myModel，這是我的型號代碼：

public class SubscribersModel 
{ 

    [Required] 
    [DataType(DataType.Text)] 
    public string name { get; set; } 

    [Required] 
    [DataType(DataType.Text)] 
    [StringLength(maximumLength: 10, MinimumLength = 7)] 
    public string cin { get; set; } 

    [Required] 
    [DataType(DataType.Date)] 
    public DateTime birthday { get; set; } 

    [DataType(DataType.Text)] 
    public string birthplace { get; set; } 
    } 

我的控制器代碼：

public class SubscribersController : Controller 
{ 
    private AgencyDbEntities dbcontext = new AgencyDbEntities(); 
    private Subscribe sb = new Subscribe(); 

    public ActionResult Index() 
    { 
     var subscribers = from sb in dbcontext.Subscribes select new SubscribersModel {  cin = sb.cin, name = sb.name, birthday = (DateTime)sb.birthDay, birthplace = sb.birthPlace }; 

     return View(subscribers); 
    } 

    public ActionResult Details(string id,string cin,string name) 
    { 
     var subscriber = new SubscribersModel(); 
     IEnumerable<Subscribe> list = from s in dbcontext.Subscribes select s; 
     foreach (var sb in list) 
     { 
      if (sb.cin == id) 
      { 
       subscriber.cin = sb.cin; 
       subscriber.name = sb.name; 
       subscriber.birthday = (DateTime)sb.birthDay; 
       subscriber.birthplace = sb.birthPlace; 
      } 
     } 
     return View(subscriber); 
    } 
} 

我的索引視圖：

@model IEnumerable<_3SDWebProject.Models.SubscribersModel> 

@{ 
    ViewBag.Title = "Subscribers"; 
} 
    <div class="sidebar"> 
     //here i want to show my details view 
    </div> 
<div class="content" style="width: 700px; margin-left: 250px; height: 545px;margin- top: -30px;"> 
    <h2>Subscribers</h2> 
<p> 
    @Html.ActionLink("Create New", "Create") 
</p> 

@Styles.Render("~/Content/css") 
<script src="@Url.Content("~/Scripts/Table.js")" type="text/javascript"></script> 
<table class="altrowstable" id="alternatecolor"> 
<tr> 
    <th> 
     CIN 
    </th> 
    <th> 
     Name 
    </th> 
    <th> 
     birthday 
    </th> 
    <th> 
     birthplace 
    </th> 
    <th class="operations"> 
     Operations 
    </th> 
</tr> 

@foreach (var item in Model) 
{ 
<tr> 
    <td> 
     @Html.DisplayFor(modelItem => item.cin) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.name) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.birthday) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.birthplace) 
    </td> 
    <td> 
     @Html.ActionLink("Details", "Details", new { id = item.cin }, new { @class = "details-logo"}) 
    </td> 
</tr> 
} 

</table> 
</div> 

我詳細查看：

@model _3SDWebProject.Models.SubscribersModel 

<fieldset> 
<legend>SubscribersModel</legend> 

<div class="display-label"> 
    @Html.DisplayNameFor(model => model.name) 
</div> 
<div class="display-field"> 
    @Html.DisplayFor(model => model.name) 
</div> 
<div class="display-label"> 
    @Html.DisplayNameFor(model => model.birthday) 
</div> 
<div class="display-field"> 
    @Html.DisplayFor(model => model.birthday) 
</div> 

<div class="display-label"> 
    @Html.DisplayNameFor(model => model.birthplace) 
</div> 
<div class="display-field"> 
    @Html.DisplayFor(model => model.birthplace) 
</div> 
</fieldset> 

所以請，如果有人有任何想法或解決方案，我將非常感激： 注：此圖片描述我想要什麼

Answer 1

創建包含這兩種視圖模型的新的複合視圖模型。

public class CompoundViewModel 
{ 
    public IEnumerable<SubscribersModel> AllSubscribers {get; set;} 
    public SubscribersModel SelectedSubscriber {get; set;} 
} 

理想的情況下也拆分視圖成局部視圖並使用DisplayFor<>或EditorFor<>呈現您的化合物模型的這兩個部分放進去。這樣，如果你需要的話，你可以在應用程序的其他地方重新使用該視圖作爲'SubscriberModel'。

您的控制器代碼也可以通過使用依賴注入框架（例如Autofac）來注入您當前正在創建的那些依賴關係。

另一種方法是，假設您使用相同的模型作爲列表和細節視圖，將使用Javascript來處理此客戶端，無論是手動使用jQuery還是使用允許客戶端的新框架之一模型綁定像Knockout.js或Angular.js。

Answer 2

你只需要創建第二個視圖，稱爲Details，這是強烈鍵入SubscribersModel

@model _3SDWebProject.Models.SubscribersModel 

任何地方的代碼視圖名稱右鍵單擊您的Details()行動
選擇添加視圖...
離開「詳細信息」
檢查「創建一個強類型的視圖」
從選擇SubscribersModel Model類下拉
腳手架模板：詳細
點擊「添加」