asp:UpdateProgress – Unterdrückung des Zeilenumbruchs

Question

Ich habe angefangen, mit ASP.net AJAX zu arbeiten (endlich ☺).und ich habe ein Update-Panel zusammen mit einem asp:UpdateProgress.Mein Problem:Der UpdateProgress erzwingt immer einen Zeilenumbruch, da er als Div-Tag ausgegeben wird.

Gibt es eine Möglichkeit, stattdessen eine Spanne zu erzwingen?Ich möchte es in derselben Zeile wie einige andere Steuerelemente anzeigen, ohne eine Tabelle verwenden zu müssen oder sogar Schauder absolute Positionierung in CSS.

Ich bleibe bei ASP.net AJAX 1.0 und .net 3.0, wenn das einen Unterschied macht.

Answer 1

Ich habe gerade über meine eigene Lösung für dieses Problem gebloggt.http://www.joeaudette.com/solving-the-aspnet-updateprogress-div-problem.aspx

Ich habe mir das UpdateProgress-Steuerelement aus dem Mono-Projekt ausgeliehen und es so geändert, dass es als Span statt als Div gerendert wird.Ich habe auch das mit dem Steuerelement verknüpfte ms-ajax-Javascript kopiert und geändert und es so geändert, dass zwischen display:inline und display:none umgeschaltet wird, anstatt display:block zu verwenden

In meinem Beitrag ist eine ZIP-Datei verlinkt, die die geänderten Dateien enthält.

Answer 2

Platzieren Sie einfach Ihren UpdateProgress in einem Span mit style="position:absolute;"

Answer 3

Ich hatte das gleiche Problem.Es gibt keine einfache Möglichkeit, updateProgress anzuweisen, inline zu rendern.Es wäre besser, Ihr eigenes updateProgress-Element zu erstellen.Sie können einen beginRequest-Listener und einen endRequest-Listener hinzufügen, um das Element, das Sie inline anzeigen möchten, ein- und auszublenden.Hier ist eine einfache Seite, die zeigt, wie es geht:

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

Meine Lösung:In CSS

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

Und ASP

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

Answer 5

Eine bessere und einfachste Möglichkeit ist die Verwendung von UpdateProgress innerhalb von UpdatePanel mit span.Ich habe dies getestet und funktioniert ordnungsgemäß in den Browsern IE, FF und Chrome.so was:

<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

Meine Lösung bestand darin, es wie folgt zu verpacken ...

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

Und in meinem CSS verwende ich ...

.load-inline {display:inline-block}

Answer 7

Bewerben Sie sich einfach float:left zu Ihrem Etikett/Textfeld usw.So was:

im Header:

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

im Körper:

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

Answer 8

Sie können ein Div wie folgt inline erstellen:

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

Ich bin jedoch skeptisch, ob es das Div für Sie rendert ...Ich kann mich nicht erinnern, dieses Problem auf meinen Seiten gehabt zu haben ...