none
Gridview con updatepanel y Twitter Bootstrap Modal Popup RRS feed

  • Pregunta

  • Buenas Tardes. tengo el siguiente problema y la parte original es de http://www.programming-free.com/2013/09/gridview-crud-bootstrap-modal-popup.html

    Tengo un Gridview dentro de un updatepanel  que tiene una ventana modal que abre cuando clickeo sobre un boton dentro de la grilla. Hasta ahi toda va muy bien y el código luce asi:

    <asp:UpdatePanel ID="upCrudGrid" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:GridView ID="grvUsuario" runat="server" Width="980px"
                        AutoGenerateColumns="False" AllowPaging="True" HorizontalAlign="Center"
                        DataKeyNames="UsuId" CssClass="table table-hover table-striped table-bordered" 
                        OnRowCommand="grvUsuario_RowCommand" 
                         OnRowDataBound="grvUsuario_RowDataBound" OnPageIndexChanging="grvUsuario_PageIndexChanging" PageSize="2" 
                        ShowFooter="false" PagerStyle-HorizontalAlign="Center" PagerStyle-CssClass="bs-pagination">
                        <PagerSettings  PageButtonCount="10" Mode="Numeric" Position="Bottom"  />
                        <Columns>
                            <asp:BoundField DataField="UsuLogin" HeaderText="USUARIO" HtmlEncode="false" NullDisplayText="USU_CLOGIN"/>
                            <asp:BoundField DataField="UsuNombres" HeaderText="NOMBRE" NullDisplayText="USU_CLOGIN"/>
                            <asp:BoundField DataField="UsuEmail" HeaderText="MAIL" NullDisplayText="USU_CNOMBRES!USU_CAPELLIDOS"/>
                            <asp:BoundField DataField="UsuPerteneceConjunto" HeaderText="RESIDENTE" NullDisplayText="USU_BPERTENECE_CONJUNTO"/>
                            <asp:BoundField DataField="UsuEstado" HeaderText="ESTADO" NullDisplayText="USU_BESTADO"/>
                            <asp:ButtonField CommandName="Editar" ImageUrl="~/Imagenes/Img/General/document_edit.png" ControlStyle-Height="16px" 
                                 ControlStyle-Width="16px"
                                ButtonType="Image" Text="Edit" HeaderText="Edit Record">
                            <ControlStyle Height="16px" Width="16px" />
                            </asp:ButtonField>
                            <asp:ButtonField CommandName="Eliminar" ImageUrl="~/Imagenes/Img/General/document_delete.png" ControlStyle-Height="16px" 
                                 ControlStyle-Width="16px"
                                ButtonType="Image" Text="Inactivar" HeaderText="Inactivar">
                            <ControlStyle Height="16px" Width="16px" />
                            </asp:ButtonField>
                            <asp:ButtonField CommandName="Detalles" ImageUrl="~/Imagenes/Img/General/user_add.png" ControlStyle-Height="16px" 
                                 ControlStyle-Width="16px"
                                ButtonType="Image" Text="Detalles" HeaderText="Detalles">
                            <ControlStyle Height="16px" Width="16px" />
                            </asp:ButtonField>
                        </Columns>
                        <EmptyDataTemplate>
                            <asp:Label ID="lblResult2" Visible="true" runat="server" Text="NO EXISTEN REGISTROS EN BASE DE DATOS" CssClass="label label-default"></asp:Label>
                        </EmptyDataTemplate>
                        
                    </asp:GridView>
                </ContentTemplate>
                <Triggers>
                </Triggers>
            </asp:UpdatePanel>

    Y el modal despliega lo siguiente:

    <div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                            <asp:Label CssClass="TitulosUno" runat="server">Actualizar Usuario </asp:Label>
                        </div>
                        <asp:UpdatePanel ID="updEditar" runat="server" style="width:100%;">
                            <ContentTemplate>
                                <div class="modal-body" style="width:100%;">
                                    <div class="form-horizontal" role="form">
                                        <div class="form-group">
                                            <label for="inputEmail3" class="col-md-3 control-label">Nombres</label>
                                            <div class="col-md-8">
                                                <asp:TextBox ID="txtNombres" Type="text" CssClass="form-control" runat="server" placeholder="Nombres"
                                                 ValidationGroup="valEdit"></asp:TextBox>
                                            </div>
                                            <div class="col-md-1">
                                                <asp:RequiredFieldValidator  ID="RequiredFieldValidator7" runat="server" ErrorMessage="El nombre es requerido" Text="*" 
                                                 ControlToValidate="txtNombres" CssClass="ValidatorText" ValidationGroup="valEdit"></asp:RequiredFieldValidator>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputEmail3" class="col-md-3 control-label">Apellidos</label>
                                            <div class="col-md-8">
                                                <asp:TextBox ID="txtApellidos" Type="text" CssClass="form-control" runat="server" placeholder="Apellidos" 
                                                 ValidationGroup="valEdit"></asp:TextBox>
                                            </div>
                                            <div class="col-md-1">
                                                <asp:RequiredFieldValidator  ID="RequiredFieldValidator10" runat="server" ErrorMessage="El apellido es requerido" Text="*" 
                                                 ControlToValidate="txtApellidos" CssClass="ValidatorText" ValidationGroup="valEdit"></asp:RequiredFieldValidator>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputEmail3" class="col-md-3 control-label">Email</label>
                                            <div class="col-md-8">
                                                <asp:TextBox ID="txtMail" Type="text" CssClass="form-control" runat="server" placeholder="Email" 
                                                 ValidationGroup="valEdit"></asp:TextBox>
                                            </div>
                                            <div class="col-md-1">
                                                &nbsp;
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputEmail3" class="col-md-3 control-label">Es Residente</label>
                                            <div class="col-md-4">
                                                <asp:DropDownList ID="ddlEsResidente" runat="server" ValidationGroup="valEdit" CssClass="form-control"></asp:DropDownList>
                                            </div>
                                            <div class="col-md-5" style="text-align:left">
                                                <asp:RequiredFieldValidator  ID="RequiredFieldValidator12" runat="server" ErrorMessage="asasasasasd" Text="*" 
                                                 ControlToValidate="ddlEsResidente" CssClass="ValidatorText" ValidationGroup="valEdit"></asp:RequiredFieldValidator>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputEmail3" class="col-md-3 control-label">Estado</label>
                                            <div class="col-md-4">
                                                <asp:DropDownList ID="ddlEstado" runat="server" ValidationGroup="valEdit" CssClass="form-control"></asp:DropDownList>
                                            </div>
                                            <div class="col-md-5" style="text-align:left">
                                                <asp:RequiredFieldValidator  ID="RequiredFieldValidator13" runat="server" ErrorMessage="asasasasasd" Text="*" 
                                                 ControlToValidate="ddlEstado" CssClass="ValidatorText" ValidationGroup="valEdit"></asp:RequiredFieldValidator>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <asp:Label ID="lblResult" Visible="false" runat="server"></asp:Label>
                                    <asp:Button ID="btnSave" runat="server" Text="Actualizar" CssClass="btn btn-info" ValidationGroup="valEdit" />
                                    <asp:Button ID="btnClose" runat="server" Text="Cerrar" CssClass="btn btn-info" 
                                        data-dismiss="modal" aria-hidden="true" CausesValidation="false" />
                                </div>
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="grvUsuario" EventName="RowCommand" />
                                <asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
                            </Triggers>
                        </asp:UpdatePanel>
                    </div>
                </div>
            </div>

    El código para abrir el modal es el siguiente y esta dentro del evento grvUsuario_RowCommand: 

    System.Text.StringBuilder sb = new System.Text.StringBuilder();
                    sb.Append(@"<script type='text/javascript'>");
                    sb.Append("$('#editModal').modal('show');");
                    sb.Append(@"</script>");
                    ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "EditModalScript", sb.ToString(), false);

    Ahora bien cuando le coloco paginación a la grilla y quiero ir de pagina en pagina no hace nada. Esto se soluciona si quito los Triggers del updatepanel updEditar. 

    Me gustaria entender bien el porque de esta situacion y como se puede lograr que funcione la paginacion. Es decir por que y como funcionan los AsyncPostBackTrigger.

    Gracias de antemano

    viernes, 10 de abril de 2015 19:44

