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

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

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

Другие советы

просто поместите ваш UpdateProgress внутри диапазона со стилем="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:UpdateProgress  class="progress" ID="UpdateProgress1" runat="server">

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

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

<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