asp:UpdateProgress - sopprimere l'interruzione di riga

Question

Ho iniziato a lavorare con ASP.net AJAX (finalmente ☺).e io ho un pannello di aggiornamento insieme con un asp:UpdateProgress.Il Mio Problema:UpdateProgress impone sempre una interruzione di linea, perché rende come un div-tag.

C'è qualche modo per forzare l'essere di una spanna, invece?Voglio visualizzare sulla stessa linea, come alcuni altri controlli senza dover utilizzare una tabella o anche brividi il posizionamento assoluto in CSS.

Mi sono bloccato con ASP.net AJAX 1.0 e .net 3.0, se questo fa la differenza.

Answer 1

Ho appena scritto un blog su la mia soluzione a questo problema.http://www.joeaudette.com/solving-the-aspnet-updateprogress-div-problem.aspx

Cosa che ho fatto è stato prendere in prestito il controllo UpdateProgress dal progetto Mono e modificato per eseguire il rendering di una spanna invece di un div.Ho anche copiato un modifed ms-ajax javascript associato con il controllo e la modifica per passare tra display:inline e display:none invece di usare display:block

C'è un .zip file linkato nel mio post che contiene i file modificati.

Answer 2

è sufficiente posizionare il UpdateProgress all'interno di un arco con style="position:absolute;"

Answer 3

Ho avuto lo stesso problema.Non vi è alcun modo semplice per dire updateProgress per il rendering in linea.Si, sarebbe meglio per rotolare il vostro proprio updateProgress elemento.È possibile aggiungere un beginRequest ascoltatore e endRequest ascoltatore per mostrare e nascondere l'elemento che si desidera visualizzare in linea.Qui è semplice pagina che mostra come fare:

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

La mia soluzione:In CSS

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

E ASP

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

Answer 5

Una migliore e più semplice è utilizzare UpdateProgress all'interno UpdatePanel con l'arco.L'ho provato e funziona correttamente in IE, FF, Chrome.come questa:

<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

La mia soluzione è stata quella di avvolgere come segue...

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

E nel mio CSS ho uso...

.load-inline {display:inline-block}

Answer 7

Basta applicare float:left per la tua etichetta/textbox etc.Come questa:

nell'intestazione:

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

nel corpo:

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

Answer 8

Si può fare un div inline come questo:

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

Io sono scettico di rendering div per voi, anche se...Io non ricordo di avere questo problema sulle mie pagine...