ASP.NET WP - WebGrid-alljchome-开发者的教程家园

ASP.NET WP Tutorial

ASP.NET WP Useful Resources

Selected Reading

ASP.NET WP - WebGrid

In the previous chapters of databases, we have displayed database data by using a razor code, and doing the HTML markup ourselves. But in ASP.NET Web Pages while using a Razor, we also have an easier way to display data by using the WebGrid helper.

This helper can render an HTML table for you that displays data.

This helper supports options for formatting, for creating a way to page through the data.

In the WebGrid helper you can sort the data just by cpcking a column heading.

Let’s have a look into a simple example in which we will display the same data, but this time we will be using the WebGrid helper. In this example, we will create a copy of ListCustomers.cshtml file and then use the WebGrid instead of manually creating the table using HTML markup pke <tr> and <td> tags.

Display and Sort Data with WebGrid

We will need to create a CSHTML file to start with.

Enter CustomersWebGrid.cshtml in the name field and Cpck OK to continue.

Replace the following code in CustomersWebGrid.cshtml file.

@{
   var db = Database.Open("WebPagesCustomers");
   var selectQueryString = "SELECT * FROM Customers ORDER BY FirstName";
   var data = db.Query(selectQueryString);
   var grid = new WebGrid(data);
}

<!DOCTYPE html>
<html>
   
   <head>
      <title>Customers List</title>
      <style>
         table, th, td {
            border: sopd 1px #bbbbbb;
            border-collapse: collapse;
            padding: 2px;
         }
      </style>
   
   </head>
   <body>
      <h1>Customers List</h1>
      
      <span id = "grid">
         @grid.GetHtml()
      </span>
   
   </body>
</html>

As you can see that the code first opens the WebPagesCustomers database file and then creates a simple SQL query.

var selectQueryString = "SELECT * FROM Customers ORDER BY FirstName";

A variable named data is populated with the returned data from the SQL Select statement.

var data = db.Query(selectQueryString);

Then the WebGrid helper is used to create a new grid from data.

var grid = new WebGrid(data);

This code creates a new WebGrid object and assigns it to the grid variable. In the body of the page, you render the data using the WebGrid helper as shown in the following program.

<span id = "grid">
   @grid.GetHtml()
</span>

Now let’s run the apppcation and specify the following url − http://localhost:36905/CustomersWebGrid and you will see the following web page.

As you can see, by using the simplest possible code, the WebGrid helper does a lot of work when displaying and sorting the data.

In the above output, you can see that the data is sorted by FirstName, now you can easily sort the data by ID or LastName, etc. just by cpcking on the column header.

So let’s cpck on the ID column header and you will see that data is now sorted by ID as shown in the following screenshot.

The WebGrid helper can do quite a lot more as well pke formatting the columns and stypng the whole grid.

Let’s have a look into the same example, but this time, we will format the columns.

@{
   var db = Database.Open("WebPagesCustomers");
   var selectQueryString = "SELECT * FROM Customers ORDER BY FirstName";
   var data = db.Query(selectQueryString);
   var grid = new WebGrid(data);
}

<!DOCTYPE html>
<html>
   
   <head>
      <title>Customers List</title>
      <style>
         table, th, td {
            border: sopd 1px #bbbbbb;
            border-collapse: collapse;
            padding: 2px;
         }
      </style>
   
   </head>
   <body>
      <h1>Customers List</h1>
      
      <span id = "grid">
         @grid.GetHtml(
            columns: grid.Columns(
               grid.Column("FirstName", format:@<i>@item.FirstName</i>),
               grid.Column("LastName", format:@<i>@item.LastName</i>),
               grid.Column("Address", format:@<text>$@item.Address</text>)
            )
         )
      </span>
   
   </body>
</html>

Now let’s run the apppcation and specify the following url − http://localhost:36905/CustomersWebGrid and you will see the following web page.

As you can see that the data in the FirstName and LastName columns are now displayed in the itapc format.

Let’s have a look into another simple example in which we will set the style of the whole grid by defining the CSS classes that specify how the rendered HTML table will look as shown in the following code.

@{
   var db = Database.Open("WebPagesCustomers");
   var selectQueryString = "SELECT * FROM Customers ORDER BY FirstName";
   var data = db.Query(selectQueryString);
   var grid = new WebGrid(data);
}

<!DOCTYPE html>
<html>
   
   <head>
      <title>Customers List</title>
      <style type = "text/css">
         .grid { margin: 4px; border-collapse: collapse; width: 600px; }
         .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
         .grid th, .grid td { border: 1px sopd #C0C0C0; padding: 5px; }
         .alt { background-color: #E8E8E8; color: #000; }
         .product { width: 200px; font-weight:bold;}
      </style>
   
   </head>
   <body>
      <h1>Customers List</h1>
      
      <span id = "grid">
         @grid.GetHtml(
            tableStyle: "grid",
            headerStyle: "head",
            alternatingRowStyle: "alt",
            columns: grid.Columns(
               grid.Column("FirstName", format:@<i>@item.FirstName</i>),
               grid.Column("LastName", format:@<i>@item.LastName</i>),
               grid.Column("Address", format:@<text>$@item.Address</text>)
            )
         )
      </span>
   
   </body>
</html>

Now let’s run the apppcation and specify the following url − http://localhost:36905/CustomersWebGrid and you will see the following web page.

ASP.NET WP - WebGrid

Display and Sort Data with WebGrid

友情链接