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

本文关键字:显示 列表 详细信息 视图 MVC | 更新日期: 2023-09-27 18:24:15

我想在同一个视图上显示列表和详细信息,我使用的是一个结合了两个视图/模型属性的视图模型,我使用选项卡控件,我想在第一个选项卡上显示详细信息,在第二个选项卡上显示列表和列表

 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>

我想能够在同一个视图上显示这一点,我不知道这怎么可能,我将感谢任何帮助。感谢

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

您可以创建一个同时包含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; }
}

我会将详细信息放在部分视图中,并使用ajax进行更新。