我想在SQL数据库中使用3个表在网格视图中显示数据。
首先我创建了模型
public class common
{
public Artist Artist { get; set; }
public Album Album { get; set; }
public Genre Genre { get; set; }
}
然后这是控制器
public ActionResult Show1()
{
var query = from a in DB.Album
join b in DB.Artists
on a.ArtistId equals b.ArtistId
join c in DB.Genre
on a.GenreId equals c.GenreId
where (b.ArtistId == 2)
select new common { Album = a, Artist = b, Genre = c };
return View(query.ToList());
}
}
之后,这是我的观点
@model IEnumerable<test1.Models.common>
@{
ViewBag.Title = "Show1";
}
<h2>Show1</h2>
<div>
@{
var grid = new WebGrid(Model, defaultSort:"Name");
}
@grid.GetHtml()
</div>
但它没有显示任何数据?我该怎么做?
我认为您需要一个editorTemplate用于您的公共对象模型或使用一个句子并填充一个html表
例如...
<table summary="">
<thead>
<tr>
<th></th>
<th>
Account No.
</th>
<th>
Customer Name
</th>
<th class="SingleCheckBox">
Is Approved
</th>
<th class="SingleCheckBox">
Is Locked out
</th>
<th>
Last Login
</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < Model.Count(); ++i)
{
var item = Model[i];
bool isSelected = item.AccountNo == selectedAccountNo;
<tr>
<td>@Html.RadioButton("selectedUserName", item.UserName, isSelected, new { name = "selectedUserName" })</td>
<td>
@Html.DisplayFor(model => model[i].UserName)
@Html.HiddenFor(model => model[i].UserName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Email)
</td>
<td class="SingleCheckBox">
@Html.CheckBoxFor(model => model[i].IsApproved)
</td>
<td class="SingleCheckBox">
@if (item.IsLockedOut)
{
@Html.CheckBoxFor(model => model[i].IsLockedOut);
}
else
{
@Html.CheckBoxFor(model => model[i].IsLockedOut);
}
</td>
<td class="last-child">
@(TimeZoneInfo.ConvertTime(DateTime.SpecifyKind(item.LastLoginDate, DateTimeKind.Utc), timeZoneInfo).ToString())
</td>
</tr>
}
</tbody>
</table>
我相信你问题的最佳答案是另一个问题:“为什么选择WebGrid?”
如果您参考新创建的MVC项目的默认功能,您将看到Index.cshtml将使用一个表(如@hagensoft提供的答案中所建议的)。根据我的经验,当项目在Visual Studio中为MVC项目正确搭建时,我必须做很少的工作才能使模型列表很好地显示,甚至在必要时进行分页。
为了更好地利用分页,如果这就是你所追求的,我已经充分利用了NuGet(https://www.nuget.org/packages/PagedList.Mvc/)提供的PagedList.MVC包。有很多与PagedList和PagedList提供的功能相关的文档,以及Visual Studio中新的MVC项目的表建议/默认视图行为,可以在您想要的任何排序,搜索或类似功能的同时创建奇迹在您的应用程序内提供。
我在这里可以找到关于排序,过滤和分页的精彩教程:https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application
如果您坚持使用WebGrid / GridView,我建议可能将数据库调用从控制器中移出并直接进入Razor视图本身,或者尝试发回专用ViewModel的ObervableCollection <>,而不是List <>。来自控制器。
这里故事的寓意是不要冒险远离提供的路径。尝试使用提供给您的工具并遵循MVC项目的默认格式。
首先在视图中添加Jquery
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
如果要设置添加样式的样式
<style type="text/css">
.webGrid { margin: 4px; border-collapse: collapse; width: 500px; background-color:#FCFCFC;}
.header { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
.webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
.alt { background-color: #E4E9F5; color: #000; }
.gridHead a:hover {text-decoration:underline;}
.description { width:auto}
.select{background-color: #389DF5}
</style>
在视图中添加模型
@{
test1.Models.common Common = new test1.Models.common();
}
在您的视图中添加代码
@{
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow",ajaxUpdateContainerId: "gridContent");
grid.Pager(WebGridPagerModes.NextPrevious);}
<div id="gridContent">
@grid.GetHtml(tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
selectedRowStyle: "select",
columns: grid.Columns(
grid.Column("Id", "Id"),
grid.Column("Name", "Name"),
grid.Column("Description", "Description"),
))
@if (grid.HasSelection)
{
common= (test1.Models.common)grid.Rows[grid.SelectedIndex].Value;
<b>Id</b> @common.Artist.Id<br />
<b>Name</b> @common.Album.Name<br />
<b>Description</b> @common.Album.Description<br />
}
</div>
编辑此部分根据您的模型详细信息
@if (grid.HasSelection)
{
common= (test1.Models.common)grid.Rows[grid.SelectedIndex].Value;
<b>Id</b> @common.Artist.Id<br />
<b>Name</b> @common.Album.Name<br />
<b>Description</b> @common.Album.Description<br />
}
由于你的模型,它没有显示任何东西。 Webgrid不知道如何渲染您的Artist或Album或Genre表模型。
public ActionResult Show1()
{
var query = from a in DB.Album
join b in DB.Artists
on a.ArtistId equals b.ArtistId
join c in DB.Genre
on a.GenreId equals c.GenreId
where (b.ArtistId == 2)
select new common { AlbumName = a.AlbumName, ArtistName = b.ArtistName, GenreName = c.GenreName /* ... other props */ };
return View(query.ToList());
}
public class common
{
public string ArtistName { get; set; }
public string AlbumName { get; set; }
public string GenreName { get; set; }
//other props and not tables, use like string, int, decimal...
}