如何使用mvc 4多个模型创建视图?

时间:2013-04-25 15:40:13

标签: asp.net-mvc entity-framework razor asp.net-mvc-4

所以我在asp.net mvc 4项目中工作,我在我的视图中有一个问题,我想要的是创建一个具有2种不同类型模型的视图,第一个视图(Index)采用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>

所以,如果有人有任何想法或解决方案,我将非常感激: NB:这张照片描述了我想要的东西 enter image description here

2 个答案:

答案 0 :(得分:9)

创建一个包含这两种视图模型的新的复合视图模型。

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

理想情况下,您还可以将视图拆分为部分视图,并使用DisplayFor<>EditorFor<>将复合模型的这两部分渲染到其中。这样,如果需要,您可以在应用程序的其他位置重用“SubscriberModel”视图。

您的控制器代码也可以通过使用依赖注入框架(例如Autofac)来注入您正在创建的那些依赖项。

另一个替代方案,假设您使用相同的模型进行列表和详细信息视图,将使用Javascript处理此客户端,手动使用jQuery或允许客户端模型的一个较新框架绑定如Knockout.js或Angular.js。

答案 1 :(得分:0)

您只需要创建第二个名为Details的视图,该视图使用SubscribersModel

进行强类型输入
@model _3SDWebProject.Models.SubscribersModel

右键单击代码中Details()操作的任意位置 选择添加视图...
保留视图名称的“详细信息” 选中“创建强类型视图”
从Model类下拉列表中选择SubscribersModel 脚手架模板:详情
点击“添加”