asp.net - toolkitscriptmanager - asp: UpdateProgress-supresión del salto de línea

modal ajax control toolkit

Question

Empecé a trabajar con ASP.net AJAX (finalmente ☺). y tengo un panel de actualización junto con un asp: UpdateProgress. Mi problema: UpdateProgress siempre obliga a un salto de línea, ya que se presenta como una etiqueta div.

¿Hay alguna forma de forzarlo a que sea un lapso? Quiero mostrarlo en la misma línea que algunos otros controles sin tener que usar una tabla o incluso estremece el posicionamiento absoluto en CSS.

Estoy atrapado con ASP.net AJAX 1.0 y .net 3.0 si eso hace la diferencia.

Answer 1

Puedes hacer un div en línea así:

<div style="display:inline">stuff</div>

Aunque soy escéptico de que represente el div para ti ... No recuerdo haber tenido este problema en mis páginas ...

Answer 2

He tenido el mismo problema. No hay una manera fácil de decirle a la actualización Progreso que se realice en línea. Sería mejor que transfiera su propio elemento updateProgress. Puede agregar un oyente beginRequest y un oyente endRequest para mostrar y ocultar el elemento que desea visualizar en línea. Aquí hay una página simple que muestra cómo hacerlo:

aspx

<form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager>


    <asp:UpdatePanel runat="server" ID="up1" UpdateMode="Always">
        <ContentTemplate>
            <asp:Label ID="lblTest" runat="server"></asp:Label>
            <asp:Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_OnClick" />
        </ContentTemplate>    
    </asp:UpdatePanel>
    <img id="loadingImg" src="../../../images/loading.gif" style="display:none;"/><span>Some Inline text</span>

    <script>

        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function(sender, args) {
            if (args.get_postBackElement().id == "btnTest") {
                document.getElementById("loadingImg").style.display = "inline";
            }
        });


        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args) {
            if (document.getElementById("loadingImg").style.display != "none") {
                document.getElementById("loadingImg").style.display = "none";
            }
        });

    </script>

    </div>
</form>

cs

public partial class updateProgressTest : System.Web.UI.Page
{
    protected void btnTest_OnClick(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(1000);
        this.lblTest.Text = "I was changed on the server! Yay!";
    }
}

Answer 3

simplemente coloque su UpdateProgress dentro de un lapso con style = "position: absolute;"

Answer 4

Acabo de escribir en mi blog sobre mi propia solución a este problema. http://www.joeaudette.com/solving-the-aspnet-updateprogress-div-problem.aspx

Lo que hice fue tomar prestado el control UpdateProgress del proyecto Mono y lo modifiqué para representarlo como un lapso en lugar de un div. También copié un modifed el javascript ms-ajax asociado con el control y lo modifiqué para alternar entre visualización: en línea y visualización: ninguno en lugar de usar visualización: bloque

Hay un archivo .zip vinculado en mi publicación que contiene los archivos modificados.

Answer 5

Una forma mejor y más simple es usar UpdateProgress dentro de UpdatePanel con span. Lo probé y funcionó correctamente en IE, FF, navegadores Chrome. Me gusta esto:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        ..........
        <span style="position:absolute;">
            <asp:UpdateProgress ID="UpdateProgress1" runat="server"
                AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        <img alt="please wait..."src="/Images/progress-dots.gif" />
                    </ProgressTemplate>
            </asp:UpdateProgress> 
        </span> 
    </ContentTemplate>
</asp:UpdatePanel>

Answer 6

Mi solución fue envolverlo de la siguiente manera ...

<div class="load-inline">LOADER HERE</div>

Y en mi CSS uso ...

.load-inline {display:inline-block}

Answer 7

Simplemente aplique float:left de su etiqueta / cuadro de texto, etc. De esta manera:

en el encabezado:

<style type="text/css">
.tbx 
{
    float:left;
}

en el cuerpo:

<asp:TextBox CssClass="tbx" .... />

Answer 8

Mi solución: en CSS

.progress[style*="display: block;"] {
     display:inline !important;
}

Y ASP

<asp:UpdateProgress  class="progress" ID="UpdateProgress1" runat="server">