Hiển thị dữ liệu từ cơ sở dữ liệu SQL trong GridView

Question

Tôi muốn hiển thị dữ liệu trong chế độ xem lưới bằng cách sử dụng 3 bảng trong cơ sở dữ liệu SQL.

đầu tiên tôi tạo mẫu

public class common 
    { 

     public Artist Artist { get; set; } 
     public Album Album { get; set; } 
     public Genre Genre { get; set; } 

    } 

Sau đó Đây là Controller

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()); 
    } 

} 

Sau rằng đây là quan điểm của tôi

@model IEnumerable<test1.Models.common> 


@{ 
    ViewBag.Title = "Show1"; 
} 

<h2>Show1</h2> 

<div> 

@{ 

    var grid = new WebGrid(Model, defaultSort:"Name"); 

} 

@grid.GetHtml() 

</div> 

Nhưng nó không hiển thị bất kỳ dữ liệu? Tôi có thể làm như thế nào?

Answer 1

tôi nghĩ rằng bạn cần một editorTemplate cho mô hình đối tượng chung của bạn hoặc sử dụng một cho câu và cư một bảng html

ví dụ ...

<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

Tôi tin rằng câu trả lời tốt nhất để bạn câu hỏi là một câu hỏi khác: "Tại sao một WebGrid?"

Nếu bạn tham khảo chức năng mặc định của một mới cr ăn dự án MVC, bạn sẽ thấy rằng Index.cshtml sẽ sử dụng một bảng (như được đề xuất trong câu trả lời được cung cấp bởi @hagensoft). Nó đã được kinh nghiệm của tôi rằng khi các mặt hàng được đúng giàn giáo cho một dự án MVC trong Visual Studio tôi đã phải làm rất ít công việc để có được danh sách các mô hình để hiển thị độc đáo, thậm chí phân trang nếu cần thiết.

Để tận dụng tốt hơn việc phân trang, nếu đó là những gì bạn đang làm sau, tôi đã sử dụng tuyệt vời gói PagedList.MVC có sẵn thông qua NuGet (https://www.nuget.org/packages/PagedList.Mvc/). Có rất nhiều tài liệu liên quan đến chức năng được cung cấp bởi PagedList, và PagedList, cùng với hành vi bảng gợi ý/xem mặc định với các dự án MVC mới trong Visual Studio, hoạt động cùng với bất kỳ chức năng sắp xếp, tìm kiếm hoặc tương tự nào bạn muốn để cung cấp trong ứng dụng của bạn.

Một hướng dẫn tuyệt vời mà tôi tham khảo về phân loại, lọc, và Paging có thể được tìm thấy ở đây: 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

Nếu bạn khăng khăng về việc sử dụng một WebGrid/GridView, tôi sẽ đề nghị có lẽ di chuyển các cuộc gọi cơ sở dữ liệu ra khỏi điều khiển và trực tiếp vào chế độ xem Dao cạo, hoặc thử gửi lại một ObervableCollection <>, không phải là Danh sách <>, của một ViewModel chuyên dụng từ Bộ điều khiển.

Đạo đức của câu chuyện ở đây là không mạo hiểm xa con đường được cung cấp. Hãy thử sử dụng các công cụ được cung cấp cho bạn và làm theo định dạng mặc định cho các dự án MVC.

Answer 3

Đầu Thêm Jquery theo quan điểm của bạn

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

Nếu bạn muốn phong cách Thêm 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> 

Thêm mẫu theo quan điểm của bạn

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

Thêm Mã theo quan điểm của bạn

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

Chỉnh sửa phần này Theo chi tiết mô hình của bạn

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

     }