Wie verwende ich WebGrid in einer cshtml Ansicht?

Question

Ich bin in der Lage WebGrid in jedem Controller wie zu verwenden:

var grid = new WebGrid(emailsFetched, columnNames);

ich in meinem ASP.NET MVC-Projekt zu System.Web.Helpers hierfür einen Verweis hinzuzufügen hatte.

Aber wenn ich versuche, dieses Netzgitter in Ansicht direkt zu verwenden (Instanziierung und andere Einstellungen in der Steuerung zu vermeiden) heißt es: The type or namespace 'WebGrid' cannot be found. Ok, habe ich versucht, hier einen Verweis hinzufügen zu:

@using System.Web.Helpers aber dies wirft ein weiteres Problem:

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

Das ist ziemlich seltsam ... Ich habe genug Beispiel auf Netz gesehen, die verwenden WebGrid und müssen nichts in der cshtml Ansicht deklarieren ...

Können Sie mir bitte sagen, wie Sie das lösen? Oder warum ich auf dieses sehr hässliche Thema stoße?

Answer 1

Schließlich habe ich in der Lage gewesen, zu bemerken, dass dies:

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

in Web-Config hinzugefügt werden muss, unter system.web Abschnitt, withing compilation-Tags, so dass es aussehen wird:

<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

Versuchen Sie, die unten beschriebenen Schritte in einem ASP.NET MVC4 Projekt ohne Probleme zu folgen.

1) öffnen NuGet Package Manager in Visual Studio und „Microsoft-Web-Helfer“ und installieren Sie suchen.

2) Nach der Installation es web.config in Ihrer Lösung öffnen und connectionStringName Parameter ändern für DefaultMembershipProvider, DefaultRoleProvider ve DefaultSessionProvider (wenn Sie dies nicht tun, könnten Sie stoßen ‚DefaultConnection‘ wurde nicht in der Anwendungskonfiguration oder die Verbindungszeichenfolge gefunden ist leer. "Fehler.

3) Bauen Sie Ihr Projekt neu auf und verwenden Sie dann eine ähnliche Definition wie unten in Ihrer Rasiereransicht.

Hinweis: ändern "Titel", "Controller" und "Aktion" Namen in Html.ActionLinks nach Ihrem Projekt.

Ausblick:

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

Hier sind die css Klassen unten in Razor.Wenn Sie Ihre css Definitionen verwenden möchten, ändern Sie einfach die Stileigenschaften in Ihre (Einige Eigenschaften sind optional wie die in 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> 
} 

Hope this helps ...

Answer 3

in dieser Ausgabe Ran. Kann nicht wirklich Kredit nehmen, aber ich deinstalliert frühere Version und installierte die neueste Version von Microsoft ASP.NET MVC4 von Nuget und die Dinge funktionieren für mich. Hoffe das hilft jemand anderem. Versuchte alle Lösungen, aber das war das einzige, was funktionierte. http://forums.asp.net/t/1823940.aspx?MVC4+WebGrid+problem+in+View+Razor+