asp:UpdateProgress - suppression du saut de ligne

StackOverflow https://stackoverflow.com/questions/42499

  •  09-06-2019
  •  | 
  •  

Question

J'ai commencé à travailler avec ASP.net AJAX (enfin ☺).et j'ai un panneau de mise à jour avec un asp:UpdateProgress.Mon problème:UpdateProgress force toujours un saut de ligne, car il s'affiche sous la forme d'une balise div.

Existe-t-il un moyen de forcer le fait qu'il s'agisse d'une durée ?Je souhaite l'afficher sur la même ligne que certains autres contrôles sans avoir à utiliser de tableau ni même frissons positionnement absolu en CSS.

Je suis coincé avec ASP.net AJAX 1.0 et .net 3.0 si cela fait une différence.

Était-ce utile?

La solution

Je viens de bloguer sur ma propre solution à ce problème.http://www.joeaudette.com/solving-the-aspnet-updateprogress-div-problem.aspx

Ce que j'ai fait, c'est d'emprunter le contrôle UpdateProgress du projet Mono et de le modifier pour le rendre sous forme de span au lieu de div.J'ai également copié et modifié le javascript ms-ajax associé au contrôle et je l'ai modifié pour basculer entre display:inline et display:none au lieu d'utiliser display:block

Il y a un fichier .zip lié dans mon message qui contient les fichiers modifiés.

Autres conseils

placez simplement votre UpdateProgress dans un span avec style="position:absolute;"

J'ai eu le même problème.Il n'existe pas de moyen simple de demander à updateProgress de s'afficher en ligne.Vous feriez mieux de lancer votre propre élément updateProgress.Vous pouvez ajouter un écouteur startRequest et un écouteur endRequest pour afficher et masquer l'élément que vous souhaitez afficher en ligne.Voici une page simple qui montre comment procéder :

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!";
    }
}

Ma solution :En CSS

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

Et ASP

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

Un moyen meilleur et plus simple consiste à utiliser UpdateProgress dans UpdatePanel avec span.J'ai testé cela et fonctionne correctement dans les navigateurs IE, FF et Chrome.comme ça:

<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>

Ma solution était de l'envelopper comme suit...

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

Et dans mon CSS, j'utilise...

.load-inline {display:inline-block}

Il suffit de postuler float:left à votre étiquette/zone de texte, etc.Comme ça:

dans l'en-tête :

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

dans le corps:

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

Vous pouvez créer un div en ligne comme ceci :

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

Je suis cependant sceptique quant au rendu du div pour vous...Je ne me souviens pas d'avoir eu ce problème sur mes pages...

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top