1

はじめに：

リンクボタン付きのリピーターがあります。あるボタンをクリックすると、それだけが透明になり、残りのボタンは変更されないようにします。

D-テール：

LinkBut​​tonsのリピーターがあります：

<div style="position: relative">
<asp:Repeater runat="server" ID="repStatuses" 
        onitemdatabound="repStatuses_ItemDataBound"
        onitemcommand="repStatuses_ItemCommand">
  <ItemTemplate>
        <div id="divLinkBtn" style="display:inline"><asp:LinkButton ID="linkBtnStatuses" runat="server" CommandName="ShowText" 
            CommandArgument='<%# Eval("Priority") + ";" + Eval("LevelID") + ";" + Eval("ID") %>'
            OnClientClick='<%# "MyFunc(" + Eval("Priority") + ");" %>'>
            <div runat="server" id="divSts" class="fontAriel" ></div>
        </asp:LinkButton></div>
  </ItemTemplate>
    </asp:Repeater>
</div>

LinkBut​​tonは、次のJquery関数を使用してPage_Loadでフェードインします。Page_Loadとjqueryコードは次のとおりです。

Page_Load：

protected void Page_Load(object sender, EventArgs e)
{
    SetPageTitle();

    if (!Page.IsPostBack)
    {
        LoadStatusesAndButtons();

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBarWithFadeIN();</script>", false);
    }

    else
        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBar();</script>", false);

}

Jquery

function LoadBarWithFadeIN() {
$(document).ready(function () {

    $('a[id*="repStatuses"]').each(function () {
        $(this).show(2500);
        $(this).delay(1000);
    });
});

}

function LoadBar() {
$(document).ready(function () {

    $('a[id*="repStatuses"]').each(function () {
        $(this).show(0);

    });
});

}

LinkBut​​tonをクリックすると、透明になります。codeこれにより、最初のlinkBut​​tonのみが透過的になることがわかりました。

  $(document).ready(function () {
  $('#divLinkBtn').click(function () {
      alert('divlinkbutton presed');
      $(this).css({ 'opacity': 0.4 });
  });
});

問題は、ボタンが1秒間透明になり、ページがLoadBar()関数をロードして透明度が消えることです。 もう1つは、この関数が残りのボタンを処理しないことです。

今必要なのは、他のリンクボタンをクリックするまで、このLinkBut​​tonは透明なままである必要があるということです。

クリックされていないすべてのボタンをそのままロードし、特定のクリックされたボタンを透明度でロードする方法を考えていましたが、コーディングの経験が不足しているため、これを行う方法が見つかりません。

「短い」投稿でごめんなさい:)

どんな助けでも大歓迎です!!!!!

4

2 に答える 2

1

