none
Como se realizar una ventana modal con filtros. RRS feed

  • Pregunta

  • Hola, estoy realizando pruebas con MVC en VB Ultimate, y en vista que he visitado muchas paginas y NO he encontrado algo parecido, necesito ayuda.

    Tengo una Vista para crear clientes, dentro de los campos del cliente  tengo el codigo de la ciudad y necesito colocar un boton que me muestre las ciudades disponibles, pero digitandole un criterio de seleccion No seria en un DropDownList normalito que despliegue todas las ciudades, sino que le pueda decir por ejemplo todas las de un departamento en particular por decir algo.

    Y cuando tenga la ciudad selecionada que me la devuelva a la vista principal, yo se como funciona el DropDownList, pero quiero personalizarlo, o saber como realizo funciones alternas para que me devuelva el valor deseado.

    De antemano Gracias..


    Evargasc
    martes, 9 de noviembre de 2010 12:26

Respuestas

  • Hola Twin1108

    No termindo de entender lo que buscas... Te refieres a rellenar una combo dinámicamente con ciertos datos? Algo como... mostrar un desplegable sólo de las ciudades cuyo Codigo Postal empiece por '01', p.ej?

    De momento asumo que es esto: que quieres rellenar ciertos valores provenientes de una llamada ajax. Hay n-mil maneras de hacerlo y aquí te presento una usando un plugin de jQuery UI llamado jQuery dropdown widget y que puedes encontrar en http://www.jordivila.net/jquery-dropdownlist-widget-json-to-combo-box.html

    Este plugin es muy simple: tiene un sólo método combobox al que se le pasa un objeto javascript con las opciones que se deben añadir (y algunos parámetros más de presentación tal como ancho, alto). Básicamente el objeto javascript debe tener un array llamado data relleno de objetos que tengan dos propiedades (una llamada text y la otra value).

    Uses este plugin u otro parecido, generalmente siempre se trata de lo mismo: Desde la vista invocar la acción del controlador que te devuelve los datos en json (usando generalmente getJSON), y con esos datos, rellenar tu combobox.

    Fíjate este es el código de mi vista:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    	Index
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    
      <script type="text/javascript">
        $(document).ready(function () {
          $("#refresh").click(function () {
            var codigo = $("#cp").val();
            // petición json
            $.getJSON("<%: Url.Action("ByPostalCode") %>", {cp: codigo}, function(data) {
              $("#combo").combobox(data);
            });
          });
        });
      </script>
      
      <h2>Index</h2>
    
      Pon un valor (de dos cifras) en el textbox y la combo se rellenará con las
      ciudades cuyo Codigo Postal empiece por dicho valor
    
      <input type="text" id="cp" />
      <input type="button" id="refresh" value="Refrescar!" />
    
      <h3>La combo aparecerá aqui!</h3>
      <div id="combo" ></div>
    
    </asp:Content>
    

    Fíjate en el código jQuery: cuando se cargue el documento, cojerá el elemento cuyo id es refresh (el botón) y le asigna un evento click, que al ejecutarse lo que hace es recoger el valor del textbox cuyo id es cp y usar getJSON para invocar la acción ByPostalCode (pasándole el valor recogido) y llamar a combobox  (el plugin de jQuery) con los datos recibidos.

    En el lado del servidor, el controlador debe devolver un Json con el formato indicado anteriormente (que es el que espera el plugin):

    public ActionResult ByPostalCode(string cp)
    {
    
      CitiesModel cm = new CitiesModel();
      var cities = cm.GetCitiesByPostalCode(cp);
      var data = cities.Select(x => new { value = x.Id, text = x.Name, }).ToList();
      var jsondata = new { list = data, listHeight = 200 };
      return Json(jsondata, JsonRequestBehavior.AllowGet);
    }
    

    Perdona que el código esté en C#, pero es que siempre uso C# para desarrollar... Supongo que no te costará entenderlo ni pasarlo a VB.NET (y sinó ya sabes donde encontrarme :p)

    Básicamente: llamamos al modelo para obtener las ciudades cuyo código postal empiezan por el valor indicado y las devolvemos codificadas en json. El Select es necesario para transformar las propiedades de mis clases de "negocio" a las que espera el plugin.

    La definición del modelo (para que tengas todo el código) es así:

      public class CitiesModel
      {
        private List<CityData> cities;
    
    
        public CitiesModel()
        {
          cities = new List<CityData>();
    
          // Datos de prueba...
          for (int i = 0; i <= 100; i++)
          {
            cities.Add(new CityData()
            {
              Id = i,
              Name = string.Format("Ciudad Demo con CP: {0}", (i * 100).ToString().PadLeft(5, '0')),
              CodigoPostal = (i*100).ToString().PadLeft(5,'0')
            });
          }
        }
    
        public IEnumerable<CityData> GetCitiesByPostalCode(string cp)
        {
          return cities.Where(x => x.CodigoPostal.StartsWith(cp));
        }
      }
    
      public class CityData
      {
        public int Id { get; set; }
        public string Name { get; set; }
        public string CodigoPostal { get; set; }
      }
    

    Y listos! Con eso cuando el usuario pulse el botón, generaremos una combo sólo con los valores que cumplan el filtro indicado... y todo usando Ajax! :)

    Insisto: no se si es esto a lo que te referías... Lo comento porque aquí de "modal" no hay nada.

    Por último, te muestro el contenido de la página master, donde hago referencias a los scripts de jQuery (he usado el CDN de Google):

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
      <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
      <script type="text/javascript" src="<%: Url.Content("~/scripts/ui-combobox.js") %>"></script>
      <link href="<%: Url.Content("~/Content/ui-combobox.css") %>" rel="stylesheet" type="text/css" media="all" />
      <link id="jQueryUICssSrc" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        
        </asp:ContentPlaceHolder>
      </div>
    </body>
    </html>
    

    Un saludo y ya me dirás si eso es lo que querías, si no, si te sirve, si necesitas más ayuda... etc :)


    Eduard Tomàs Blog: http://geeks.ms/blogs/etomas -- Twitter: eiximenis
    • Marcado como respuesta Eder Costa jueves, 4 de octubre de 2012 14:29
    martes, 9 de noviembre de 2010 13:51
  • Buenas!

    Para mostrar diálogos modales puedes usar uno de los mejores plugins de jQuery: SimpleModal (http://www.ericmmartin.com/projects/simplemodal/). Este plugin muestra el contenido de un elemento en "formato modal". Simplemente accedes al objeto jQuery y llamas a modal(). Algo como $("#id").modal(). Asegúrate de que el elemento está con display:none para que no se vea inicialmente, y deja que SimpleModel haga el resto de trabajo.

    En nuestro caso quiero mostrar el textbox y la combo cargada via JSON en formato modal, para ello modifico mi vista para que tenga el siguiente código:

      <script type="text/javascript">
        $(document).ready(function () {
          $("#refresh").click(function () {
            var codigo = $("#cp").val();
            // petición json
            $.getJSON("<%: Url.Action("ByPostalCode") %>", {cp: codigo}, function(data) {
              data.changed = function(e, ui) {
                $("#combo").data("city", ui.value);
              };
              $("#combo").combobox(data);
            });
          });
          $("#linkModal").click(function() {
            $("#content-modal").modal(
              { 
                minHeight:400,
                onClose: function() {
                  alert("Valor escogido:" + $("#combo").data("city"));
                  $.modal.close();
                }
               }
             );
          });
        });
      </script>
      <h2>Index</h2>
      <a href="#" id="linkModal">Pulsa aquí para mostrar el popup modal</a>
    
      <div id="content" style="display:none">
        <% Html.RenderPartial("ModalView"); %>
      </div>
    

    Los cambios más relevantes son:

    1. He añadido un link (linkModal) que al hacer click sobre él se despliega el cuadro modal.
    2. Añado un div (llamado content) con display:none que contiene lo que se desplegará como diálogo modal.
    3. Dentro del div content renderizo una vista parcial (ModalView). Esta vista parcial tiene el mismo código que teníamos antes (el textbox, el botón de refrescar y el <div> que contiene la combo.
    4. Antes de mostrar la combo con $("#combo").combobox(), recojo el objeto JSON que me devuelve el controlador y le añado una propiedad changed que es una función. El plugin de DropDown invoca a ese método del objeto (si existe) cada vez que se modifica el valor de la combo. Dentro de esa función guardo el valor seleccionado en la combo usando jquery data.
    5. Asocio en el click del link "linkModal" que se muestre el diálogo Modal, para ello uso SimpleModal: simplemente uso el método .modal() que proporciona el plugin y le paso un objeto con dos parámetros: una altura mínima y el callback a ejecutar cuando se cierre el diálogo. Fíjate que dentro del callback DEBO cerrar el diálogo usando $.modal.close();
    6. Dentro del callback del diálogo uso jQuery data de nuevo para acceder al valor guardado en el paso 4.

    Y listos. Al cerrar el diálogo modal se muestra un alert con el ID de la ciudad seleccionada en la combo.

    Eso es lo que me encanta de jQuery, sus plugins y MVC: Pocas líneas de código, pero tenemos un diálogo modal que muestra datos en una combo sacados a partir de una llamada Ajax :)

    El código de la vista parcial ModalView es:

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
    
    <div id="content-modal">
    Pon un valor (de dos cifras) en el textbox y la combo se rellenará con las ciudades
    cuyo Codigo Postal empiece por dicho valor
    <input type="text" id="cp" />
    <input type="button" id="refresh" value="Refrescar!" />
    <h3>La combo aparecerá aqui!</h3>
    <div id="combo">
    </div>
    </div>
    

    Como es es lo mismo que teníamos antes (lo he separado para mejor legibilidad).

    Tengo también una CSS (cogida de los ejemplos de SimpleModal) con algunos estilos que el plugin usa internamente:

    #basic-modal-content {display:none;}
    
    /* Overlay */
    #simplemodal-overlay {background-color:#000; cursor:wait;}
    
    /* Container */
    #simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
    #simplemodal-container .simplemodal-data {padding:8px;}
    #simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
    #simplemodal-container a {color:#ddd;}
    #simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
    #simplemodal-container h3 {color:#84b8d9;}
    

    Y bueno... la master page simplemente incluye la nueva CSS y el SimpleModal.js claro :)

    Y con esto todo te debería funcionar! ;-)

    Espero que te sea útil... échale un vistazo a fondo a SimpleModal porque es BRUTAL lo que ese plugin puede hacer :)

    PD: Si quieres, si me pasas algun correo te mando el proyecto (en vs2010 y mvc2)... tiene fallos porque lo he hecho rápidamente pero la funcionalidad se ve :)


    Eduard Tomàs Blog: http://geeks.ms/blogs/etomas -- Twitter: eiximenis
    • Marcado como respuesta Eder Costa jueves, 4 de octubre de 2012 14:29
    martes, 9 de noviembre de 2010 20:14
  • Buenas!

    Fíjate que el valor que ha pasado la combo se obtiene con  $("#combo").data("city");

    Lo único que necesitas es el "id" del campo, que te genera TextboxFor, para en lugar de usar

    <%: Html.TextBoxFor(m=>m.city) %> 
    

    para generar el campo, puedes usar:

    <%: Html.TextBoxFor(m=>m.city, new { id="txtCity"}) %>
    

    De esa manera el campo de texto tiene el id="txtCity".

    Y ahora cambias el "alert" por el siguiente código jQuery:

    $("#txtCity").val($("#combo").data("city"));
    

    Este código lo que hace es incrustar el valor en el campo cuyo id es "txtCity" (el campo generado por TextBoxFor).

    Un saludo!


    Eduard Tomàs Blog: http://geeks.ms/blogs/etomas -- Twitter: eiximenis
    • Marcado como respuesta Eder Costa jueves, 4 de octubre de 2012 14:29
    viernes, 12 de noviembre de 2010 7:08

