Mask with ASP.NET Core MVC

Question

I’m doing a job for college with Asp.net core MVC, and I’m using the Entity to generate the view and queries in BD. I need to put masks in the fields such as CNPJ. I was able to search on Google how to put mask, but when I try to create a record, it error because of the mask.

I wanted to know how to take off the mask and send to the comic only the numbers.

View:

<div class="col-md-4">
    <form asp-action="Create">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="RazaoSocial" class="control-label"></label>
            <input asp-for="RazaoSocial" placeholder="Razão Social" class="form-control" , />
            <span asp-validation-for="RazaoSocial" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="NomeFantasia" class="control-label"></label>
            <input asp-for="NomeFantasia" placeholder="Nome Fantasia" class="form-control" />
            <span asp-validation-for="NomeFantasia" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Cnpj" class="control-label"></label>
            <input asp-for="Cnpj" placeholder="Somente Numero" data-mask="00.000.000/0000-00" data-mask-reverser="false" class="form-control" />
            <span asp-validation-for="Cnpj" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Ie" class="control-label"></label>
            <input asp-for="Ie" placeholder="Somente Numero" class="form-control" />
            <span asp-validation-for="Ie" class="text-danger"></span>
        </div>
        <div class="form-group">
            <input type="submit" value="Avançar" class="btn btn-default" />
        </div>
    </form>
</div>

Controller

[HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create([Bind("EmpresaId,RazaoSocial,NomeFantasia,Cnpj,Ie")] Empresa empresa)
    {

        if (ModelState.IsValid)
        {

            _context.Add(empresa);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return View(empresa);
    }

Answer 1

You can clear the CNPJ field by removing the special characters before sending them to the database. To do this, create a method for them. Add the following method to your Controller:

private string ClearCNPJ(string cnpj)
{
   return cnpj.Replace(".", string.Empty).Replace("-", string.Empty).Replace("/", string.Empty);
}

To be used within the method Create, put as follows:

if (ModelState.IsValid)
{
    empresa.Cnpj = ClearCNPJ(empresa.Cnpj);
    _context.Add(empresa);
    await _context.SaveChangesAsync();
    return RedirectToAction(nameof(Index));
}

return View(empresa);    

Or you can create an extension method that can be used in any string created. Create a class static same as the example below.

 public static class StringExtensions
 {
     public static string ClearCNPJ(this string value)
     {
          return value.Replace(".", string.Empty).Replace("-", string.Empty).Replace("/", string.Empty);
     }
 }

In the class you will use (Controller in your case), put the directive using:

using seuprojeto.StringExtensions;

And to use, within the method Create, put as follows:

if (ModelState.IsValid)
{
    empresa.Cnpj = empresa.Cnpj.ClearCNPJ();
    _context.Add(empresa);
    await _context.SaveChangesAsync();
    return RedirectToAction(nameof(Index));
}

return View(empresa);