C# .NET  Display Progress bar during data binding

The below example and code is writing considering visual studio 2012 and SQL Server 2008 Express Edition. 
Prerequisite 
1) Download AjaxControlToolkit.Binary.NET40 and install it to the ToolBox in Visual Studio .

      <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

2) Create a database table "Test_data"
 3) In Web.config file add the below section of code for connection string under configuration section
    <connectionStrings>
    <add name="1-ClickPublishConnectionString" connectionString="Data Source=(LocalDB)\v11.0;AttachDbFilename=&  quot;C:\Users\Apotheosis\Documents\Visual Studio 2012\Projects\1-clickPublish\1-clickPublish\App_Data\1-ClickPublish.mdf&quot;;Integrated Security=True;Connect Timeout=30"
      providerName="System.Data.SqlClient" />
  </connectionStrings>

Javascript:

  <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(BeginRequestHandler);
        prm.add_endRequest(EndRequestHandler);

        function BeginRequestHandler(sender, args) {
            var popup = $find('<%= modalPopup.ClientID %>');
            if (popup != null) {
                popup.show();
            }
        }
       function EndRequestHandler(sender, args) {
            var popup = $find('<%= modalPopup.ClientID %>');
            if (popup != null) {
                popup.hide();
            }
        }
    </script>

ASPX Page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="progressbar.aspx.cs" Inherits="WebApplication5.progressbar" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title> Progress Bar </title>
<style type="text/css">
    .modalPopup {
        background-color: #696969;
        filter: alpha(opacity=40);
        opacity: 0.7;
        xindex:-1;
    }
</style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"/>
    <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(BeginRequestHandler);
        prm.add_endRequest(EndRequestHandler);

        function BeginRequestHandler(sender, args) {
            var popup = $find('<%= modalPopup.ClientID %>');
            if (popup != null) {
                popup.show();
            }
        }

        function EndRequestHandler(sender, args) {
            var popup = $find('<%= modalPopup.ClientID %>');
            if (popup != null) {
                popup.hide();
            }
        }
    </script>
   <div>
  <asp:UpdateProgress ID="UpdateProgress" runat="server">
        <ProgressTemplate>
            <img src="Images/loading.gif" />
        </ProgressTemplate>
        </asp:UpdateProgress>
        <cc1:modalpopupextender id="modalPopup" runat="server" targetcontrolid="UpdateProgress"
            popupcontrolid="UpdateProgress" backgroundcssclass="modalPopup" />
        <asp:UpdatePanel ID="pnlData" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click"/>
        <div>
  <asp:GridView ID ="Person" runat="server" BorderWidth="1px" BorderColor="#666666" CellPadding="3" Font-Size="X-Small" Font-Names="Tahoma" >
                 <AlternatingRowStyle BackColor="#99ccff" />
                 <HeaderStyle BackColor="Khaki" ForeColor="White" Font-Bold="true" />
                 <FooterStyle BackColor="Khaki" ForeColor="White" />
                 </asp:GridView>
        </div>
        </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <br />
    <div>
            <table>
            <tr>
            <td >
            <asp:Label ID="checkBox" Text="Full Load" Font-Names="Tahoma" Font-Size="Small" runat="server"></asp:Label>
            <asp:CheckBox ID="fullLoad" runat="server" />
            </td>
            <td>
            <asp:Label ID="L_numberRows" Text="Number of Rows to be loaded" Font-Names="Tahoma" Font-Size="Small" runat="server"></asp:Label>
            <asp:TextBox ID="Rows" runat="server"></asp:TextBox>
            </td>
            </tr>
            </table>
    </div>
     </form>
</body>
</html>

Code Behind

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication5
{
    public partial class progressbar : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        public DataTable GetData()
        {
            DataTable dt = new DataTable();
            string number = Rows.Text;
            string sqlcmd = "select top " + number + " * from Test_data";
            SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["1-ClickPublishConnectionString"].ConnectionString);
            con.Open();
            SqlCommand cmd = new SqlCommand(sqlcmd, con);
            SqlDataAdapter adpt = new SqlDataAdapter(cmd);
            adpt.Fill(dt);

            ViewState["Data"] = dt;
            return dt;

        }
        protected void btn_Convert(Object sender, EventArgs e)
        {

            DataSet ds = new DataSet();
            DataTable dtxml = (DataTable)ViewState["Data"];
            ds.Tables.Add(dtxml);
            ds.WriteXml("E:\\Person.xml", System.Data.XmlWriteMode.IgnoreSchema);

        }

        protected void btnSubmit_Click(Object sender, EventArgs e)
        {
            Person.DataSource = GetData();
            Person.DataBind();
        }


    }
}






Comments

Post a Comment

Popular posts from this blog

Authentication and Authorization in Web API -Part1

Image
The Authentication technique used mainly by token based with OWIN, Step was to register a user , We created a appliction form to submit the user credentials to the WEB API Post Mehtod and saved in the database . We have built  a repository class which interacts with the database and gives the required result-set when requested for , We have also introduced a Business Layer which handles the business logics and acts as  model for the controller . The implementations of the Authentication and Authorization is done from this site . http://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/ The Controller Class using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; using WebApiDemo.Models; namespace WebApiDemo.Controllers {     public class EmployeeController : ApiController     {   [Authorize]         [HttpGet]         public IEnumerable<Employee>
Read more

My Gardening Journey 6

Image
Some random snaps from my Balcony gardening in 2022.I started during the Covid 19 lockdown to spend some time doing constructive things .After roughly 2 yrs I can say,I learner a lot about gardening and nature in particular and I can also say there is lot more to learn.
Read more