Todas las respuestas

  • Hola Twin1108

    No termindo de entender lo que buscas... Te refieres a rellenar una combo dinámicamente con ciertos datos? Algo como... mostrar un desplegable sólo de las ciudades cuyo Codigo Postal empiece por '01', p.ej?

    De momento asumo que es esto: que quieres rellenar ciertos valores provenientes de una llamada ajax. Hay n-mil maneras de hacerlo y aquí te presento una usando un plugin de jQuery UI llamado jQuery dropdown widget y que puedes encontrar en http://www.jordivila.net/jquery-dropdownlist-widget-json-to-combo-box.html

    Este plugin es muy simple: tiene un sólo método combobox al que se le pasa un objeto javascript con las opciones que se deben añadir (y algunos parámetros más de presentación tal como ancho, alto). Básicamente el objeto javascript debe tener un array llamado data relleno de objetos que tengan dos propiedades (una llamada text y la otra value).

    Uses este plugin u otro parecido, generalmente siempre se trata de lo mismo: Desde la vista invocar la acción del controlador que te devuelve los datos en json (usando generalmente getJSON), y con esos datos, rellenar tu combobox.

    Fíjate este es el código de mi vista:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    	Index
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    
      <script type="text/javascript">
        $(document).ready(function () {
          $("#refresh").click(function () {
            var codigo = $("#cp").val();
            // petición json
            $.getJSON("<%: Url.Action("ByPostalCode") %>", {cp: codigo}, function(data) {
              $("#combo").combobox(data);
            });
          });
        });
      </script>
      
      <h2>Index</h2>
    
      Pon un valor (de dos cifras) en el textbox y la combo se rellenará con las
      ciudades cuyo Codigo Postal empiece por dicho valor
    
      <input type="text" id="cp" />
      <input type="button" id="refresh" value="Refrescar!" />
    
      <h3>La combo aparecerá aqui!</h3>
      <div id="combo" ></div>
    
    </asp:Content>
    

    Fíjate en el código jQuery: cuando se cargue el documento, cojerá el elemento cuyo id es refresh (el botón) y le asigna un evento click, que al ejecutarse lo que hace es recoger el valor del textbox cuyo id es cp y usar getJSON para invocar la acción ByPostalCode (pasándole el valor recogido) y llamar a combobox  (el plugin de jQuery) con los datos recibidos.

    En el lado del servidor, el controlador debe devolver un Json con el formato indicado anteriormente (que es el que espera el plugin):

    public ActionResult ByPostalCode(string cp)
    {
    
      CitiesModel cm = new CitiesModel();
      var cities = cm.GetCitiesByPostalCode(cp);
      var data = cities.Select(x => new { value = x.Id, text = x.Name, }).ToList();
      var jsondata = new { list = data, listHeight = 200 };
      return Json(jsondata, JsonRequestBehavior.AllowGet);
    }
    

    Perdona que el código esté en C#, pero es que siempre uso C# para desarrollar... Supongo que no te costará entenderlo ni pasarlo a VB.NET (y sinó ya sabes donde encontrarme :p)

    Básicamente: llamamos al modelo para obtener las ciudades cuyo código postal empiezan por el valor indicado y las devolvemos codificadas en json. El Select es necesario para transformar las propiedades de mis clases de "negocio" a las que espera el plugin.

    La definición del modelo (para que tengas todo el código) es así:

      public class CitiesModel
      {
        private List<CityData> cities;
    
    
        public CitiesModel()
        {
          cities = new List<CityData>();
    
          // Datos de prueba...
          for (int i = 0; i <= 100; i++)
          {
            cities.Add(new CityData()
            {
              Id = i,
              Name = string.Format("Ciudad Demo con CP: {0}", (i * 100).ToString().PadLeft(5, '0')),
              CodigoPostal = (i*100).ToString().PadLeft(5,'0')
            });
          }
        }
    
        public IEnumerable<CityData> GetCitiesByPostalCode(string cp)
        {
          return cities.Where(x => x.CodigoPostal.StartsWith(cp));
        }
      }
    
      public class CityData
      {
        public int Id { get; set; }
        public string Name { get; set; }
        public string CodigoPostal { get; set; }
      }
    

    Y listos! Con eso cuando el usuario pulse el botón, generaremos una combo sólo con los valores que cumplan el filtro indicado... y todo usando Ajax! :)

    Insisto: no se si es esto a lo que te referías... Lo comento porque aquí de "modal" no hay nada.

    Por último, te muestro el contenido de la página master, donde hago referencias a los scripts de jQuery (he usado el CDN de Google):

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
      <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
      <script type="text/javascript" src="<%: Url.Content("~/scripts/ui-combobox.js") %>"></script>
      <link href="<%: Url.Content("~/Content/ui-combobox.css") %>" rel="stylesheet" type="text/css" media="all" />
      <link id="jQueryUICssSrc" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        
        </asp:ContentPlaceHolder>
      </div>
    </body>
    </html>
    

    Un saludo y ya me dirás si eso es lo que querías, si no, si te sirve, si necesitas más ayuda... etc :)


    Eduard Tomàs Blog: http://geeks.ms/blogs/etomas -- Twitter: eiximenis
    • Marcado como respuesta Eder Costa jueves, 4 de octubre de 2012 14:29
    martes, 9 de noviembre de 2010 13:51
  • Eduard, estuve revisando tu ejemplo y estan perfectos para obtener un filtro de ciudades, pero tengo que insistir en el punto de que sea una ventana modal para mostrar estos datos, es decir, todo tu ejemplo encerrado en una ventana popup, otra Vista o algo asi, y que retorne el valor seleccionado a una vista anterior, desde donde se invoco la ayuda o el boton.

    VistaCreate => con el campo_codigo_ciudad => Boton_que_una_activa_la_ventana_modal.

    Al activarse la ventana modal => Desplegar una caja de texto para digitar un criterio => segun este criterio listar ciudades dado como en tu ejemplo (las que empicen por 01) => y por ultimo cuando se seleccione la ciudad cerrar la ventana modal y que retorne el valor al campo_codigo_ciudad.

    Como vez en tu ejemplo solo falto lo de la ventana modal y seria de mucha ayuda.

     

    De nuevo muchas Gracias y excelente este foro.

     

     


    Evargasc
    martes, 9 de noviembre de 2010 18:35
  • Buenas!

    Para mostrar diálogos modales puedes usar uno de los mejores plugins de jQuery: SimpleModal (http://www.ericmmartin.com/projects/simplemodal/). Este plugin muestra el contenido de un elemento en "formato modal". Simplemente accedes al objeto jQuery y llamas a modal(). Algo como $("#id").modal(). Asegúrate de que el elemento está con display:none para que no se vea inicialmente, y deja que SimpleModel haga el resto de trabajo.

    En nuestro caso quiero mostrar el textbox y la combo cargada via JSON en formato modal, para ello modifico mi vista para que tenga el siguiente código:

      <script type="text/javascript">
        $(document).ready(function () {
          $("#refresh").click(function () {
            var codigo = $("#cp").val();
            // petición json
            $.getJSON("<%: Url.Action("ByPostalCode") %>", {cp: codigo}, function(data) {
              data.changed = function(e, ui) {
                $("#combo").data("city", ui.value);
              };
              $("#combo").combobox(data);
            });
          });
          $("#linkModal").click(function() {
            $("#content-modal").modal(
              { 
                minHeight:400,
                onClose: function() {
                  alert("Valor escogido:" + $("#combo").data("city"));
                  $.modal.close();
                }
               }
             );
          });
        });
      </script>
      <h2>Index</h2>
      <a href="#" id="linkModal">Pulsa aquí para mostrar el popup modal</a>
    
      <div id="content" style="display:none">
        <% Html.RenderPartial("ModalView"); %>
      </div>
    

    Los cambios más relevantes son:

    1. He añadido un link (linkModal) que al hacer click sobre él se despliega el cuadro modal.
    2. Añado un div (llamado content) con display:none que contiene lo que se desplegará como diálogo modal.
    3. Dentro del div content renderizo una vista parcial (ModalView). Esta vista parcial tiene el mismo código que teníamos antes (el textbox, el botón de refrescar y el <div> que contiene la combo.
    4. Antes de mostrar la combo con $("#combo").combobox(), recojo el objeto JSON que me devuelve el controlador y le añado una propiedad changed que es una función. El plugin de DropDown invoca a ese método del objeto (si existe) cada vez que se modifica el valor de la combo. Dentro de esa función guardo el valor seleccionado en la combo usando jquery data.
    5. Asocio en el click del link "linkModal" que se muestre el diálogo Modal, para ello uso SimpleModal: simplemente uso el método .modal() que proporciona el plugin y le paso un objeto con dos parámetros: una altura mínima y el callback a ejecutar cuando se cierre el diálogo. Fíjate que dentro del callback DEBO cerrar el diálogo usando $.modal.close();
    6. Dentro del callback del diálogo uso jQuery data de nuevo para acceder al valor guardado en el paso 4.

    Y listos. Al cerrar el diálogo modal se muestra un alert con el ID de la ciudad seleccionada en la combo.

    Eso es lo que me encanta de jQuery, sus plugins y MVC: Pocas líneas de código, pero tenemos un diálogo modal que muestra datos en una combo sacados a partir de una llamada Ajax :)

    El código de la vista parcial ModalView es:

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
    
    <div id="content-modal">
    Pon un valor (de dos cifras) en el textbox y la combo se rellenará con las ciudades
    cuyo Codigo Postal empiece por dicho valor
    <input type="text" id="cp" />
    <input type="button" id="refresh" value="Refrescar!" />
    <h3>La combo aparecerá aqui!</h3>
    <div id="combo">
    </div>
    </div>
    

    Como es es lo mismo que teníamos antes (lo he separado para mejor legibilidad).

    Tengo también una CSS (cogida de los ejemplos de SimpleModal) con algunos estilos que el plugin usa internamente:

    #basic-modal-content {display:none;}
    
    /* Overlay */
    #simplemodal-overlay {background-color:#000; cursor:wait;}
    
    /* Container */
    #simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
    #simplemodal-container .simplemodal-data {padding:8px;}
    #simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
    #simplemodal-container a {color:#ddd;}
    #simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
    #simplemodal-container h3 {color:#84b8d9;}
    

    Y bueno... la master page simplemente incluye la nueva CSS y el SimpleModal.js claro :)

    Y con esto todo te debería funcionar! ;-)

    Espero que te sea útil... échale un vistazo a fondo a SimpleModal porque es BRUTAL lo que ese plugin puede hacer :)

    PD: Si quieres, si me pasas algun correo te mando el proyecto (en vs2010 y mvc2)... tiene fallos porque lo he hecho rápidamente pero la funcionalidad se ve :)


    Eduard Tomàs Blog: http://geeks.ms/blogs/etomas -- Twitter: eiximenis
    • Marcado como respuesta Eder Costa jueves, 4 de octubre de 2012 14:29
    martes, 9 de noviembre de 2010 20:14
  •  

    Perfecto, suena bien!!!.

    Voy revisando estas lineas de codigo, mientras me lo envias al correo (ejvargasc@hotmail.com).

    Mil Gracias..


    Evargasc
    miércoles, 10 de noviembre de 2010 14:07
  • Hola Eduard, podrias enviarme el proyecto a mi tambien, mi correo es krogcy@hotmail.com esto es justo lo que estoy buscando... gracias!!!
    miércoles, 10 de noviembre de 2010 14:12
  • Buenas,

    Ya deberías tener los dos el código con el proyecto entero.

    Un saludo!


    Eduard Tomàs Blog: http://geeks.ms/blogs/etomas -- Twitter: eiximenis
    jueves, 11 de noviembre de 2010 7:52
  • Hola Eduard, gracias por el proyecto, tengo una preguntica mas, en el caso en que en vez de mostrarme un alert con el nombre de la ciudad seleccionada, yo quisiera enviar ese valor de la ciudad seleccionado en la vista modal a un campo existente en la vista principal como lo haria??

    Teniendo en cuenta que el campo principal se crea de esta forma en la vista: Textboxfor(m=> m.city) .

    Espero atentamente tu respuesta,

     

    gracias,

    krogcy

    jueves, 11 de noviembre de 2010 14:26
  • Buenas!

    Fíjate que el valor que ha pasado la combo se obtiene con  $("#combo").data("city");

    Lo único que necesitas es el "id" del campo, que te genera TextboxFor, para en lugar de usar

    <%: Html.TextBoxFor(m=>m.city) %> 
    

    para generar el campo, puedes usar:

    <%: Html.TextBoxFor(m=>m.city, new { id="txtCity"}) %>
    

    De esa manera el campo de texto tiene el id="txtCity".

    Y ahora cambias el "alert" por el siguiente código jQuery:

    $("#txtCity").val($("#combo").data("city"));
    

    Este código lo que hace es incrustar el valor en el campo cuyo id es "txtCity" (el campo generado por TextBoxFor).

    Un saludo!


    Eduard Tomàs Blog: http://geeks.ms/blogs/etomas -- Twitter: eiximenis
    • Marcado como respuesta Eder Costa jueves, 4 de octubre de 2012 14:29
    viernes, 12 de noviembre de 2010 7:08