ぐっすり眠った後、ここに簡単な（しかし最もエレガントではない）解決策があります：

 protected void repStatuses_ItemCommand(object source, RepeaterCommandEventArgs e)
{
   SetAsOriginal();

    //Get the linkbutton that was clicked
    LinkButton lnkBtnClicked = e.CommandSource as LinkButton;       //e- is the object of the repeater. CommandSource- is the clicked
    if (lnkBtnClicked != null)
    {
        SetOpacity(lnkBtnClicked, "0.4");
    }

private void SetAsOriginal()
{
    foreach (RepeaterItem item in repStatuses.Items)
    {
        LinkButton btn = item.FindControl("linkBtnStatuses") as LinkButton;
        SetOpacity(btn, "1.0");
    }
}

private void SetOpacity(LinkButton linkButton, string opacityValue)         //SET THE OPACITY TO THE SPECIFIC linkbutton 
{
    linkButton.Style.Add("opacity", opacityValue);
}

上記の答えは非常によく機能していましたが、私の要求には答えませんでした。クリックしたボタンだけを透明に設定する必要があり、残りのボタンは元に戻す必要があります。

そこで、同様の問題が発生する可能性のある人のために解決策を指定することにしました。

みんなありがとう。

追伸：@LukaszMに感謝します

于 2013-01-03T08:10:29.463 に答える
1

2番目のページの読み込み後にボタンが再表示される理由として考えられるのは、jQueryで行われた変更がViewStateに保存されないため、ポストバック間で保持されないためです。クリックでポストバックを受け取った場合は、LinkButtonサーバー側でクリックされたという情報を保存できます（つまり、クリックイベントを処理するC＃コードでクリックされたクラスを追加します）。次に、クライアント側のスクリプトを変更して、LinkButtonこのクラスのすべてのコントロールの透明度を設定できます（および最近クリックしたボタンの特別な処理）。要素に適切な透明度設定を与えるクラスを定義することもできます。このためのコードについてサポートが必要な場合はお知らせください。

2番目の問題については、IDで要素を取得し、htmlページのスコープ内で一意である必要があることに注意してください。それがおそらく最初のものに対してのみ機能する理由です。すべての要素で機能させるには、代わりにクラスを使用してください。次のように、aspxにクラスを割り当てることができます。

<div id="divLinkBtn" class="divLnkBtnClass" style="display:inline">... </div>

次のようにクリックハンドラーを割り当てます。

$(document).ready(function () {
$('.divLnkBtnClass').click(function () {
  alert('divlinkbutton presed');
  $(this).css({ 'opacity': 0.4 });
});
});

これにより、スクリプトがすべてのに対して機能するようになりますdiv。

このコードはまだテストしていません。問題が発生した場合はお知らせください。修正して、正しく機能するようにサポートします。

アップデート

ポストバック全体の透明性を維持する方法はいくつかあります。アイテムがクリックされるたびにポストバックが発生するため、アイテムを保存してサーバー側に復元するのが、目的の効果を実現する最も簡単な方法の1つだと思います。

  • まず、コードビハインドでページにプライベートフィールドを追加します。

    private List<String> itemsClicked = null;

    およびHiddenFieldaspx内のコントロール（コントロールの外側Repeater）：

    <asp:HiddenField runat="server" ID="hfButtonsClicked" Value="" />

    これを使用して、すでにクリックされているいくつかのコントロールHiddenFieldを保存します。ClientIDLinkButton

  • 次に、Page_Loadメソッドで、非表示フィールドの値を使用してフィールドを初期化します。

    protected void Page_Load(object sender, EventArgs e)
{
    SetPageTitle();

    //initialize itemsClicked before binding data to the repeater
    itemsClicked = hfButtonsClicked.Value.Split(new char[] { ';' }, StringSplitOptions.RemoveEmptyEntries).ToList();

    if (!Page.IsPostBack)
    {
        LoadStatusesAndButtons();

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBarWithFadeIN();</script>", false);
    }
    else
    {
        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBar();</script>", false);
    }
}

  • 次に、ページに新しいメソッドを追加します。これは次のステップで使用されます。

    private void SetOpacity(LinkButton linkButton, string opacityValue)
{
    linkButton.Style.Remove("opacity");
    linkButton.Style.Add("opacity", opacityValue);
}

  • 最後に、アイテムがクリックされたときにIDを保存するコードを追加します。クリックイベントを使用することも、既存のOnItemCommandイベントハンドラーを利用することもできます。

    protected void repStatuses_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    //get LinkButton that was clicked
    LinkButton lnkBtnClicked = (e.CommandSource as LinkButton);
    if (lnkBtnClicked != null)
    {
        //if item was not clicked before, so the opacity is not set
        if (lnkBtnClicked.Style["opacity"] == null)
        {
            //save control ClientID in the HiddenField
            hfButtonsClicked.Value += String.Format(";{0}", lnkBtnClicked.ClientID);

            SetOpacity(lnkBtnClicked, "0.4");
        }
    }

    //the rest of the original code should be here
    //...
}

アイテムがデータバインドされている場合、ポストバック後に不透明度を復元するメソッド：

    protected void repStatuses_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        LinkButton lnkBtn = (e.Item.FindControl("linkBtnStatuses") as LinkButton);

        if (lnkBtn != null)
        {
            //if item was clicked before, so the opacity should be restored
            if (itemsClicked.Contains(lnkBtn.ClientID))
            {
                SetOpacity(lnkBtn, "0.4");
            }
        }

        //the rest of the original code should be here
        //...
    }

これをサンプルアプリケーションに実装しましたが、期待どおりに機能しているようです。このコードで問題が発生した場合はお知らせください。

その他の注意事項

ViewState追加のコントロールの代わりにオブジェクトを使用することもできますがHiddenField、最終的にjQueryで不透明度を保存/復元するようにソリューションを変更したい場合は、を使用するHiddenField方がはるかに簡単です。

コードに加える必要のあるいくつかの改善もあります（つまり、文字列セパレータを読み取り専用変数に移動するか、不透明度属性の値をハードコーディングしない）が、答えを短くして少し簡単にするためにこのように書きました読む。

于 2013-01-01T12:56:25.757 に答える