none
asp.net mvc4 barra de herramientas RRS feed

  • Pregunta

  • Saludos a todos

    Estoy desarrollando una aplicación Web con Asp.net MVC4 necesito crear una barra de herramientas.

    Esta barra de herramientas tiene seis botones (Nuevo, Borrar, Buscar, Editar, Cancel y Guardar). Cuando el usuario entre a la página los botones Nuevo y Buscar estén habilitados los otros botones desabilitados, tambien estan desabilitados los textbox, combobox (elementos para la introducción de datos). Ahora  cuando el usuario haga click en Nuevo se habiliten los elementos textbox, combobox para introduccion de datos los botones Cancelar y Guardar habilitados y los otros botones desabilitados.

    Esta funcionalidad necesito programar no se si tienen alguna idea como hacerlo les estare muy agradecido.

    Saludos

    Ricardo

    martes, 6 de noviembre de 2012 16:03

Respuestas

  • Una vista en Razor se vería algo así:

    @model <el tipo de modelo>
    
    ...
    <div>
        <button id="btnNuevo">Nuevo</button>
        &nbsp;<button id="btnGuardar" data-accion-nuevo="true">Guardar</button>
        &nbsp;<button id="btnCancelar" data-accion-nuevo="true">Cancelar</button>
    </div>
    <div>
        Nombre:<input type="text" id="nombre" data-accion-nuevo="true" />
        <br />Apellidos:<input type="text" id="apellidos" data-accion-nuevo="true" />
    </div>
    <script language="Javascript" type="text/Javascript">
        $(function()
        {
            //Primero deshabilitamos todos los controles relevantes:
            $('[data-accion-nuevo]').attr('disabled', 'true');
            //Ahora hacemos que el botón de nuevo los active:
            $('#btnNuevo').click(function()
            {
                $('[data-accion-nuevo]').removeAttr('disabled');
            });
        });
    </script>
    

    Como verá, usando jQuery es sumamente sencillo.


    Jose R. MCP
    Code Samples

    • Marcado como respuesta ricardo_jal miércoles, 7 de noviembre de 2012 19:23
    miércoles, 7 de noviembre de 2012 14:15

Todas las respuestas

  • Pues es puro Javascript.  No creo que tenga mayor complicación.  Simplemente programe los eventos onclick en Javascript de cada botón.  Para hacerlo más sencillo utilice jQuery y una clase o un atributo sobre los distintos elementos.  Por ejemplo, agregue el atributo data-input="true" a todos los <input> que inicialmente están deshabilitados pero que deben habilitarse con el botón de Nuevo.  El onclick de Nuevo entonces puede usar $('input[data-input]') para seleccionar todos estos items a la vez y habilitarlos todos de una vez.

    Jose R. MCP
    Code Samples

    martes, 6 de noviembre de 2012 16:23
  • Jose muchas gracias por el comentario no se si podrías lanzarme un pequeño código para seguir sobre el mismo 
    miércoles, 7 de noviembre de 2012 12:56
  • Una vista en Razor se vería algo así:

    @model <el tipo de modelo>
    
    ...
    <div>
        <button id="btnNuevo">Nuevo</button>
        &nbsp;<button id="btnGuardar" data-accion-nuevo="true">Guardar</button>
        &nbsp;<button id="btnCancelar" data-accion-nuevo="true">Cancelar</button>
    </div>
    <div>
        Nombre:<input type="text" id="nombre" data-accion-nuevo="true" />
        <br />Apellidos:<input type="text" id="apellidos" data-accion-nuevo="true" />
    </div>
    <script language="Javascript" type="text/Javascript">
        $(function()
        {
            //Primero deshabilitamos todos los controles relevantes:
            $('[data-accion-nuevo]').attr('disabled', 'true');
            //Ahora hacemos que el botón de nuevo los active:
            $('#btnNuevo').click(function()
            {
                $('[data-accion-nuevo]').removeAttr('disabled');
            });
        });
    </script>
    

    Como verá, usando jQuery es sumamente sencillo.


    Jose R. MCP
    Code Samples

    • Marcado como respuesta ricardo_jal miércoles, 7 de noviembre de 2012 19:23
    miércoles, 7 de noviembre de 2012 14:15