C＃ボタンイベントを処理中にボタンアイコン/書式を変更するにはどうすればよいですか？

Question

私はこのような背後にあるコードで作成HtmlButtonのいくつかのサーバーがあります。

HtmlButton button = new HtmlButton(); 
button.ID = idString + "_btnStart"; 
button.InnerHtml = "<i class=\"fa fa-play btn-green\"/></i>"; 
button.Attributes.Add("type", "button"); 
button.Attributes.Add("runat", "server"); 
button.Attributes.Add("class", "btn btn-link btn-xs"); 
button.Attributes.Add("title", "Start"); 
button.ServerClick += new EventHandler(BtnStart_Click); 
ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(button); 

ボタンはすべて、それぞれがUpdatePanel、自分の持っている：

今

UpdatePanel uPanel = new UpdatePanel() 
{ 
    ID = idString + "_uPanel", 
    UpdateMode = UpdatePanelUpdateMode.Conditional 
}; 
uPanel.ContentTemplateContainer.Controls.Add(button); 

を、ボタンがクリックされたときに、私がしたいのまず、Page_LoadイベントのInnerHtmlを変更してください。

そして、それが行われたときに、イベントで、それをバックに変更：

private void BtnStart_Click(object sender, EventArgs e) 
{ 
    HtmlButton button = (HtmlButton)sender; 
    Debug.WriteLine("Button clicked: " + button.ID); 

    // sleeping to simulate process stuffs 
    Thread.Sleep(2000); 

    button.InnerHtml = "<i class=\"fa fa-play btn-green\"/></i>"; 
    (button.Parent.Parent as UpdatePanel).Update(); 
} 

は、これを行うにより、「標準」アプローチはありますか。この罰金ですか？

は、現時点ではキャスト以来、機能していません。

UpdatePanel uPanel = (UpdatePanel)button.Parent; 

は私にエラーを与える：

• $exception {"Unable to cast object of type 'System.Web.UI.Control' to type 'System.Web.UI.UpdatePanel'."} System.InvalidCastException

私がbutton.Parentから取得する制御をキャストすることができないようです何かに。これを行うにはPage_Loadに(button.Parent as UpdatePanel).Update();と電話する必要があります。提案？

編集1：呼び出すために必要な

：

UpdatePanel uPanel = (UpdatePanel)button.Parent.Parent; 

最初の親がContentTemplateContainerですので。

コードはエラーなく実行されますが、アイコンはfa-spinnerに変更されずに戻ります。私の意図は、上のケースで約2秒間fa-spinnerを表示して元のアイコンに戻るべきであるということです。

編集2：

私は原因ページのライフサイクルに、私がしようとしているこの方法を行うことは不可能であることを実現しています。ページは、ポストバックPage_Loadとボタンイベントの間でレンダリングされません。したがって、ボタンのInnerHtmlが変更されても、決して表示されません。ですから私はこれに対して別のアプローチが必要です。

UpdatePanelのレンダリングを強制できますか？イベントを2回トリガーする回避策を作成できますか？初めてアイコンを変更して作業し、2回目にアイコンを変更するには？他のアイデア？

Answer 1

ページサイクルのために、ページロードとボタンクリックイベントの間でアイコンの変更が表示されないことがあります。

だから私は、@Mauricioが彼のコメントで示唆したように、この場合は少しJavascriptを使用することをお勧めします。

あなたは、クライアント側のボタンをクリックした後、新しいクライアントイベント今OnClientClick="showIcon"

function showIcon() 
{ 
    document.getElementById('#myBtnId').innerHTML = <i class='fa fa-spinner fa-pulse btn-red'/></i>" 
} 

このアイコンが表示されますを追加することができ、彼がページ更新すると、それはあなたのログインサーバー側のボタンのクリックに基づいて表示されなくなりますイベント。

JavaScriptを使用してログインを追加する必要がありますが、私が書いただけでは簡単ではありませんが、この問題をどのように解決するかということを伝えたいと思います。