none
Formulario dentro de una tabla RRS feed

  • Pregunta

  • Amigos,

    Tengo una vista (MVC) y dentro una tabla, cada fila tiene una etiqueta form con un elemento textbox y un submit, el objetivo es actualizar un campo (texbox) y luego enviar los datos via ajax 

    Tengo lo sgte:

    @foreach (var item in Model)
            {
                <tr>
                    <td>                    
                                    <form id="form" method="Post">
                                    <label>PROFUNDIDAD DE DIBUJO</label>
                                    <input type="number" value="@item.MNDNProfundidadDibujo" />
                                    <input type="submit" class="boton-guardar" value="GUARDAR" />
                                    </form>
                    </td>
                </tr>
            }
    
    
    <script type="text/javascript">
    
        $("#form").submit(function () {
    
            $.ajax...
        });    
        
    </script>

    No sé como obtener los datos del formulario que hice click en el submit, ¿hay alguna forma de hacerlo?

    sábado, 23 de enero de 2016 4:06

Todas las respuestas

  • Añádele un atributo name al input, por ejemplo:

    <input type="number" value="@item.MNDNProfundidadDibujo" name="miDato" />

    Y después, en el método de acción al que apunte el POST de Ajax, simplemente lee el valor de Request.Form["miDato"].

    También puedes declarar el método de acción con un parámetro que sea (string miDato). O un parámetro del tipo FormCollection, y luego sacar los datos individuales desde dentro de éste.

    sábado, 23 de enero de 2016 9:14
  • Gracias Alberto, entonces, no necesito enviar esos datos mediante el atributo data de $.Ajax?

    data: { MNDNID: Id, Nombre: x },

    Antes de enviar los datos quiero validar los ingresos, lo que no se es como hacer referencia al textbox del formulario que hice postback

    <script type="text/javascript">
    
        $("#form").submit(function () {
    
            if( campo == null )
            {}
    
            $.ajax...
        });    
        
    </script>

    Como hago referencia al texbox? no puedo hacerlo ni por la clase ni por el id porque son varias filas dentro de una tabla que contienen lo mismo, como se logra hacer ello?


    sábado, 23 de enero de 2016 15:47
  • En primer lugar, en cuanto al "data": sí, sí que tienes que incluir los datos si lo haces mediante Ajax. No sería necesario incluirlos si realmente se hiciera el POST mediante el botón de submit, ya que el formulario incluiría automáticamente todos sus datos. Pero si siempre vas a interceptar el submit y siempre vas a funcionar con ajax, realmente te sobra el "name" y te sobra el "form". Basta con que desde el evento de javascript recojas los campos a enviar y los pongas en el data. El valor de "name" que verá el Request.Form no dependerá del campo input, sino del nombre que le pongas a cada campo en el "data" del $.post ó $.ajax.

    En cuanto a identificar los campos, lo más práctico es usar $('#iddelcampo').val(), cosa que evidentemente requiere que cada campo tenga un id. Pero eso es muy sencillo conseguirlo dado que los estás generando con un bucle en la vista Razor. Simplemente usa una variable dentro del bucle para concatenársela al id de cada input.

    sábado, 23 de enero de 2016 17:04
  • Gracias nuevamente Alberto por tus sugerencias, entiendo lo que me indicas, pero tengo algunas dudas que te agredeceré me ayudes a resolverlas.

    1. Si trabajo con $.Ajax (JQuery) ya no requiero del uso del tag form, entonces ¿tampoco requiero de un input submit? ¿me basta con un input type button? ¿cuál de los dos es recomendable para este caso?

    2. Generaré por cada fila un ID distintivo para cada campo e incluso para el submit/button según lo que me recomiendes, pero si desconozco el id porque es dinámico, ¿cómo lo intercepto desde JQuery?

    Si fuera un button y tendrían los ID but-1, but-2, but-3

    $("#but-1").click(function () (
          //Acciones
    )}

    no puedo poner #but-1, ¿cómo referencio al botón sobre el que se ha hecho click?



    • Editado devinnova sábado, 23 de enero de 2016 17:33
    sábado, 23 de enero de 2016 17:32
  • 1. Cierto, si trabajas con ajax puedes recoger cualquier valor de cualquier input que haya en la pantalla, sin necesidad de que esté contenido en un form. Y puedes desencadenarlo desde cualquier evento, no tiene por qué ser el click de un input de tipo submit (de hecho, ni siquiera tiene por qué ser un click ni tiene por que ser de un botón). El form y el submit solo serían necesarios si la aplicación tuviera que funcionar con html puro, prescindiendo del javascript o del ajax.

    2. Si lo que quieres es tener varias filas con datos en la tabla, y que cada fila tenga un botón que haga un "submit" de los datos de esa fila, entonces tienes que ser capaz de reconocer el botón en el que se hizo click. Para ello, puedes ponerle al botón un id; como el botón remitente llega al this del evento click, puedes recuperar el id y ver qué número tiene. Otra opción es que al generar los botones desde el bucle, les pongas un atributo "onclick=subrutina("+i+")" para conectarles el evento (en lugar de conectarlo mediante jQuery). La gracia es que esa "i" es el contador del bucle, y es la misma "i" que concatenas en el id de los botones. De esa manera, en el evento sabes qué botón se pulsó (porque te llega como argumento) y puedes concatenarlo en el $("txt-"+i) para sacar el valor de cada textbox.

    sábado, 23 de enero de 2016 18:04