Come utilizzare WebGrid in una vista cshtml?

Question

Io sono in grado di utilizzare WebGrid in qualsiasi controllore come:

var grid = new WebGrid(emailsFetched, columnNames);

ho dovuto aggiungere un riferimento nel mio progetto ASP.NET MVC per System.Web.Helpers per questo.

Ma quando provo ad usare questa griglia web in vista direttamente (per evitare di istanze e altre impostazioni nel regolatore) si dice: The type or namespace 'WebGrid' cannot be found. Ok, ho cercato di aggiungere un riferimento anche qui:

@using System.Web.Helpers ma questo getta un altro problema:

There is no build provider registered for the extension '.cshtml'. You can register one in the <compilation><buildProviders> section in the machine.config or web.config. Make sure is has a BuildProviderAppliesToAttribute attribute which includes the value 'Web' or 'All'.

Questo è abbastanza strano ... Ho visto abbastanza esempio sulla rete che utilizzano WebGrid e non devi dichiarare nulla nella vista cshtml ...

Puoi dirmi come risolvere questo? O perché incontro questo problema molto brutto?

Answer 1

Finalmente ho potuto notare che questo:

<assemblies> <add assembly="System.Web.Helpers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> </assemblies>

deve essere aggiunto in Web di configurazione, sotto system.web sezione withing compilation tag in modo che sarà del tipo:

<system.web> 
    <compilation debug="true" targetFramework="4.0"> 
     <assemblies> 
      <add assembly="System.Web.Helpers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> 
     </assemblies> 
    </compilation> 
</system.web> 

Answer 2

Provare a seguire i passaggi seguenti precedentemente testati in un progetto ASP.NET MVC4 senza alcun problema.

1) Aprire NuGet Package Manager in Visual Studio e cercare “microsoft-web-helper” e installare.

2) Dopo l'installazione aprire web.config nella soluzione e cambiare connectionStringName parametri per DefaultMembershipProvider, DefaultRoleProvider ve DefaultSessionProvider (se non lo fai, si potrebbero incontrare 'DefaultConnection' non è stato trovato nella configurazione delle applicazioni o la stringa di connessione è vuoto. "

3) Ricostruisci il tuo progetto e poi usa una definizione smilar come sotto nella tua vista del rasoio.

Nota: Change "Titolo", "Controller" e "Azione" nomi Html.ActionLinks in base al vostro progetto.

Vista:

@{ 
var grid = new System.Web.Helpers.WebGrid(
    source: Model, 
    columnNames: new List<string>() { "Title" }, 
    ajaxUpdateContainerId: "myGrid", 
    defaultSort: "Name", 
    canPage: true, 
    canSort: true, 
    rowsPerPage: 5 
    ); 
grid.SortDirection = SortDirection.Ascending; 
} 


@grid.GetHtml(
     tableStyle: "table", /*your class name for this property*/ 
     headerStyle: "webgrid-header",/*your class name for this property*/ 
     footerStyle: "webgrid-footer", /*your class name for this property*/ 
     rowStyle: "webgrid-row-style", /*your class name for this property*/ 
     alternatingRowStyle: "webgrid-alternating-row",/*your class name...*/           selectedRowStyle: "webgrid-selected-row",/*your class name for this property*/ 

     firstText: "<<", 
     lastText: ">>", 
     mode: WebGridPagerModes.All, 
     fillEmptyRows: true, 

     columns: grid.Columns(
     grid.Column("ApplicantID", "No", style: "span1", canSort: true), 
     grid.Column("Name", "Name", style: "span2", canSort: true), 
     grid.Column("Surname", "Surname", style: "span2", canSort: true), 
     grid.Column("Organization", "Org.", style: "span2", canSort: true), 
     grid.Column("MeetingId", "Meeting", style: "span1", canSort: true), 
     //some format usage samples: 
     //grid.Column("Email", "e-mail", style: "span1", canSort: true, format: @<a href="mailto:@item.Email">@item.Email</a>), 
     //grid.Column("BirthDate", format: p=>p.BirthDate.ToShortDateString()), 

//for using multiple Html.ActionLink in a column using Webgrid 
grid.Column("Operations", format: (item) => 
new HtmlString(
     Html.ActionLink("Show Details", "Edit", "Admin", new 
     { 
      applicantId = item.ApplicantID,    
      title = "Detail", 
      @class = "icon-link", 
      style = "background-image: url('../../Content/icons/detail.png')" 
     }, null).ToString() + 
     Html.ActionLink("Edit Record", "Edit", "Admin", new 
     { 
      applicantId = item.ApplicantID, 
      title = "Edit", 
      @class = "icon-link", 
      style = "background-image: url('../../Content/icons/edit.png')" 
     }, null).ToString() + 
     Html.ActionLink("Delete Record", "Edit", "Admin", new 
     { 
      applicantId = item.ApplicantID, 
      title = "Delete", 
      @class = "icon-link", 
      style = "background-image: url('../../Content/icons/delete.png')" 
     }, null).ToString() 
) 
) 
), 
numericLinksCount: 5 
) 

