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

Posted 2023-04-01

【中文标题】在 Gridview 中显示 SQL 数据库中的数据

【英文标题】：Show data from SQL database in Gridview

【发布时间】：2012-08-31 22:55:00

【问题描述】：

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

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

【问题讨论】：

我没有看到你定义 webgrid 的任何地方。

【参考方案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>

【讨论】：

我认为你错过了这个问题...又名 WebGrid 部分

【参考方案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 项目的默认格式。

【参考方案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
            .selectbackground-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 />

         

【参考方案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...