DEV Community

Alexandre Freire
Alexandre Freire

Posted on

Calculando IMC usando ASP.NET Razor

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.

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

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

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 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:

<!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>
Enter fullscreen mode Exit fullscreen mode

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
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

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
Agora vamos criar a lógica usando o Razor e exibir o resultado usando o alert() do 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>

        }
    }
Enter fullscreen mode Exit fullscreen mode

Adicione esta lógica antes desta tag ;

Agora execute e faça o teste, use o exemplo citado no passo 10 para conferir a integridade do código.
Alt Text
Resultado:
Alt Text
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

Top comments (0)