Respuestas

  • Hola nelson111,

    Gracias por consultar en los foros.

    AsyncPostBackTrigger.EventName (Propiedad): Obtiene o establece el evento de postback que desencadena la actualización de un control UpdatePanel.

    AsyncPostBackTrigger (Clase): Define un control y el evento opcional del control como desencadenador del control de postback asincrónico que provoca la actualización de un control UpdatePanel.          

    Te comparto un par de artículos de MSDN, así como una conversación de los foros en ingles, espero te sea útil

    AsyncPostBackTrigger.EventName (Propiedad)

    AsyncPostBackTrigger (Clase)

    Do an AsyncPostBackTrigger without a submit button

    Saludos,

    Karen.

    _________________


    Por favor, recuerde "Marcar como respuesta" las respuestas que hayan resuelto su problema.

    Es una forma común de reconocer a aquellos que han ayudado, y hace que sea más fácil para los otros visitantes encontrar la solución más tarde.

    Microsoft ofrece este servicio de forma gratuita, con la finalidad de ayudar a los usuarios y la ampliación de la base de datos de conocimientos relacionados con los productos y tecnologías de Microsoft. Este contenido es proporcionado "tal cual" y no implica ninguna responsabilidad de parte de Microsoft.



    jueves, 23 de abril de 2015 17:10
    Moderador

Todas las respuestas

  • Hola nelson111,

    Gracias por consultar en los foros.

    AsyncPostBackTrigger.EventName (Propiedad): Obtiene o establece el evento de postback que desencadena la actualización de un control UpdatePanel.

    AsyncPostBackTrigger (Clase): Define un control y el evento opcional del control como desencadenador del control de postback asincrónico que provoca la actualización de un control UpdatePanel.          

    Te comparto un par de artículos de MSDN, así como una conversación de los foros en ingles, espero te sea útil

    AsyncPostBackTrigger.EventName (Propiedad)

    AsyncPostBackTrigger (Clase)

    Do an AsyncPostBackTrigger without a submit button

    Saludos,

    Karen.

    _________________


    Por favor, recuerde "Marcar como respuesta" las respuestas que hayan resuelto su problema.

    Es una forma común de reconocer a aquellos que han ayudado, y hace que sea más fácil para los otros visitantes encontrar la solución más tarde.

    Microsoft ofrece este servicio de forma gratuita, con la finalidad de ayudar a los usuarios y la ampliación de la base de datos de conocimientos relacionados con los productos y tecnologías de Microsoft. Este contenido es proporcionado "tal cual" y no implica ninguna responsabilidad de parte de Microsoft.



    jueves, 23 de abril de 2015 17:10
    Moderador
  • Gracias Karen por tu ayuda.
    lunes, 27 de abril de 2015 20:58