CODEWITHSUNDEEP
asp.net-mvcvb.netrazor
Alan
Alan

Reputation: 1637

How do I insert spaces within a razor Code block?

VS2013, MVC5, Razor, VB

I want spaces in front of the word 'Answered'. How do I force spaces into the following Razor code block?

@Code If Model.DisplayAnsweredFlag Then
  @If Model.Answered Then
    @Html.Raw("Answered")
   End If
 End If
End Code

In html.raw(), spaces by themselves or spaces in of front text don't seem to get coded into the page. But I also can't use '&nbsp' or '@&nbsp' in a Code Block because it's incorrect syntax.

If I'm coding with a poor technique, please advise, or if there is a different way to get the spaces in, please advise.

Upvotes: 17

Views: 58566

Answers (5)

NoWar
NoWar

Reputation: 37633

I use this approach when I need to display a structure in the table.

The item has precalculated the level property.

@helper PrintChild(List<ItemBalanceView> items)
{
    foreach (var item in items)
    {
        <tr>
            <td>@Html.Raw(InsertSpaces(item.LevelNum))<a class="text-primary" href='@Url.Content("~/Items/DetailsPos/")@item.ItemDocDetailID'>@item.ItemDocDetailName</a></td>
            <td>@Math.Round(item.Qty, 2)</td>
            <td>@Math.Round(item.Price, 2)</td>
            <td>@Math.Round(item.Total, 2)</td>
        </tr>

        if (item.Children != null)
        {
            @PrintChild(item.Children)
        }
    }
}

@functions  
{
    string InsertSpaces(int level)
    {
        var str = string.Empty;
        for (int i = 0; i < level; i++)
        {
            str += "&nbsp;&nbsp;";
        }

        return str;
    }
}

<table class="table table-sm">
    <thead>
        <tr>
            <th>Name</th>
            <th>Qty</th>
            <th>Price</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.BalancesAsStructure)
        {
            <tr>
                <td>@Html.Raw(InsertSpaces(item.LevelNum))<a class="text-primary" href='@Url.Content("~/Items/DetailsPos/")@item.ItemDocDetailID'>@item.ItemDocDetailName</a></td>
                <td>@Math.Round(item.Qty, 2)</td>
                <td>@Math.Round(item.Price, 2)</td>
                <td>@Math.Round(item.Total, 2)</td>
            </tr>

            if (item.Children != null)
            {
                @PrintChild(item.Children)
            }
        }
    </tbody>
    <tfoot>
        <tr style="background-color:#d7c0c0!important;">
            <th></th>
            <th></th>
            <th></th>
            <th>@Math.Round(Model.Total, 2)</th>
        </tr>
    </tfoot>
</table>

Upvotes: 2

Subhash Saini
Subhash Saini

Reputation: 274

<text> &nbsp; &nbsp; &nbsp;</text>

Insert "&nbsp;" to add more blank spaces.

Upvotes: 9

MikeTeeVee
MikeTeeVee

Reputation: 19392

AndyBuk gave the answer here:
https://forums.asp.net/t/1772048.aspx?How+to+use+no+break+space+HTML+character+inside+if+brackets+in+a+view+

In that link he writes:

The introduction to Razor syntax at:
http://www.asp.net/web-pages/tutorials/basics/2-introduction-to-asp-net-web-programming-using-the-razor-syntax is quite useful.
To force html output for your string, you may use <text> to Block or @: as a Prefix.

@if (condition)
{
    <text>&nbsp;</text>
    @:&nbsp;
}

Upvotes: 40

Chris Pratt
Chris Pratt

Reputation: 239290

Spaces are ignored when parsing HTML, unless they occur within a pre block. If you want to pad some text, you need to take one of the following approaches:

  1. Wrap it in a block-level HTML element like p or div, and then add padding/margin to the element using CSS. This is the recommended approach.

  2. Use &nbsp; in place of the regular spaces you're trying to pad with. Only non-breaking spaces are counted when rendering HTML. However, this approach is hacky and not recommended.

  3. Wrap your text in a pre element. Then all whitespace within the <pre> and </pre> tags will be taken into account. However, this approach is also hacky and not recommended.

Upvotes: 22

Sameer Alibhai
Sameer Alibhai

Reputation: 3178

Why don't you try a different approach. Use a span tag with some padding on it

Upvotes: 2

Related Questions