Question

我开始使用ASP.net AJAX（最后是☺）。我有一个更新面板和一个asp：UpdateProgress。我的问题：UpdateProgress总是强制换行，因为它呈现为div-tag。

有没有办法强迫它成为跨度？我希望将它显示在与其他控件相同的行上，而不必在CSS中使用表格甚至 shudders 绝对定位。

我坚持使用ASP.net AJAX 1.0和.net 3.0，如果这有所不同。

Answer 1

只需将UpdateProgress置于带有style =“position：absolute;”

的范围内

Answer 2

我遇到了同样的问题。没有简单的方法可以告诉updateProgress呈现内联。你最好滚动自己的updateProgress元素。您可以添加beginRequest侦听器和endRequest侦听器，以显示和隐藏要内联显示的元素。这是一个简单的页面，显示了如何做到这一点：

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

我的解决方案：在CSS中

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

和ASP

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

Answer 4

我刚刚写了一篇关于我自己的解决方案的博客。 http://www.joeaudette.com/solving-the-aspnet-updateprogress-div-problem.aspx

我所做的是从Mono项目借用UpdateProgress控件并将其修改为渲染为span而不是div。我还复制了修改了与控件关联的ms-ajax javascript并修改它以在display：inline和display：none之间切换，而不是使用display：block

我的帖子中链接了一个包含已修改文件的.zip文件。

Answer 5

更好，最简单的方法是在UpdatePanel中使用带有span的UpdateProgress。我测试了这个并在IE，FF，Chrome浏览器中正常工作。像这样：

<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

只需将float:left应用于您的标签/文本框等。像这样：

标题中的

：

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

在体内：

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

Answer 7

我的解决方案是将其包装如下......

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

在我的CSS中我使用...

.load-inline {display:inline-block}

Answer 8

您可以像这样制作div inline：

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

我对它为你渲染div感到怀疑......我不记得在我的页面上出现这个问题......

asp：UpdateProgress - 抑制换行符

8 个答案: