BAĞLANTILARIM

Takip Edin:

1

Asp.net ile kolay ProgressBar yapımı

Perşembe, Haziran 29, 2017 / / , , ,



Bir işlemin yüzde kaçının tamamlandığını gösteren dinamik bir progressbar yapıyoruz. Bu işlem Jquery kullanmadan, sayfada sadece 1 adet UpdatePanel ve 1 Adet Timer kontrolü yardımıyla aşağıdaki şekilde yapılabilir.

Butona basıldıktan sonra Timer devreye girsin istedik. Bu yüzden tasarım tarafında Timer kontrolünün Enable özelliğini "false" olarak belirledik. Saniyede bir kez çalışması için Interval özelliğini "1000" olarak ayarladık.

Tasarım tarafı

<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick" Enabled="false"></asp:Timer>
                    <div style="width:100%; height:28px; border:1px solid #aaa; padding:1px;">
                    <asp:Literal ID="ltrBar" runat="server"></asp:Literal>
                    </div>
                        <br />
                    <asp:Literal ID="ltrYuzde" runat="server"></asp:Literal>
                    <br />
                    <br />
                    <br />
                    <div style="text-align: center;">
                        <asp:LinkButton ID="linkGonder" runat="server" CssClass="buton yesil" Style="padding: 15px 50px; font-size: 17px;" OnClick="linkGonder_Click"><i class="fa fa-paper-plane"></i> Gönder</asp:LinkButton>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>


Kod tarafı


        static int listeElemanSiraNo;
        static List<string> listeMailAdres = new List<string>(); //mail adreslerin olduğu liste
   protected void linkGonder_Click(object sender, EventArgs e)
        {
            listeElemanSiraNo = 0;
            linkGonder.Enabled = false;
            Timer1.Enabled = true;
        }


        protected void MailIslem(int mailAdresNo)
        {
            try
            {
                if (listeMailAdres.Count > 0)
                {
                    string gonderilecekEpostaAdresi = listeMailAdres[mailAdresNo];
                    ////mailgönderimini burada yap
                    listeElemanSiraNo = mailAdresNo + 1;
                    double toplamDeger = listeMailAdres.Count;
                    double bulunanDeger = listeElemanSiraNo;
                    int tamamlananYuzde = (int)Math.Round((double)(100 * bulunanDeger) / toplamDeger);
                    ltrBar.Text = "<div style=\"background-color:#ccc; height:28px; width:" + tamamlananYuzde + "%;\"></div>";
                    ltrYuzde.Text = "%" + tamamlananYuzde.ToString();
                }
            }
            catch (Exception ex)
            {
                lblIslemSonuc.Text = ex.Message;
                lblIslemSonuc.CssClass = "islemHatali";
                lblIslemSonuc.Visible = true;
            }
        }
        protected void Timer1_Tick(object sender, EventArgs e)
        {
            //saniyede bir kez çalış, sıradaki mail adresine mail gönder.
            if (listeElemanSiraNo < listeMailAdres.Count)
            {
                MailIslem(listeElemanSiraNo);
            }
            else
            {
                Timer1.Enabled = false;
                linkGonder.Enabled = true;
            }
        }




1 yorum

  1. İnternetteki uzun ve karisik makalelerden sonra bu iyi geldi. Progresbar hareketini saglayan divi cod tarafindan degisen width ile gondermek iyi fikir :-) basarilar

    YanıtlayınSil

SON YORUMLAR