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.
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.
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>
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:
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:
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:
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>
}
}
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.
Resultado:
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.
Top comments (0)