如何用多个模型创建视图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类下拉
脚手架模板：详细
点击“添加”