asp: UpdateProgress - подавление перевода строки

Question

Я начал работать с ASP.net AJAX (наконец, ☺). и у меня есть панель обновления вместе с asp: UpdateProgress. Моя проблема: UpdateProgress всегда вызывает разрыв строки, потому что он отображается как тег div.

Есть ли способ заставить его быть промежутком? Я хочу отобразить его в той же строке, что и некоторые другие элементы управления, без необходимости использовать таблицу или даже дрожь абсолютное позиционирование в CSS.

Я застрял с ASP.net AJAX 1.0 и .net 3.0, если это имеет значение.

Answer 1

просто поместите ваш UpdateProgress в промежуток с style = "position: absolute;"

Answer 2

У меня была такая же проблема. Нет простого способа сообщить updateProgress, чтобы он отображался как inline. Вам лучше было бы свернуть свой собственный элемент 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

Что я сделал, так это позаимствовал элемент управления UpdateProgress из проекта Mono и изменил его для рендеринга в виде span вместо div. Я также скопировал модифицированный javascript ms-ajax, связанный с элементом управления, и изменил его для переключения между дисплеем: встроенным и отображением: нет вместо использования display: block

В моем сообщении есть ссылка на файл .zip, содержащий измененные файлы.

Answer 5

Лучший и самый простой способ - использовать UpdateProgress внутри UpdatePanel с 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>

Answer 6

Мое решение состояло в том, чтобы обернуть это следующим образом ...

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

И в моем CSS я использую ...

.load-inline {display:inline-block}

Answer 7

Просто примените float:left к вашему ярлыку / текстовому полю и т. Д. Как это:

в шапке:

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

в теле:

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

Answer 8

Вы можете сделать div встроенным, как это:

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

Я скептически отношусь к тому, что это делает div для вас ... Я не помню, чтобы эта проблема была на моих страницах ...