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 자바스크립트를 복사하고 디스플레이:블록을 사용하는 대신 디스플레이:인라인과 디스플레이:없음 사이를 전환하도록 수정했습니다.

내 게시물에 수정된 파일이 포함된 .zip 파일이 링크되어 있습니다.

다른 팁

style="position:absolute;"를 사용하여 UpdateProgress를 범위 내에 배치하기만 하면 됩니다.

나는 같은 문제를 겪었습니다.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를 범위와 함께 사용하는 것입니다.나는 이것을 테스트했고 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