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/solve-the-aspnet-updateprogress-div-problem.aspx

私がやったことは、Mono プロジェクトから UpdateProgress コントロールを借用し、div ではなくスパンとしてレンダリングするように変更しました。また、コントロールに関連付けられた変更された ms-ajax JavaScript をコピーし、display:block を使用する代わりに、display:inline と display:none を切り替えるように変更しました。

私の投稿には、変更されたファイルを含む .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