Mask in table values

Question

I am looking for a way to create "Masks" for the values of my table in ASP.NET. Currently, I am displaying the values like this:

@model TB_RESUMO_GERAL
List<TB_RESUMO_GERAL> rg = (List<TB_RESUMO_GERAL>)ViewData["relatorioGeral"];
    .
    .
    .
<table class="table table-striped table-bordered">
        <tr>
            <th>Mês</th>
            <th>Val. Esperado</th>
            <th>Val. Adquirido</th>
            <th>Recebimento Mês</th>
            <th>Atraso</th>
            <th>Amortização</th>
            <th>Selic</th>
            <th>Premio selic</th>
            <th>Taxa Gestão</th>
            <th>Seguro</th>
            <th>Despesas</th>
            <th>Não identificados</th>
            <th>Valor Disponível</th>
            <th>Contratos Ativos</th>
        </tr>
        @foreach (TB_RESUMO_GERAL resumo in rg)
        {
            <tr>
                <td>@resumo.DT_MES_UTILIZACAO</td>
                <td><span class="money" /> @resumo.VL_ESPERADO</td>
                <td><span class="money" /> @resumo.VL_DISPONIVEL</td>
                <td><span class="money" /> @resumo.VL_RECEBIMENTO_MES</td>
                <td><span class="money" /> @resumo.VL_ATRASO</td>
                <td><span class="money" /> @resumo.VL_AMORTIZACAO</td>
                <td><span class="money" /> @resumo.VL_SELIC</td>
                <td><span class="money" /> @resumo.VL_PREMIO_SELIC</td>
                <td><span class="money" /> @resumo.VL_TAXA_GESTAO</td>
                <td><span class="money" /> @resumo.VL_SEGURO</td>
                <td><span class="money" /> @resumo.VL_DESPESAS</td>
                <td><span class="money" /> @resumo.VL_NAO_IDENTIFICADO</td>
                <td><span class="money" /> @resumo.VL_DISPONIVEL</td>
                <td><span class="money" /> @resumo.QTD_CONTRATOS_ATIVOS</td>
            </tr>
        }
    </table>

And the figures are coming out like this:

I would like to put points for thousands and commas for cents, in addition to take this time from the date. Ex (R$ 1.245,50) (02/2016).

Answer 1

Since you are using c#, what I would use in your case to not need to use another JS library would be:

For money values, it would turn into double and apply the Currency of String.Format("{0:C}",100) //sendo 100 = valor que você transformou em Double.

For date just convert into string by passing the format you want, remembering that it needs to be a DateTime, guy Date.ToString("dd/MM/yyyy"); See the example in the link below:

Example

Remember that the currency of Currency is related to the culture of your server or session. In the example is $USD because the server is American, I believe that on your PC will be R$

Answer 2

Good I’m using this plugin https://igorescobar.github.io/jQuery-Mask-Plugin/ where you open the src file => jquery.mask.js and matter to your project and make the proper reference.

in your view:

<script type="text/javascript" src="~/Scripts/jquery.mask.js"></script>

     @model TB_RESUMO_GERAL
    List<TB_RESUMO_GERAL> rg = (List<TB_RESUMO_GERAL>)ViewData["relatorioGeral"];
        .
        .
        .
    <table class="table table-striped table-bordered">
            <tr>
                <th>Mês</th>
                <th>Val. Esperado</th>
                <th>Val. Adquirido</th>
                <th>Recebimento Mês</th>
                <th>Atraso</th>
                <th>Amortização</th>
                <th>Selic</th>
                <th>Premio selic</th>
                <th>Taxa Gestão</th>
                <th>Seguro</th>
                <th>Despesas</th>
                <th>Não identificados</th>
                <th>Valor Disponível</th>
                <th>Contratos Ativos</th>
            </tr>
            @foreach (TB_RESUMO_GERAL resumo in rg)
            {
                <tr>
                    <td><span class ="date">@resumo.DT_MES_UTILIZACAO</td>
                    <td><span class="money" /> @resumo.VL_ESPERADO</td>
                    <td><span class="money" /> @resumo.VL_DISPONIVEL</td>
                    <td><span class="money" /> @resumo.VL_RECEBIMENTO_MES</td>
                    <td><span class="money" /> @resumo.VL_ATRASO</td>
                    <td><span class="money" /> @resumo.VL_AMORTIZACAO</td>
                    <td><span class="money" /> @resumo.VL_SELIC</td>
                    <td><span class="money" /> @resumo.VL_PREMIO_SELIC</td>
                    <td><span class="money" /> @resumo.VL_TAXA_GESTAO</td>
                    <td><span class="money" /> @resumo.VL_SEGURO</td>
                    <td><span class="money" /> @resumo.VL_DESPESAS</td>
                    <td><span class="money" /> @resumo.VL_NAO_IDENTIFICADO</td>
                    <td><span class="money" /> @resumo.VL_DISPONIVEL</td>
                    <td><span class="money" /> @resumo.QTD_CONTRATOS_ATIVOS</td>
                </tr>
            }
        </table>

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->


$(document).ready(function () {
   $(".data").mask("99/99/9999");
   $(".money").mask("R$###.###.###,##");
});

Answer 3

I appreciate the help from all! I had trouble using String.Format("{0:C}", ValorDinheiro), so I made a method to assemble my mask. I hope it helps others:

public static string FormataDinheiro(string dinheiro) {
        string retorno = ""; int diferença = 2; int length = dinheiro.Length;

        if(length > 2){
            if(length < 6){
                retorno = dinheiro.Substring(0, length - diferença) + "," + dinheiro.Substring(length - diferença, 2);
                diferença = length;
            }else{
                retorno = "," + dinheiro.Substring(length - diferença, 2);
            }
        }
        while((length - diferença) > 0){
            if(diferença + 3 < length){
                diferença += 3;
                retorno = "." + dinheiro.Substring(length - diferença, 3) + retorno;
            }
            else{
                retorno = dinheiro.Substring(0, length - diferença) + retorno;
                diferença = length;
            }
        }
        return retorno;
    }

As for the date, I used String DataComMascara = Date.ToString("dd/MM/yyyy") according to Leonardo Bonetti’s tip and worked perfectly!