Ecco le css classi di seguito utilizzato in Razor.Se desideri utilizzare le tue definizioni css, modifica semplicemente le proprietà di stile a quelle del tuo (alcune proprietà sono opzionali come quelle nello Razor View).

<style type="text/css">  
    .webgrid-operations { /*for limiting the width of Operations 
          menu used in the WebGrid*/ 
    width: 65px; 
} 

.webgrid-header td { 
    text-align: left; 
} 

.webgrid-header th { 
    background-color: #EFEFEF; 
    margin-bottom: 2px; 
} 

.webgrid td { 
    padding-right: 15px; 
} 

.webgrid-footer td { 
    font-family: 'open_sanssemibold', sans-serif; 
    font-size: 1em; 
    text-align: right !important; 
    padding-right: 21px !important; 
    color: #000; 
    background-color: #EFEFEF; 
} 

    .webgrid-footer td a { 
     text-align: right !important; 
     padding: 0 .4em 0 .4em; 
     font-size: .83em; 
     text-decoration: none; 
     color: #FFFFFF; 
     border: 1px solid #C0C0C0; 
     background-color: #808080; 
    } 

     .webgrid-footer td a:hover { 
      background-color: #6BBEC7; 
     } 

     .webgrid-footer td a.selected { 
      background-color: #f00; 
      color: #f00; 
     } 

.webgrid a { 
    color: #fff; 
} 

.colRowButton { 
    width: 70px; 
    text-align: left; 
} 

.webgrid-row-style { 
    /*border-bottom: 1px solid #E8EEF4;*/ 
} 

.webgrid-alternating-row td { 
    /*background-color: #f9f9f9;*/ 
} 

.webgrid-selected-row { 
    /*font-weight: bold;*/ 
}  

<style type="text/css"> 
    a.icon-link { 
     background-color: transparent; 
     background-repeat: no-repeat; 
     background-position: 0px 0px; 
     border: none; 
     cursor: pointer; 
     width: 16px; 
     height: 16px; 
     margin-right: 8px; 
     vertical-align: middle; 
    } 

    .span5 { 
    width:380px 
    } 
    .span4 { 
    width:300px 
    } 
    .span3 { 
    width:220px 
    } 
    .span2 { 
    width:140px 
    } 
    .span1 { 
    width:60px 
    } 
    </style> 
} 

Spero che questo aiuti ...

Answer 3

imbattuto in questo problema. Non posso davvero prendere il merito, ma ho disinstallato la versione precedente e reinstallato l'ultima versione di Microsoft ASP.NET MVC4 da Nuget e le cose stanno funzionando per me. Spero che questo aiuti qualcun altro. Ho provato tutte le soluzioni, ma questa era l'unica cosa che funzionava. http://forums.asp.net/t/1823940.aspx?MVC4+WebGrid+problem+in+View+Razor+