1

Hice un Login en MVC el cual verifica en una base de datos las credenciales del usuario. Todo es del lado del servidor, pero me gustaría que al momento de hacer clic en el botón que envía la información al Controller correspondiente las dos cajas de texto y el botón se deshabilitarán para evitar que se edite la información del usuario o se haga dos veces click sobre el botón.

    [HttpPost]
    public ActionResult SignIn(LoginModels modelo)
    {
        ValidaLogin objetoLogin = new ValidaLogin(modelo.RFC, modelo.Contrasea);
        if (objetoLogin.Login())
        {
            Sesion objetoSesion = new Sesion(modelo.Correo);
            objetoSesion.IniciarSesion();                

            //Aquí es donde se redirecciona hacia el 2do Controller
            //una vez que las credenciales son válidas.
            return RedirectToAction("VistaCargarArchivos", "CargarArchivos", new
            {                       
                correo = modelo.Correo
            });
        }
        else
        {
            ViewBag.MensajeLoginFallido = "Contraseña errónea, por favor rectifique.";
            return View();
        }
    }
}

El código razor es:

@model CFD_FNE.Models.LoginModels
@{
    ViewBag.Title = "Sign In";
}
<br />
<br />
<h2>Sign In</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    <section>
    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Correo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Correo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Correo, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.RFC, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.RFC, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.RFC, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Contrasea, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Contrasea, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Contrasea, "", new { @class = "text-danger" })
                <span class = "text-danger">
                    @ViewBag.MensajeLoginFallido
                </span>                    
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" id="btnLogin" value="Aceptar" class="btn btn-default" />
            </div>
        </div>
    </div>
</section>
}

@Scripts.Render("~/bundles/jquery-1.12.3.min")
@Scripts.Render("~/bundles/jquery.validate.min")
@Scripts.Render("~/bundles/jquery.validate.unobtrusive.min")
@Scripts.Render("~/bundles/JSFunciones")
5
  • Edita la pregunta y agrega el código que has escrito. Creo que debes especificar también en que lenguaje estás trabajando.
    – devconcept
    Commented el 12 ago. 2016 a las 16:49
  • Estas usando jQuery? Agrega el formulario completo en razor (BeginForm)
    – devconcept
    Commented el 12 ago. 2016 a las 17:59
  • JSFunciones, es para enviar los archivos seleccionados desde FileUpload hacia el servidor por medio del WCF. Es todos el jqery que he utilizado.
    – Arthur
    Commented el 12 ago. 2016 a las 19:14
  • Estas usando bootstrap?
    – devconcept
    Commented el 12 ago. 2016 a las 19:18
  • Si, el que viene al crear el proyecto web vacío con templates MVC.
    – Arthur
    Commented el 12 ago. 2016 a las 19:21

1 respuesta 1

1

Puedes usar el siguiente script si estas usando bootstrap. Si le agregas un id a tus formularios puede simplificarse un poco

$(function() {
    // Cuando se capture el submit desactiva los botones y los inputs
    $('form').on('submit', function() {
        // Agrego la clase disabled a los inputs
        $('form input').addClass('disabled');
        // Agrego el atributo disabled a los botones
        $('form button').attr('disabled', 'disabled');
    })
});

En caso de no usar bootstrap esto te puede funcionar

$(function() {
  var form = $('form');
  // Cuando se capture el submit desactiva los botones y los inputs
  form.on('submit', function() {
    form.addClass('submitted');
  })
});
form.submitted input,
form.submitted button {
  pointer-events: none;
  background-color: lightgray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type=text>
  <input type=text>
  <button>Enviar</button>
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.