c#如何在“处理"过程中更改按钮图标/格式按钮事件? [英] c# How to change button icon/formatting while "processing" button event?

问题描述

我在后面的代码中创建了多个服务器 HtmlButton ，如下所示:

I have several server HtmlButtons created in code behind like this:

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 :

Now, when the button is clicked I would like to first change the InnerHtml in the Page_Load event:

private void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack)
    {
        Control control = null;
        string controlName = Request.Params.Get("__EVENTTARGET");
        if (controlName != null && controlName != string.Empty)
        {
            control = FindControl(controlName);
            if(control != null)
            {
                HtmlButton button = (HtmlButton)control;
                UpdatePanel uPanel = (UpdatePanel)button.Parent.Parent;
                string id = button.ID.Split('_')[1];
                switch (id)
                {
                    case "btnStop":
                        button.InnerHtml = "<i class=\"fa fa-spinner fa-pulse btn-red\"/></i>";
                        break;
                    case "btnStart":
                        button.InnerHtml = "<i class=\"fa fa-spinner fa-pulse btn-green\"/></i>";
                        break;
                    case "btnRestart":
                        button.InnerHtml = "<i class=\"fa fa-refresh fa-spin btn-blue\"/></i>";

                        break;
                    default:
                        break;
                }
                uPanel.Update();
            }
        }
    }
}

然后在事件中将其更改回去:

And then in the event, change it back when it is done:

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();
}

是否有更标准"的方法可以做到这一点?

Is there a more "standard" approach to doing this or is this fine?

此刻自强制转换以来不起作用:

At the moment it isn't working since the cast:

UpdatePanel uPanel = (UpdatePanel)button.Parent;

给我一​​个错误:

• $ exception {无法将类型为'System.Web.UI.Control'的对象强制转换为类型为'System.Web.UI.UpdatePanel'."} System.InvalidCastException

似乎我从 button.Parent 获得的控件无法转换为任何对象.我需要在 Page_Load 中调用(button.Parent作为UpdatePanel).Update(); 才能正常工作.有建议吗?

It Seems that the control I get from button.Parent can't be cast to anything. I need to call (button.Parent as UpdatePanel).Update(); in Page_Load for this to work. Suggestions?

需要致电:

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

由于第一个父级是 ContentTemplateContainer .

代码现在可以正常运行，但是图标从不会更改为 fa-spinner ，然后再返回.我的意图是，在上述情况下，它应该显示 fa-spinner 大约2秒钟，然后返回其原始图标.

The code now runs without error, but the icon never changes to fa-spinner and then back. My intention is that it should in the above case show the fa-spinner for about 2 seconds then go back to its original icon.

我意识到由于页面生命周期的原因，无法以我尝试的方式执行此操作.在回发 Page_Load 和button事件之间，页面未呈现.因此，即使按钮的 InnerHtml 已更改，也不会显示.因此，我需要一种不同的方法.

I am realizing that it is not possible to do this the way I am trying to, due to the page life cycle. The page is not rendering between the postback Page_Load and the button event. So even though the InnerHtml of the button has changed, it is never displayed. So I need a different approach to this.

我们是否可以强制渲染有问题的 UpdatePanel ?我们可以创建一种变通办法来两次触发事件吗?第一次更改图标并完成工作，第二次更改图标吗?还有其他想法吗?

Could we force a render of the UpdatePanel in question? Can we create a workaround to trigger the event twice? First time to change icon and do work and second time to change icon back? Other ideas?

推荐答案

正如您所说，由于页面循环，您将无法看到页面加载和按钮单击事件之间的图标变化.

As you said because of the page cycle you will not be able to see the icon change between page load and button click event.

因此，在这种情况下，我建议使用@Mauricio在他的评论中建议的一些Javascript.

So I would suggest in this case to use a little Javascript as @Mauricio suggested in his comment.

您可以添加新的客户端事件 OnClientClick ="showIcon"

You can add a new client event OnClientClick="showIcon"

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

现在，该图标将在单击客户端上的按钮后立即出现，并且当他刷新页面时，该图标将根据您的登录名消失，即服务器端按钮单击事件.

Now this icon will appear just after clicking the button on the client side and when he page refresh it will disappear based on your login the server side button click event.

确保您将需要在javascript中添加登录信息，因为它不仅像我写的那样简单，而且我只是想向您介绍如何解决此问题.

For sure you will need to add your login in the javascript as it is not just as simple as I wrote, but I just wanted to give you my idea of how I would solve this issue.

这篇关于c#如何在“处理"过程中更改按钮图标/格式按钮事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！