asp:UpdateProgress – suprimindo a quebra de linha

Question

Comecei a trabalhar com ASP.net AJAX (finalmente ☺).e eu tenho um painel de atualização junto com um asp:UpdateProgress.Meu problema:O UpdateProgress sempre força uma quebra de linha, porque é renderizado como uma tag div.

Existe alguma maneira de forçar que seja um intervalo?Quero exibi-lo na mesma linha de alguns outros controles sem precisar usar uma tabela ou mesmo estremece posicionamento absoluto em CSS.

Estou preso ao ASP.net AJAX 1.0 e .net 3.0, se isso faz diferença.

Answer 1

Acabei de postar no blog sobre minha própria solução para esse problema.http://www.joeaudette.com/solving-the-aspnet-updateprogress-div-problem.aspx

O que fiz foi pegar emprestado o controle UpdateProgress do projeto Mono e modificá-lo para renderizar como um span em vez de um div.Também copiei e modifiquei o javascript ms-ajax associado ao controle e modifiquei-o para alternar entre display:inline e display:none em vez de usar display:block

Há um arquivo .zip vinculado à minha postagem que contém os arquivos modificados.

Answer 2

simplesmente coloque seu UpdateProgress dentro de um intervalo com style="position:absolute;"

Answer 3

Eu tive o mesmo problema.Não há uma maneira fácil de dizer ao updateProgress para renderizar inline.Seria melhor lançar seu próprio elemento updateProgress.Você pode adicionar um ouvinte beginRequest e um ouvinte endRequest para mostrar e ocultar o elemento que deseja exibir embutido.Aqui está uma página simples que mostra como fazer isso:

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 4

Minha solução:Em CSS

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

E ASP

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

Answer 5

Uma maneira melhor e mais simples é usar UpdateProgress dentro do UpdatePanel com span.Eu testei isso e funciona corretamente nos navegadores IE, FF e Chrome.assim:

<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

Minha solução foi envolvê-lo da seguinte maneira ...

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

E no meu CSS eu uso...

.load-inline {display:inline-block}

Answer 7

Basta aplicar float:left para sua etiqueta/caixa de texto etc.Assim:

no cabeçalho:

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

no corpo:

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

Answer 8

Você pode fazer uma div inline assim:

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

Estou cético quanto à renderização do div para você ...Não me lembro de ter tido esse problema em minhas páginas...