在 Gridview 中显示 SQL 数据库中的数据

Question

我想使用 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>

但它没有显示任何数据？ 我该怎么做？

Answer 1

我认为您的公共对象模型需要一个 editorTemplate 或使用 for 语句并填充 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>

Answer 2

我相信对您问题的最佳回答是另一个问题：“为什么是 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 视图本身，或者尝试发回 ObervableCollection，而不是 List，来自 Controller 的专用 ViewModel。

这里故事的寓意是不要冒险远离提供的路径。尝试使用提供给您的工具并遵循 MVC 项目的默认格式。

Answer 3

首先在你的视图中添加 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 />

         }

Answer 4

由于您的模型，它没有显示任何内容。 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...

}