none
Como crear controles dinamicamente y validadores con jquery para esos controles creados dinamicamente en mvc3? RRS feed

  • Pregunta

  • Hola a todos!, mi problema es el siguiente:

    miren desde el controller de la pagina, le envio el model, en el model tengo una lista generica de Campos el cual debe constuir dinamicamente mi pantalla, ok ya hago que se dibuje de acuerdo al tipo de control, el problema radica en aplicar las reglas de validacion con JQuery, si lo hago estatico sabiendo los nombres de los campos que voy a tener, me funciona sin problemas, pero tengo que hacer que esa porcion de codigo se genere dinamicamente de acuerdo al nombre los campos,

    $(document).ready(function () {
                $("#myform").validate({
                    rules: {
                        Nombre: {
                            required: true 
                        },
                        Edad: {
                            required: true,
                            number: true
                        }
                    }
                });
            });

    y bueno despues de esto, como puedo hacer para devolver esos valores al controller?

    espero me puedan ayudar, a continuacion pongo todo el codigo del html como lo tengo para que lo vean:

    @model PracticaMVCProyecto.Models.Formulario
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>My page</title>
    <script src="../../Scripts/jquery-latest.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        jQuery.validator.setDefaults({
            debug: true,
            success: "valid"
        }); ;
    </script>
    
    
    <script>
            $(document).ready(function () {
                $("#myform").validate({
                    rules: {
                        Nombre: {
                            required: true 
                        },
                        Edad: {
                            required: true,
                            number: true
                        }
                    }
                });
            });
    </script>
    </head>
    <body>
      
    <form id="myform">
      @foreach (var campo in Model.Campos)
      {
          <label  for=@campo.Id>@campo.Id</label>
          <input class="left" id=@campo.Id name=@campo.Id />
          <br/>
      }
      
      <input type="submit" value="Validate!" />
    </form>
    
    </body>
    </html>
    

    Gracias.
    miércoles, 2 de mayo de 2012 15:50

Respuestas

  • Hola,

    Yo personalmente sustituiría esto

    <form id="myform">
      @foreach (var campo in Model.Campos)
      {
          <label  for=@campo.Id>@campo.Id</label>
          <input class="left" id=@campo.Id name=@campo.Id />
          <br/>
      }
      
      <input type="submit" value="Validate!" />
    </form>

    por este otro código.

    @using (Html.BeginForm())
    {
        
       
            
    
            foreach (var campo in Model.Campos)
            {
                 <label  for="@campo.Id">@campo.Id</label>
                 <input type="text" id="@campo.Id" name="@campo.Id" />                   
            }
    
            <p>
                <input type="submit" value="Create" />
            </p>
        
    }

    La diferencia es clara 

    1. Los atributos deben de ir entre comillas y la más importante el formulario hace lo que tu quieres un POST y el action a "/Controller/Create"

    Fijate en la diferencia una vez generado el código html.

    Tu forma de crear el form.

    <form id="myform">
    
    
    
                 <label  for=Uno>Uno</label>
    
                 <input type="text" id=Uno name=Uno />                   
    
                 <label  for=Dos>Dos</label>
    
                 <input type="text" id=Dos name=Dos />                   
    
                 <label  for=Tres>Tres</label>
    
                 <input type="text" id=Tres name=Tres />                   
    
    
    
            <p>
    
                <input type="submit" value="Create" />
    
            </p>
    
    </form>

    La que yo te propongo.

    <form action="/default1/Create" method="post">             <label  for="Uno">Uno</label>
    
                 <input type="text" id="Uno" name="Uno" />                   
    
                 <label  for="Dos">Dos</label>
    
                 <input type="text" id="Dos" name="Dos" />                   
    
                 <label  for="Tres">Tres</label>
    
                 <input type="text" id="Tres" name="Tres" />                   
    
            <p>
    
                <input type="submit" value="Create" />
    
            </p>
    
    </form>

    Una vez en el controlador no te queda otra opción que definir "FormCollection", puesto que como bien indicas es dinámico.

    [HttpPost]
            public ActionResult Create(FormCollection Datos)
            {
                
                
                return View();
            }

    Revisa como obtener los datos de FormCollection, en esta página tienes un ejemplo.

    http://stackoverflow.com/questions/762825/how-can-a-formcollection-be-enumerated-in-asp-net-mvc

    Saludos,


    phurtado
    Mi Blog Blog
    Sigueme en Twitter


    • Editado Pedro Hurtado viernes, 4 de mayo de 2012 11:01
    • Marcado como respuesta Ramirobr viernes, 4 de mayo de 2012 15:23
    viernes, 4 de mayo de 2012 11:00