如何在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>
我想能够在同一个视图上显示这一点，我不知道这怎么可能，我将感谢任何帮助。感谢
您可以创建一个同时包含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进行更新。