11 sept 2011

Solución 3 - Invocar función de servidor (C#) desde cliente (JavaScript)"

Hoy me he pelado durante 2 horas con este problema, pero al fin lo saque:

Hay varias soluciones, pero me centro en la que he aplicado,(sospecho que..) la más insegura.

Tenia que realizar un div pop-up de confirmación para eliminar un producto de un carrito de compra de una aplicación web .NET. El problema venía dado porqué esta función de EliminarProducto() hacía PostBack al servidor y el pop-up tenía que estar hecho en JQuery (Javascript). Ejecución en Cliente y ejecución en Servidor no son buenos compañeros.
Aún tengo que comprobar que sea compatible en todos los navegadores.

La solución se hallaba en la instrucción oculta javacript que permite los PostBacks del .NET. He tenido que parar la ejecución, realizar el pop-up confirmación Jquery, y luego proseguir (si tocaba) la ejecución donde lo había dejado, en el PostBack.

La instrucción interna de .NET en Javascript que se debía parar era :  __doPostback('idcontrolnet', ''). 
Lo que no me ha convencido ha sido el cómo he obtenido el  'idcontrolnet'. Lo he sacado haciendo splits del atributo "href" del LinkButton (también se puede hacer el atributo "pathname").


<script type="text/javascript">
        $().ready(function () {
            $('#dialogContent').dialog({
                autoOpen: false,
                modal: true,
                bgiframe: true,
                title: "MySql Membership Config Tool",
            });
        });

        function rowAction(uniqueID) {

        $('#dialogContent').dialog('option', 'buttons',
        {
            "OK": function () {
                    //uniqueID.pathname.replace("__doPostBack('", "").replace("','')", "");
                 __doPostBack((uniqueID.href).replace("javascript:__doPostBack('", "").replace("','')", ""), '');
                $(this).dialog("close"); 
                return false; 
            },
            "Cancel": function () { $(this).dialog("close"); }
        });

                    $('#dialogContent').dialog('open');

                    return false;
                }
 
    </script>

    <asp:Repeater ID = "RptItems" runat = "server" onitemdatabound="RptItems_ItemDataBound" onitemcommand="RptItems_ItemCommand">
        <ItemTemplate>
            <li>
                <asp:Literal ID = "LitID" runat = "server" Visible = "false" Text = '<%# Eval("ID") %>'></asp:Literal>
                <div class="thumb">
                    <asp:Image ID = "ImgItem" runat = "server" Width = "52" Height = "42" />
                </div>
                <div class="right_col">
                    <div class="title"><asp:Literal ID = "LitNombre" runat = "server" Text = '<%# Eval("ProductoNombre") %>'></asp:Literal></div>
                    <div class="info">Qty: <asp:Literal ID = "LitCantidad" runat = "server" Text = '<%# Eval("Cantidad") %>'></asp:Literal> | Talla: <asp:Literal ID = "LitTalla" runat = "server" Text = '<%# Eval("TallaNombre") %>'></asp:Literal></div>
                    <asp:LinkButton ID = "LnkEliminar" runat = "server" OnClientClick="return rowAction(this);" CssClass = "delete" CommandArgument = '<%# Eval("ID") %>' CommandName = "borrar" ><span class="icon">&nbsp;</span>Eliminar</asp:LinkButton>
                    <div class="price"><asp:Literal ID = "LitPrecio" runat = "server" ></asp:Literal>$</div>
                </div>
            </li>
        </ItemTemplate>
    </asp:Repeater>
Fuente: http://www.integratedwebsystems.com/2009/12/using-jquery-modal-dialog-confirmation-with-an-asp-net-server-control/

No hay comentarios: