[ASP.NET] PopUp Edición - Usando Ajax Toolkit ModalPopupExtender

 

Introducción

---

Editar información de un registro puede implicar el navegar de una pagina hacia otra, pero también podría aplicarse otras técnicas como ser el desplegar un dialogo que facilite esta tarea al usuario

 

Implementado AutoCompleteExtender

---

La búsqueda rápida de un cliente por medio de la aproximación mientras se va escribiendo consta de dos parte, una en el html donde se vincula los controles asp.net con el AutoCompleteExtender, definiendo en este tres propiedades importantes: TargetControlID, ServicePath y ServiceMethod

<div id="search" style="width:100%;height:100%">

    <div class="row">
        <div class="cell searchcell">
            <asp:Label ID="Label1" runat="server" Text="Nombre Compañia:"></asp:Label>
            <asp:TextBox ID="txtCustomer" runat="server" Width="200px" />
            <asp:AutoCompleteExtender ID="aceCustomer" runat="server"
                TargetControlID="txtCustomer"
                ServiceMethod="GetCustomerList"
                ServicePath="Default.aspx"
                MinimumPrefixLength="2"
                CompletionInterval="1000"
                EnableCaching="true"
                CompletionSetCount="12" />
        </div>
    </div>
    <div class="row">
        <div class="cell searchcell" style="text-align:right;">
            <asp:Button ID="btnFiltrar" runat="server" Text="Filtrar" CssClass="button"
                onclick="btnFiltrar_Click" />
        </div>
    </div>

</div>

Es por eso que en la pagina se define el código del servicio encargado de retornar la lista de string de respuesta.

[WebMethod]
[ScriptMethod]
public static string[] GetCustomerList(string prefixText, int count)
{
     string[] list = CustomerRepository.GetCustomer(prefixText, count)
                            .Select(x => x.CompanyName)
                            .ToArray();

     return list;
}

Implementando ModalPopupExtender

---

Como en este caso es necesario realizar la carga de datos en los controles que formaran el dialogo de edición se deberá realizar un postback al servidor en un evento previo a mostrar el popup.

Para poder llevar esto a cabo se requiere adaptar el modalpopup, asignando el target a un control hidden para poder engañarlo y así dejar libre la acción del gridview.

Al realizar esto se podrá controlar desde el servidor cuando se desplego el dialogo, desde el evento del gridview se realizara la carga de la info en el panel para terminar con el show del dialogo.

protected void gvOrders_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)
{
    int OrderId = Convert.ToInt32(gvOrders.DataKeys[e.NewSelectedIndex].Value);

    InitializeEditPopUp();
    LoadEditData(OrderId);

    mpeEditOrder.Show();
}

El resto del ejemplo lo compone el dialogo de edición, en este caso no se hiso uso de tabla html, sino que se opto por usar css tables.

 

Persistencia

---

Para guardar y recuperar la información de la base se hace uso de Entity Framework Code First, se utiliza este por lo practico de su uso.

No se pone aquí la definición de todas las clases del dominio ya que puede descargarse el código para un mayor detalle, pero si se plantea la definición del mapeo para que pueda observarse lo simple que este queda.

public class NorthwindContext : DbContext
    {

        public NorthwindContext()
            : base("Northwind")
        {
            Database.SetInitializer<NorthwindContext>(null);
        }


        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {

            modelBuilder.Entity<Order>()
                            .HasKey(x => x.OrderID);
            
            modelBuilder.Entity<Order>()
                            .HasOptional(x => x.Customers)
                            .WithMany(x=>x.Orders)
                            .HasForeignKey(x=>x.CustomerID);

            modelBuilder.Entity<Order>()
                             .HasOptional(x => x.Shipper)
                             .WithMany(x=>x.Orders)
                             .HasForeignKey(x=>x.ShipVia);

            modelBuilder.Entity<Order>()
                             .HasOptional(x => x.Employees)
                             .WithMany(x => x.Orders)
                             .HasForeignKey(x => x.EmployeeID);
            

            modelBuilder.Entity<Customer>()
                            .HasKey(x => x.CustomerID);

            modelBuilder.Entity<Product>()
                            .HasKey(x => x.ProductID);

            modelBuilder.Entity<Shipper>()
                            .HasKey(x => x.ShipperID);


            modelBuilder.Entity<Employe>().ToTable("Employees");
            
            modelBuilder.Entity<Employe>()
                             .HasKey(x => x.EmployeeID)
                             .Ignore(x=>x.FullName);

        }

        public DbSet<Customer> Customers { get; set; }
        public DbSet<Order> Orders { get; set; }
        public DbSet<Shipper> Shippers { get; set; }
        public DbSet<Product> Products { get; set; }
        public DbSet<Employe> Employees { get; set; }

    }

Problemas encontrados

---

Durante la realización del articulo encontré algunos problemas que podrían considerarse como tips a tener en cuenta.

ReadOnly en TextBox con CalendarExtender

Para permitir al usuario seleccionar una fecha se hace uso de CalendarExtender, algo que se quería evitar es el por escribir, por eso se asigno la propiedad ReadOnly="true", el resultado de esto fue que el control no tomaba la selección de la fecha cuando se lo consultaba en el evento del server.

Se debió quitar el ReadOnly para que el control volviera a funcionar

Controles de Validación

Para la validación de algunos controles se hizo uso de controles de asp.net, los cuales se encontraban dentro del Panel que se despliega en el popup. El uso de estos controles hacia que eventos no se lanzaran.

El problema se debía que los controles de validación dentro del modalpopup no tener el mismo nombre en la propiedad ValidationGroup, solo fue cuestión de asignar un mismo nombre de grupo y se resolvió.

 

Código

---

Para el ejemplo se hace uso de Visual Studio 21010, la base de datos es Sql Compract 3.5