CalculadoraMVC_AlvarezKevinDaniel | C# Online Compiler

CalculadoraMVC_AlvarezKevinDaniel by KevinAlvarez

using System;

namespace HelloWorldMvcApp
{
    // Modelo para la calculadora
    public class CalculatorModel
    {
        // Números ingresados por el usuario
        public double Number1 { get; set; }
        public double Number2 { get; set; }

        // Operador seleccionado por el usuario
        public string Operator { get; set; }

        // Resultado de la operación
        public double Result { get; set; }
    }
}

Model

​x
 
using System;
​
namespace HelloWorldMvcApp
{
    // Modelo para la calculadora
    public class CalculatorModel
    {
        // Números ingresados por el usuario
        public double Number1 { get; set; }
        public double Number2 { get; set; }
​
        // Operador seleccionado por el usuario
        public string Operator { get; set; }
​
        // Resultado de la operación
        public double Result { get; set; }
    }
}
​

@model HelloWorldMvcApp.CalculatorModel

<!DOCTYPE html>
<html lang="en">
<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>Calculator</title>

    <!-- CSS Includes -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="col-md-6 col-md-offset-3">
            <h1>Calculator</h1>

            @using (Html.BeginForm())
            {
                <div class="form-group">
                    <!-- Campos de entrada para los números y el operador -->
                    @Html.TextBoxFor(model => model.Number1, new {@class="form-control"})
                    @Html.TextBoxFor(model => model.Number2, new {@class="form-control"})
                    @Html.DropDownListFor(model => model.Operator, new List<SelectListItem>
                    {
                        // Lista desplegable para seleccionar el operador
                        new SelectListItem { Text = "+", Value = "+" },
                        new SelectListItem { Text = "-", Value = "-" },
                        new SelectListItem { Text = "*", Value = "*" },
                        new SelectListItem { Text = "/", Value = "/" }
                    }, new {@class="form-control"})
                </div>
            
                <!-- Botón para realizar el cálculo -->
                <button type="button" class="btn btn-primary calculate">Calculate</button>

                <br/><br/>
                <div class="alert alert-warning fade">
                    <!-- Se mostrará aquí el resultado de la operación -->
                    <strong><span class="alert-content"></span></strong>
                </div>
            }
        </div>
    </div>

    <!-- JS includes -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(function(){
            // Función para manejar el evento de clic en el botón "Calculate"
            $('.calculate').click(function(){
                var number1 = parseFloat($('#Number1').val());
                var number2 = parseFloat($('#Number2').val());
                var op = $('#Operator').val();

                // Realiza una solicitud AJAX para calcular el resultado
                $.ajax({
                    url: '@Url.Action("Calculate", "Home")',
                    data: {number1: number1, number2: number2, op: op},
                    type: 'POST',
                    dataType: 'json',
                    success: function(resp) {
                        // Muestra el resultado de la operación en un cuadro de alerta
                        $('.alert-content').text('Result: ' + resp);
                        $('.alert').addClass('in');
                    }
                });
            });
        });
    </script>
</body>
</html>

View

 
@model HelloWorldMvcApp.CalculatorModel
​
<!DOCTYPE html>
<html lang="en">
<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>Calculator</title>
​
    <!-- CSS Includes -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="col-md-6 col-md-offset-3">
            <h1>Calculator</h1>
​
            @using (Html.BeginForm())
            {
                <div class="form-group">
                    <!-- Campos de entrada para los números y el operador -->
                    @Html.TextBoxFor(model => model.Number1, new {@class="form-control"})
                    @Html.TextBoxFor(model => model.Number2, new {@class="form-control"})
                    @Html.DropDownListFor(model => model.Operator, new List<SelectListItem>
                    {
                        // Lista desplegable para seleccionar el operador
                        new SelectListItem { Text = "+", Value = "+" },
                        new SelectListItem { Text = "-", Value = "-" },
                        new SelectListItem { Text = "*", Value = "*" },
                        new SelectListItem { Text = "/", Value = "/" }
                    }, new {@class="form-control"})
                </div>
            
                <!-- Botón para realizar el cálculo -->
                <button type="button" class="btn btn-primary calculate">Calculate</button>
​
                <br/><br/>
                <div class="alert alert-warning fade">
                    <!-- Se mostrará aquí el resultado de la operación -->
                    <strong><span class="alert-content"></span></strong>
                </div>
            }
        </div>
    </div>
​
    <!-- JS includes -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
​
    <script type="text/javascript">
        $(function(){
            // Función para manejar el evento de clic en el botón "Calculate"
            $('.calculate').click(function(){
                var number1 = parseFloat($('#Number1').val());
                var number2 = parseFloat($('#Number2').val());
                var op = $('#Operator').val();
​
                // Realiza una solicitud AJAX para calcular el resultado
                $.ajax({
                    url: '@Url.Action("Calculate", "Home")',
                    data: {number1: number1, number2: number2, op: op},
                    type: 'POST',
                    dataType: 'json',
                    success: function(resp) {
                        // Muestra el resultado de la operación en un cuadro de alerta
                        $('.alert-content').text('Result: ' + resp);
                        $('.alert').addClass('in');
                    }
                });
            });
        });
    </script>
</body>
</html>
​

using System;
using System.Web.Mvc;

namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        // Acción HTTP GET para mostrar la vista inicial de la calculadora
        [HttpGet]
        public ActionResult Index()
        {
            // Retorna la vista Index con un nuevo modelo de calculadora
            return View(new CalculatorModel());
        }

        // Acción HTTP POST para calcular el resultado de la operación
        [HttpPost]
        public JsonResult Calculate(double number1, double number2, string op)
        {
            double result = 0;

            // Realiza la operación según el operador seleccionado
            switch (op)
            {
                case "+":
                    result = number1 + number2;
                    break;
                case "-":
                    result = number1 - number2;
                    break;
                case "*":
                    result = number1 * number2;
                    break;
                case "/":
                    // Verifica si el divisor es cero para evitar división por cero
                    if (number2 != 0)
                    {
                        result = number1 / number2;
                    }
                    else
                    {
                        return Json("Error: Division by zero");
                    }
                    break;
                default:
                    return Json("Error: Invalid operator");
            }

            // Retorna el resultado de la operación
            return Json(result);
        }
    }
}

Controller

 
using System;
using System.Web.Mvc;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        // Acción HTTP GET para mostrar la vista inicial de la calculadora
        [HttpGet]
        public ActionResult Index()
        {
            // Retorna la vista Index con un nuevo modelo de calculadora
            return View(new CalculatorModel());
        }
​
        // Acción HTTP POST para calcular el resultado de la operación
        [HttpPost]
        public JsonResult Calculate(double number1, double number2, string op)
        {
            double result = 0;
​
            // Realiza la operación según el operador seleccionado
            switch (op)
            {
                case "+":
                    result = number1 + number2;
                    break;
                case "-":
                    result = number1 - number2;
                    break;
                case "*":
                    result = number1 * number2;
                    break;
                case "/":
                    // Verifica si el divisor es cero para evitar división por cero
                    if (number2 != 0)
                    {
                        result = number1 / number2;
                    }
                    else
                    {
                        return Json("Error: Division by zero");
                    }
                    break;
                default:
                    return Json("Error: Invalid operator");
            }
​
            // Retorna el resultado de la operación
            return Json(result);
        }
    }
}
​

View in Full Screen

2, 5, 11, 23, 47...
What position of the previous series would you like to know?

Last Run:	2:53:35 pm
Compile:	0.347s
Execute:	0s
Memory:	32kb
CPU:	0s

View IL Code