在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您的公共對象模型 或使用句子和填充一個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？」

如果你指的新的默認功能CR eated MVC項目，你會看到Index.cshtml將使用一個表格（如@hagensoft提供的答案中所建議的）。我的經驗是，當項目在Visual Studio中正確搭建MVC項目時，我不得不做很少的工作來讓模型列表很好地顯示，甚至在必要時分頁。

爲了更好地利用分頁的，如果這是你所追求的，我已經取得了很大的利用通過的NuGet可在PagedList.MVC包（https://www.nuget.org/packages/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而不是列表<>。

這裏故事的寓意是不要冒險遠離提供的路徑。嘗試使用提供給您的工具，並遵循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 /> 

     }