如何在MVC 5中显示同一视图的列表和详细信息

时间:2015-11-25 16:08:15

标签: c# asp.net-mvc entity-framework

我希望能够在同一个视图上显示List和详细信息,我使用的是一个结合了两个视图/模型的属性的viewmodel,我正在使用tab控件,我希望能够显示详细视图第二个选项卡上的第一个选项卡和列表以及列表。我试过这个:

 var clientInfo = (from c in db.Customers
                          join a in db.Addresses
                              on c.ClientId equals a.CustomerId 
                          where c.RowId == 19
                          select new
                          {
                              // corporate starts here
                              c.ClientId,
                              c.ClientGroup,
                              c.ClientCategory,
                              c.ClientType,
                              c.ContactName,
                              c.OrgName,
                              c.Branch,                                

//Address Starts here
                              a.AddressLine1,
                              a.AddressLine2,
                              a.State,
                              a.City,
                              a.CreatedDate,
                              a.ModifiedDate

                          }).FirstOrDefault();

        return View(clientInfo);

查看客户详细信息:

<dt>
                                               @Html.DisplayNameFor(model => model.ClientType)
                                           </dt>

                                           <dd>
                                               @Html.DisplayFor(model => model.ClientType)
                                           </dd>

                                           <dt>
                                               @Html.DisplayNameFor(model => model.ClientId)
                                           </dt>

                                           <dd>
                                               @Html.DisplayFor(model => model.ClientId)
                                           </dd>

                                           <dt>
                                               @Html.DisplayNameFor(model => model.Email)
                                           </dt>

                                           <dd>
                                               @Html.DisplayFor(model => model.Email)
                                           </dd>

查看地址:

<table class="table table-hover" id="sample-table-1">

                                           <tr>
                                               <th class="hidden-xs">
                                                   @Html.DisplayNameFor(model => model.ClientId)
                                               </th>
                                               <th class="hidden-xs">
                                                   @Html.DisplayNameFor(model => model.AddressLine1)
                                               </th>
                                               <th class="hidden-xs">
                                                   @Html.DisplayNameFor(model => model.AddressLine2)
                                               </th>
                                               <th class="hidden-xs">
                                                   @Html.DisplayNameFor(model => model.State)
                                               </th>

                                               <th class="hidden-xs">
                                                   @Html.DisplayNameFor(model => model.City)
                                               </th>
                                               <th class="hidden-xs">
                                                   @Html.DisplayNameFor(model => model.CreatedDate)
                                               </th>
                                               <th class="hidden-xs">
                                                   @Html.DisplayNameFor(model => model.ModifiedDate)
                                               </th>
                                               <th class="hidden-xs">
                                                   User Action
                                               </th>
                                               <th class="hidden-xs"></th>
                                           </tr>

                                           @foreach(var item in Model)
                                           {
                                               <tr>
                                                   <td class="hidden-xs">
                                                       @Html.DisplayFor(modelItem => item.)
                                                   </td>
                                                   <td class="hidden-xs">
                                                       @Html.DisplayFor(modelItem => item.Firstname)
                                                   </td>
                                                   <td class="hidden-xs">
                                                       @Html.DisplayFor(modelItem => item.Othernames)
                                                   </td>
                                                   <td class="hidden-xs">
                                                       @Html.DisplayFor(modelItem => item.Email)
                                                   </td>

                                                   <td class="hidden-xs">
                                                       @Html.DisplayFor(modelItem => item.StateName)
                                                   </td>
                                                   <td class="hidden-xs">
                                                       @Html.DisplayFor(modelItem => item.LgaName)
                                                   </td>
                                                   <td class="hidden-xs">
                                                       <a href="@Url.Action("edit", "users", new { id = item. })" class="btn btn-xs btn-teal tooltips" data-placement="top" data-original-title="Edit">class="fa fa-edit"></a>
                                                       <a href="@Url.Action("details", "users", new { id = item.Id })" class="btn btn-xs btn-green tooltips" data-placement="top" data-original-title="View List">class="fa fa-eye"></a>
                                                        <a href="@Url.Action("delete", "users", new { id = item.Id })" class="btn btn-xs btn-bricky tooltips" data-placement="top" data-original-title="Delete">class="fa fa-trash-o"></a>
                                                   </td>
                                               </tr>
                                           }


                                       </table>

我希望能够在同一个视图中显示这个,我不知道这是怎么可能的,我将不胜感激。感谢

2 个答案:

答案 0 :(得分:3)

您可以创建一个包含IEnumerable和另一个模型的视图模型。 这将允许您列出表中的项目并显示其他模型的详细信息视图。

public class IndexViewModel{
   public IEnumerable<AddressListItem> List { get;set; }
   public ClientInfo Details {get;set;}
}

如果要显示列表中某个项目的详细信息,则必须创建操作或Javascript以将所选项目加载到详细信息视图中。

您可以创建两个新类来保存不同的属性。 然后将它们分配给操作中的IndexViewModel。 它可能看起来像这样:

public ActionResult Index()
{
     var model = new IndexViewModel();
     var clientInfo = (from c in db.Customers
                      join a in db.Addresses
                          on c.ClientId equals a.CustomerId 
                      where c.RowId == 19
                      select new ClientInfo
                      {
                          ClientId = c.ClientId,
                          ClientGroup = c.ClientGroup,
                          ClientCategory = c.ClientCategory,
                          ClientType = c.ClientType,
                          ContactName = c.ContactName,
                          OrgName = c.OrgName,
                          Branch = c.Branch,
                          AddressLine1 = a.AddressLine1,
                         AddressLine2 = a.AddressLine2,
                         State = a.State,
                         City = a.City,
                         CreatedDate = a.CreatedDate,
                         ModifiedDate = a.ModifiedDate
                       }).FirstOrDefault();
     model.Details = clientInfo;

     var addresses = (from a in db.Addresses 
                      where a.CustomerId == clientInfo.ClientId
                      select new AddressLineItem
                      {
                         AddressLine1 = a.AddressLine1,
                         AddressLine2 = a.AddressLine2,
                         State = a.State,
                         City = a.City,
                         CreatedDate = a.CreatedDate,
                         ModifiedDate = a.ModifiedDate
                       }).ToList();
     model.List = addresses;
     return View(model);
 }
 }

 public class ClientInfo{
    public int ClientId { get; set; }
    public string ClientGroup { get;set; }
    public string ClientCategory {get; set; }
    public string ClientType {get; set; }
    public string ContactName {get; set; }
    public string OrgName {get; set; }
    public string Branch {get; set; }
    public string AddressLine1 {get; set; }
    public string AddressLine2 {get; set; }
    public string State {get; set; }
    public string City {get; set; }
    public DateTime CreatedDate {get; set; }
    public DateTime ModifiedDate {get; set; }
}

public class AddressListItem{
    public string AddressLine1 {get; set; }
    public string AddressLine2 {get; set; }
    public string State {get; set; }
    public string City {get; set; }
    public DateTime CreatedDate {get; set; }
    public DateTime ModifiedDate {get; set; }
}

答案 1 :(得分:1)

我会将细节放在局部视图中并使用ajax更新它。