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 或使用句子填充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＆lt;＆gt ;,而不是List＆lt;＆gt; ，来自Controller的专用ViewModel。

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

Answer 3

First Add Jquery in your view

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>

If you want to style Add Style

<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>

Add Model in your view

 @{
        test1.Models.common Common = new test1.Models.common();
    }

Add Code in your view

 @{
    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>

Edit this section According to your Model details

@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...

}

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

4 个答案: