asp:UpdateProgress - 禁止换行答案

【问题标题】：asp:UpdateProgress - suppressing the line-breakasp:UpdateProgress - 禁止换行
【发布时间】：2010-09-07 17:39:13
【问题描述】：

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

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

如果有区别的话，我会坚持使用 ASP.net AJAX 1.0 和 .net 3.0。

【问题讨论】：

标签： asp.net asp.net-ajax

【解决方案1】：

只需将 UpdateProgress 放在 style="position:absolute;" 的跨度内

【讨论】：

这很好用。您需要将 DynamicLayout 属性设置为 false 才能使其正常工作。

【解决方案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!";
    }
}

【讨论】：

【解决方案3】：

我的解决方案：在 CSS 中

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

和 ASP

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

【讨论】：

【解决方案4】：

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

我所做的是从 Mono 项目中借用 UpdateProgress 控件并将其修改为呈现为跨度而不是 div。我还复制了一个修改后的与控件关联的 ms-ajax javascript，并将其修改为在 display:inline 和 display:none 之间切换，而不是使用 display:block

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

【讨论】：

我正在更改已接受的答案（对不起，史蒂文！），因为这种方法效果更好。我已将源代码发布到我的 UpdateProgressEx 控件：stum.de/2010/01/28/…

【解决方案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>

【讨论】：

【解决方案6】：

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

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

在我的 CSS 中，我使用...

.load-inline {display:inline-block}

【讨论】：

【解决方案7】：

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

在标题中：

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

在体内：

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

【讨论】：

【解决方案8】：

你可以像这样制作一个 div 内联：

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

我怀疑它是否会为您呈现 div...我不记得我的页面上有这个问题...

【讨论】：