Calculando IMC usando ASP.NET Razor
Published: 2020-03-13 00:33:02

O tema do post de hoje é Calculando IMC usando ASP.NET Razor, sera abordado de forma detalhada e focada naqueles que estão iniciando com esta tecnologia.
Atualmente, criar páginas dinâmicas com ASP.NET C# ou Visual Basic .NET é possível graças ao Razor. Com ele podemos inserir blocos com lógicas de programação dentro da própria página que geralmente possui a extensão cshtml ou vbhtml.

Neste Exemplo será mostrado como realizar o calculo do IMC utilizando a tecnologia Razor e também o framework front-end Bootstrap.
Para iniciar é necessário que você esteja com o Visual Studio instalado em sua máquina. Caso não tenha, baixe gratuitamente no site oficial através deste Baixar [Visual Studio](https://www.visualstudio.com/pt-br/vs/community/).

## 1º Passo
Crie um novo projeto no Visual Studio.

Com o Visual Studio aberto clique sobre a aba Arquivo, arraste o mouse sobre a opção Novo e logo após clique em Projeto.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ncngc56shefcw23xpyrg.jpg)
## 2º Passo
Escolha o modelo. Nesse tutorial vamos usar um modelo vazio de um site ASP.NET.

Com o a tela de Novo Projeto aberta clique sobre a opção Visual C#, dentro vai existir um menu chamado Web, clique sobre ele e logo após em Versões Anteriores. Agora selecione a opção Site ASP.NET Vazio, escolha um nome para o seu projeto, de preferência em não utilizar espaços no nome, por exemplo: digite MeuSite ao invés de Meu Site.
## 3º Passo
Após clicar em ok será iniciado a criação do projeto. Confira se ele foi criado da forma correta.
## 4º Passo
Estando com o projeto ok, vamos adicionar uma página Razor na raiz do projeto.

Clique com o lado direito do mouse na pasta raiz do seu projeto ilustrado com ícone representado por um globo. Após isto arraste o mouse sobre a opção adicionar e logo após clique em adicionar Novo item.

No menu lateral esquerdo selecione a opção C#  logo após em Página Vazia(Razor v3) no menu central da tela, mude o nome do arquivo para index.cshtml e clique no botão adicionar.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8wcl8nweasn6s1156utq.jpg)
## 5º Passo
Abra o arquivo index.cshtml e apague tudo que estiver dentro.
## 6º Passo
Agora para criar um visual mais atraente vamos utilizar o bootstrap, se você ainda não conhece [clique aqui](https://getbootstrap.com/docs/3.3/getting-started/) para ver mais informações, basicamente ele é um framework front-end, porém neste post não iremos falar mais detalhadamente sobre ele. Você pode baixar ele direto no site.
Vamos utilizar como base um exemplo disponível no site do bootstrap.
https://getbootstrap.com/docs/3.3/examples/signin/
## 7º Passo
Dentro do arquivo index.cshtml cole o código HTML abaixo e salve:
```html
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Calculadora de IMC Online</title>
 
    <!-- Bootstrap -->
    <link href="~/bootstrap/css/bootstrap.css" rel="stylesheet">
 
    <!-- Custom style -->
    <link href="~/bootstrap/css/signin.css" rel="stylesheet">
 
</head>
 
<body>
    <div class="container">
        <form class="form-signin" method="post">
            <h2 class="form-signin-heading">Calculadora de IMC</h2>
            <label class="sr-only">Digite seu peso</label>
            <input type="text" class="form-control" placeholder="Peso" name="peso" required autofocus>
            <label class="sr-only">Digite sua altura</label>
            <input type="text" class="form-control" placeholder="Altura" name="altura" required>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Calcular</button>
        </form>
    </div>
</body>
</html>
```
## 8º Passo
Encontre o diretório da pasta onde está salvo o seu projeto, Copie caminho do diretório, abra Windows explorer, cole e pressione enter:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x0lip7jw4o9a64ojjxvv.png)
Nesta pasta contém apenas dois arquivos css, no entanto se você baixar direto pelo site oficial percebera que existem mais arquivos incluindo fontes de texto e arquivos javascript, porém como já falada anteriormente precisamos somente destes dois neste momento.

## 9º Passo

Tente executar o seu projeto:
Se estiver ok, você irá ver a seguinte pagina:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ixx7fbgg7uc1qr04lbu3.png)
## 10º Passo

Como calcular o IMC? Bom, para fazer o cálculo do IMC é algo bem simples e para fazê-lo é preciso dividir o peso, em quilogramas, pela altura, em metros, ao quadrado.

Imagine que uma pessoa pese 80 km e sua altura seja de 1,80 m. Nesse caso a fórmula para calcular o IMC será assim:

IMC = 80 ÷ 1,80²

IMC = 80 ÷ 3,24

IMC = 24,69

Sendo assim o aviso para cada situação:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/diq1m4r8p6n735wsepe5.png)
Agora vamos criar a lógica usando o Razor e exibir o resultado usando o alert() do javascript:
```javascript
@{
        double peso = 0;
        double altura = 0;
        double imc = 0;
        string mensagem = "";
 
        if (IsPost)
        {
            altura = Request["altura"].AsFloat();
            peso = Request["peso"].AsFloat();
            imc = altura * altura;
            imc = peso / imc;
            //deixando apenas duas casas após a virgula
            imc = double.Parse(String.Format("{0:N2}", imc));
 
 
            if(imc < 17)
            {
                mensagem = "Seu IMC: "+ imc + ": Muito abaixo do peso";
            }
 
            if ((imc >= 17) && (imc <= 18.49))
            {
                mensagem = "Seu IMC: " + imc + ": Abaixo do peso";
            }
 
            if ((imc >= 18.5) && (imc <= 24.99))
            {
                mensagem = "Seu IMC: " + imc + ": Peso normal";
            }
 
            if ((imc >= 25) && (imc <= 29.99))
            {
                mensagem = "Seu IMC: " + imc + ": Acima do peso";
            }
 
            if ((imc >= 30) && (imc <= 34.99))
            {
                mensagem = "Seu IMC: " + imc + ": Obesidade I";
            }
 
            if ((imc >= 35) && (imc <= 39.99))
            {
                mensagem = "Seu IMC: " + imc + ": Obesidade II(severa)";
            }
 
            if (imc > 40)
            {
                mensagem = "Seu IMC: " + imc + ": Obesidade III(mórbida)";
            }
 
 
            <script>
                alert("@mensagem");
            </script>
            
        }
    }
```
Adicione esta lógica antes desta tag </head>;

Agora execute e faça o teste, use o exemplo citado no passo 10 para conferir a integridade do código.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tvfdn99ofwpu1pjtz1qm.jpg)
Resultado:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/agdcs45cskp1jyv9deob.jpg)
Espero ter ajudado você. Caso tenha alguma dúvida pergunte usando a área de comentários abaixo.

Este código está disponível para download no GitHub.

[Download](https://github.com/alexandrefreiref/CalculadoraImcComAspNetRazor)