A Custom WebGrid (My 1st Iteration)


To display tabular data in ASP.NET MVC (I’m using MVC 4 at the time), I used the web helper WebGrid.  It has sorting and paging but no filtering.  Also sorting and paging is only client-side and not server-side, meaning all the data is requested from the server and sorted and paged on the client.  Because of these limitations I had to customize WebGrid and this demo is my first iteration.

Here in this demo I used Entity Framework to get my data access layer going.  I used the Adventure Works 2008R2 SQL database, the light version.  Here I am displaying the Products table.  To get my UI going, I used the default template that comes with Visual Studio 2010 and it uses jQuery UI.  My second iteration of this custom WebGrid will be using Bootstrap and is still in the works, just FYI.

If you find that you cannot reference WebGrid in your view, there is a chance that System.Web.Helpers is not added to your References.  Add that and set Copy Local to True.  Search Google if you are having problems with this.

You can copy and paste the code into your own project but you have to change the column names in the WebGrid, add these same columns to sort on in the controller, and change the fields you want to filter on in both view and controller.  Also, you can change the default page size in the FilterSortPageInfo class.  Oh by the way, this is a read-only WebGrid and there is no edit or add functionality.  Cheers!


The Very Basic Syntax of Razor

If you have worked in ASP.NET MVC, you know that the default view engine (or templating engine) is Razor, much like the .aspx/.ascx/.master file templates in ASP.NET Web Forms.  One thing I like about Razor is that you can use C# or VB.NET as the programming language to code in Razor.  All you need to do is learn how to use the Razor syntax.

So here I present to you the very basic syntax you need to know about Razor.  In the code below I am using C#, my preferred language.  You can view the generated HTML page here.

<h1>Razor Demo Using C#</h1>
   Razor comments can be one line or multiple lines.
   Unlike HTML comments, Razor comments are not rendered to the page.
   @* You can add Razor comments inside the Razor code block such as this. *@
   // But why use Razor comments when you can use C# comments.
    * C# multi-line comment
   Razor code starts with @ character.
   It can be a single statement block, an inline expression,
    or a multi-statement block.
   Once you start your code with @, all of the .NET framework,
    ASP.NET, and all the C# features are available to you.
@* An example of a Razor single statement block: *@
@{ var myGreeting = "<Hello, World!>"; } 
   Below is an example of a Razor inline expression.
   Note that the output from server code is automatically HTML-encoded.
    < and > characters in the variable myGreeting will automatically
    be encoded to &lt; and &gt; so it can be displayed properly
    in the browser.  You can check the page source to verify this.
<p>The value of myGreeting is: @myGreeting</p>
   A Razor inline expression can be multi-token if enclosed in ()
    as in example below.
   Note that () can also be used to explicitly declare a Razor
    inline expression.
<p>@("The value of myGreeting is: " + myGreeting)</p>
@* Here is an example of a Razor multi-statement block *@
    var myGreeting2 = "Hello, Universe!";
    var myDate = DateTime.Today.ToString("MMMM dd, yyyy");   
<p>@myGreeting2 Today is @myDate.</p>
    You will notice in the previous examples of Razor code blocks, 
     be they single or multi-statement blocks, are enclosed in {}.
     They don't have to be always enclosed in {}.
     Take for example the if statement below.  
     Since it is essentially a single statement, 
     it can follow the @ character immediately.
     The same goes with for, foreach, switch, etc.
@{ var myMsg = ""; }
@if (IsPost) 
    myMsg = "This is a postback!";
    myMsg = "This is not a postback.";
    You can also mix text and markup in the code block.
@if (true)
    // Mixing markup in code is as easy as putting in the matching HTML tags.
    <p>The value of IsPost is: @IsPost</p>
    // You can use @: or <text> to render plain text.
    // If you check the page source, these plain texts are not enclosed in
    //  any HTML tags.
    @:This is plain text.
    <br />
    <text>Another plain text.</text>
    <br />
    <br />

Additional Resources:

ASP.NET: Beginner’s Resource on MVC 4, Entity Framework, and Razor

New to MVC 4/Entity Framework/Razor?  Then here are some links that are useful: