Wie zu verwenden WebGrid in einer cshtml-Ansicht?

Versuchen, Folgen Sie den Schritten unten, die getestet worden waren, bevor Sie in eine ASP.NET MVC4 Projekt, ohne jedes problem.

1) Öffnen NuGet Package Manager im Visual Studio und Suche "microsoft-web-Helfer" und installieren.

2) Nach der Installation öffnen Sie web.config Ihrer Lösung und ändern connectionStringName parameter für DefaultMembershipProvider, DefaultRoleProvider ve DefaultSessionProvider (wenn Sie dies nicht tun, könnten Sie auf 'DefaultConnection' wurde nicht gefunden in den Anwendungen, die Konfiguration oder die Verbindung Zeichenfolge ist leer." - Fehler.

3) Ihr Projekt neu erstellen und dann verwenden Sie ein smilar definition wie unten in Ihre razor-Ansicht.

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

Anzeigen:

@{
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 unter verwendet in Razor. Wenn Sie möchten Ihre css Definitionen ändern Sie einfach die style-Eigenschaften zu, die von Euch (Einige Eigenschaften sind optional als diejenigen, die in der 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>
}

Hoffe, das hilft...