format a query output for html

Question

I am using MS WebMatrix to create a dynamic CSHTML page from data obtained from a database. I am using the razor syntax.

I have data being returned to my CSHTML page, but it has trailing digits etc. For example I want to format "123.4568" into "$123.46"

How do I get the result to display in the format I need? I also want to change text colour when a target is reached, etc.

You could use the `c` string format - see http://stackoverflow.com/questions/7087495/using-razor-view-engine-how-do-i-format-a-decimal-value-to-have-commas-and-two — sinelaw, Oct 11 '12 at 01:09
Sort of helpful, thanks. I can't get the code to accept my formatting so I am using the wrong syntax (again!) Here's the string as it stands: var itot = db.Query("SELECT SUM(SUBTOTAL) as Invoices from dbo.SALESORD_HDR where ORDERDATE = 41190 and INVOICECOUNT >= 1"); var stotl = new WebGrid(source: itot); var qtot = db.Query("SELECT SUM(SUBTOTAL) as Quotes FROM dbo.SALESORD_HDR where ORDERDATE > 41190"); var qtotl = new WebGrid(source: qtot); and then I render the results in the html thus:
@qtotl.GetHtml() @stotl.GetHtml() — Bevan, Oct 11 '12 at 01:35

GmG · Accepted Answer · 2012-10-11T21:45:05.667

You can set the format of values in a WebGrid using the format optional argument of the column constructor.

You could try something like this, where the color of Invoices is red if value > 50 or blue if not

<html lang="en">
    <head>
        <style>
            .column1 {color: red; font-weight: bold;}
            .column2 {color: blue;}
        </style>
    </head>
    <body>
        <p>@stot1.GetHtml(
            columns:stot1.Columns(
                stot1.Column(
                    columnName:"Invoices",
                    format:@<text>
                                <span class=@(item.Invoices > 50 ? "column1" : "column2")>
                                    @item.Invoices.ToString("C")
                                </span>
                            </text>
                )
            )
        )</p>
    </body>
</html>

but I see no reason to use WebGrids in your situation.

The WebGrid helper renders data from a database with support for paging and sorting, but your query returns only one value and you don't need either of them.

Edited

A better solution is to query the table with the QueryValue method, which returns a single scalar value, and display the value without the WebGrid.

In the following an example for the only Invoice

@{
    var db = Database.Open("YourTable");
    var itot = db.QueryValue("SELECT SUM(Subtotal) AS Invoices FROM Salesord_hdr where Orderdate = 41190 and Invoicecount >= 1");
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .column1 {color: red; font-weight: bold;}
            .column2 {color: blue;}
        </style>
    </head>
    <body>
        <p>Invoices: 
            <span class=@(itot > 50 ? "column1" : "column2")>@itot.ToString("C")</span>
        </p>
    </body>
</html>

OK, so how do I get it to display just the single result I am needing then? If i just insert the @var i get a string of code text. Sorry to be so thick, but what do I do to get the data to display how I want? And would I be better to use a pure HTML page instead of CSHTML and Razor? — Bevan, Oct 11 '12 at 20:41

format a query output for html

1 Answers1