Mostra dati dal database SQL in Gridview

Question

Desidero visualizzare i dati nella visualizzazione griglia utilizzando 3 tabelle nel database SQL.

un primo momento ho creato Modello

public class common 
    { 

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

    } 

allora questo è il 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()); 
    } 

} 

Dopo di che questo è il mio Vedi

@model IEnumerable<test1.Models.common> 


@{ 
    ViewBag.Title = "Show1"; 
} 

<h2>Show1</h2> 

<div> 

@{ 

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

} 

@grid.GetHtml() 

</div> 

Ma non mostra alcun dato? Come posso farlo?

Answer 1

penso che avete bisogno di un editorTemplate per il modello a oggetti comuni o utilizzare un per frase e di popolare una tabella HTML

per esempio ...

<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

Credo che la migliore risposta alla tua domanda è un'altra domanda: "Perchè un WebGrid?"

Se si fa riferimento alla funzionalità di default di una nuova cr mangiò il progetto MVC, vedrai che Index.cshtml userà una tabella (come suggerito nella risposta fornita da @hagensoft). È stata la mia esperienza che quando gli elementi sono correttamente impalcati per un progetto MVC in Visual Studio ho dovuto fare pochissimo lavoro per ottenere l'elenco dei modelli da visualizzare bene, anche impaginato se necessario.

Per utilizzare meglio l'impaginazione, se questo è ciò che cercate, ho fatto un grande uso del pacchetto PagedList.MVC disponibile tramite NuGet (https://www.nuget.org/packages/PagedList.Mvc/). Vi è abbondanza di documentazione correlata alla funzionalità fornita da PagedList e PagedList, insieme al comportamento suggerito dalla tabella/visualizzazione predefinita con i nuovi progetti MVC in Visual Studio, fa miracoli accanto a qualsiasi ordinamento, ricerca o funzionalità simile che desideri per fornire all'interno della tua app.

Un fantastico tutorial che mi riferisco a circa Ordinamento, filtraggio e Paging può essere trovato qui: 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

Se siete insistente sull'utilizzo di un WebGrid/GridView, vorrei suggerire forse spostare la chiamata di database fuori dalla controllore e direttamente nella vista Razor stessa, oppure provare a rinviare un oggetto ObervableCollection <>, non a un elenco <>, di un ViewModel dedicato dal controller.

La morale della storia qui è di non avventurarsi lontano dal percorso previsto. Prova a utilizzare gli strumenti che ti vengono forniti e segui il formato predefinito per i progetti MVC.

Answer 3

First Aggiungi Jquery nella vista

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

Se vuoi per lo stile aggiungere stile

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

Aggiungi modello nella vista

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

Aggiungere codice nella visualizzazione

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

modificare questa sezione Secondo i dati del modello

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

     }