asp:UpdateProgress - 抑制换行符

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

  •  09-06-2019
  •  | 
  •  

题

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

有什么办法可以强制它成为一个跨度吗？我想将它显示在与其他一些控件相同的行上，而无需使用表格甚至 颤抖 CSS 中的绝对定位。

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

有帮助吗？

解决方案

我刚刚在博客中介绍了我自己解决这个问题的方法。http://www.joeaudette.com/solving-the-aspnet-updateprogress-div-problem.aspx

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

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

其他提示

只需将 UpdateProgress 放在 style="position:absolute;" 的范围内即可

我也遇到过同样的问题。没有简单的方法可以告诉 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!";
    }
}

我的解决方案：在CSS中

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

和ASP

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

更好、最简单的方法是在 UpdatePanel 中使用 UpdateProgress 和 span。我已经测试过这个并且可以在 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>

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

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

在我的 CSS 中我使用...

.load-inline {display:inline-block}

只需申请 float:left 到您的标签/文本框等。像这样：

在标题中：

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

在身体里：

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

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

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

我对它为你渲染 div 持怀疑态度......我不记得我的页面上有这个问题......

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top