[CLOSED] MVC - Progress bar not updating

  1. #1

    [CLOSED] MVC - Progress bar not updating

    Hi Guys,

    I am trying to update my progress bar by returning a script with a AjaxResult but with no luck. Please offer some assistance.



    <%@ Page Title="" Language="C#"  Inherits="System.Web.Mvc.ViewPage<List<MonitorMockups.Controllers.LangaugePack>>" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Monitor</title>    
        <style type="text/css">
            h1 {
                font: normal 60px tahoma, arial, verdana;
                color: #E1E1E1;
            }
            
            h2 {
                font: normal 20px tahoma, arial, verdana;
                color: #E1E1E1;
            }
            
            h2 a {
                text-decoration: none;
                color: #E1E1E1;
            }
            
            .x-window-mc {
                border-radius: 5px;
               -moz-border-radius: 5px;
            }
             .white-label{
                color:white;
                font-weight:bold;
            }
            .list-over {background-color: white;}
        </style>
        <script src="/scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            if (window.top.frames.length !== 0) {
                window.top.location = self.document.location;
            }
    
            var getCustomerID = function () {
                var record = lvLanguages.getRowsValues(true);
                return record[0]['LanguageId'];
            };
    
        </script>
    </head>
    <body>
    
        <ext:ResourceManager ID="ResourceManager1" runat="server" CleanResourceUrl="false" />
      
     <form runat="server" >         
        <ext:Window ID="windowLanguages" 
                runat="server" 
                Title="Languages" 
                Icon="Application"
                Width="750" 
                AutoHeight="true"
                Border="false"
                Draggable="false"
                AutoDoLayout="true" 
                Closable="true"
                Resizable="false" >
                <Content>
                    <ext:Panel ID="panelLanguages" Height="600"  runat="server" Layout="Border" Border="false">
                        <Items>
                            <ext:Label runat="server" Region="North" Height="50" Text="Language Packs" />                  
                            <ext:Panel ID="panelLanguageList" 
                                runat="server"
                                Border="false"                             
                                CtCls="west-panel"
                                Collapsible="false"
                                Split="true"
                                Height="300" 
                                Padding="0"
                                BodyBorder="false"  
                                Region="Center">
                                    <Items>
                                        <ext:ListView 
                                            ID="lvLanguages" 
                                            runat="server"
                                            MultiSelect="true"
                                            ReserveScrollOffset="true">
                                        <Store>
                                            <ext:Store ID="storeLanguagePacks" IDProperty="LanguageId" runat="server" AutoLoad="true" >
                                                <Proxy>
                                                    <ext:HttpProxy Url="/Languages/GetLanguagePacks" AutoDataBind="true" />
                                                </Proxy>
                                                <Reader>
                                                    <ext:JsonReader IDProperty="LanguageId" Root="data" >
                                                        <Fields>
                                                            <ext:RecordField Name="Language"/>
                                                            <ext:RecordField Name="LanguageId" />      
                                                            <ext:RecordField Name="Url" />
                                                            <ext:RecordField Name="DateAdded" />
                                                        </Fields>
                                                    </ext:JsonReader>
                                                </Reader>
                                            </ext:Store>
                                        </Store>
                                        <Columns>
                                            <ext:ListViewColumn 
                                                Header="Status" 
                                                Width="0.15" 
                                                DataIndex="Url" 
                                                Template='<img style="width:16px;height:16px;" src="{Url}" />' 
                                                 />
                                            <ext:ListViewColumn 
                                                Header="Language" 
                                                Width="0.4" 
                                                DataIndex="Language" 
                                                 />
                                            <ext:ListViewColumn 
                                                Header="Language Id" 
                                                Width="0.2" 
                                                DataIndex="LanguageId" 
                                                 />
                                            <ext:ListViewColumn 
                                                Header="Date added" 
                                                Width="0.3"
                                                DataIndex="DateAdded" 
                                                 />
                                        </Columns>
                                        <Listeners>
                                        </Listeners>
                                    </ext:ListView>
                                    </Items>
                                </ext:Panel>
                            <ext:Panel 
                                ID="panel2" 
                                runat="server" 
                                Title="Details" 
                                Region="South" 
                                BodyBorder="false" 
                                Padding="0"
                                Height = "250"
                                OverCls="" 
                                Border="false">
                                
                            </ext:Panel> 
                        </Items>
                        <Buttons>
                            <ext:Button 
                                ID="btnAddLanguage" 
                                runat="server"
                                TabIndex = "2"
                                Text="Add" >
                                <DirectEvents>
                                    <Click Url="/Languages/AddLanguage" 
                                    AutoDataBind="true" 
                                    CleanRequest="false"/>
                                </DirectEvents>
                            </ext:Button>
                            <ext:Button 
                                ID="btnRemove" 
                                runat="server"
                                TabIndex = "2"
                                Text="Remove" >
                                <DirectEvents>
                                    <Click Url="/" 
                                    AutoDataBind="true" 
                                    CleanRequest="false"/> 
                                </DirectEvents>
                            </ext:Button> 
                            <ext:Button 
                                ID="btnHelp" 
                                runat="server"
                                TabIndex = "2"
                                 Icon="Help" >
                                <DirectEvents>
                                    <Click Url="" 
                                    AutoDataBind="true" 
                                    CleanRequest="false"/> 
                                </DirectEvents>
                            </ext:Button>
                    </Buttons>
    
                    </ext:Panel>
                </Content>
                <Listeners>
                    <AfterLayout Handler="this.center();" />
                </Listeners>
        </ext:Window>
    
           <ext:TaskManager IDMode="Explicit" ID="taskManager" runat="server">
            <Tasks>
                <ext:Task 
                    TaskID="taskDeploy"
                    Interval="200"
                    AutoRun="false"
                    OnStart="alert('Started');"
    ****************OnStop="#{btnDeploy}.setDisabled(false); #{btnClose}.setDisabled(false);">
                    <DirectEvents>
                        <Update Url="/Languages/GetDeploymentStatus"  AutoDataBind="true" CleanRequest="false">
                            <ExtraParams>
                            </ExtraParams>
                        </Update>
                    </DirectEvents>
                </ext:Task>
            </Tasks>
       </ext:TaskManager>
    
    </form>
    
    </body>
    </html>

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
        <ext:Window ID="WindowAddLanguage"
            runat="server"
            Title="Languages"
            Icon="Application"
            Width="522"
            AutoHeight="true"
            Border="false"
            Closable="true"
            Draggable="false"
            Modal="true"
            CloseAction ="Close"
            Resizable="false">
                <Items>
                    <ext:FormPanel 
                    ID="formUpload"
                    FormID="formUpload" 
                    runat="server"
                    Width="510"
                    AutoHeight="true"            
                    PaddingSummary="10px 10px 10px 10px"
                    LabelAlign="Top"
                    FileUpload="true"
                    MonitorValid="true"
                    ButtonAlign="Right"
                    >                
                    <Defaults>
                        <ext:Parameter Name="anchor" Value="100%" Mode="Value" />
                    </Defaults>
                    <Items>
                                <ext:FileUploadField 
                                    ID="fufLanguagePack" 
                                    runat="server" 
                                    EmptyText="Select a language pack"
                                    ButtonText=""
                                    Icon="ImageAdd"
                                    LabelAlign="Top"
                                    AllowBlank="false" >
                                </ext:FileUploadField>
                                <ext:ProgressBar ID="progressDeployment" IDMode="Explicit" runat="server"  Hidden="false" />
                    </Items>
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Label ID="button"  Cls="white-label"  runat="server" Text="The package will be deployed to 9 components." />
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Listeners>
                        <ClientValidation  Handler="#{btnDeploy}.setDisabled(!valid);" />
                    </Listeners>
                    <Buttons>
                        <ext:Button ID="btnDeploy" runat="server" Text="Deploy">
                            <DirectEvents>
                                <Click 
                                    FormID="formUpload"
                                    Url="/Languages/UploadLanguagePack"
                                    CleanRequest="false"
                                    AutoDataBind="true"
                                    Before="if (!#{formUpload}.getForm().isValid()) { return false; } 
                                    else{ 
                                        #{fufLanguagePack}.hide(); #{progressDeployment}.show(); alert(progressDeployment.clientID); taskManager.startAll();}" 
                                    >
                                </Click>
                            </DirectEvents>
                        </ext:Button>
                        <ext:Button ID="btnClose" runat="server" Text="Close">
                            <Listeners>
                                <Click Handler="#{WindowAddLanguage}.close(); taskManager.stopAll();" />
                            </Listeners>
                        </ext:Button>
                        <ext:Button ID="btnHelp" runat="server" Text="" Icon="Help">
                            <Listeners>
                                <Click Handler="#{WindowAddLanguage}.close();" />
                            </Listeners>
                        </ext:Button>
                    </Buttons>
                    
                </ext:FormPanel>
                </Items>
            </ext:Window>

    public class LanguagesController : Controller
        {
            //
            // GET: /Languages/
    
            public ActionResult Index()
            {
    
                return View();
            }
    
    
            public AjaxStoreResult GetLanguagePacks()
            {
                List<LangaugePack> data = new List<LangaugePack>
                                              {
                                                  new LangaugePack()
                                                      {
                                                          Language = "English",
                                                          LanguageId = "en",
                                                          Url = "../../Images/Success.png",
                                                          DateAdded = DateTime.Now.ToShortDateString()
                                                      },
                                                  new LangaugePack()
                                                      {
                                                          Language = "Spanish",
                                                          LanguageId = "es",
                                                          Url = "../../Images/Warning.png",
                                                          DateAdded = DateTime.Now.AddDays(-15).ToShortDateString()
                                                  },
                                              new LangaugePack()
                                                  {
                                                      Language = "French",
                                                      LanguageId = "fr-FR",
                                                      Url = "../../Images/Error.png",
                                                      DateAdded = DateTime.Now.AddDays(-10).ToShortDateString()
                                                  }
                                          };
    
    
                return new AjaxStoreResult(data);
            }
    
    
            public Ext.Net.MVC.PartialViewResult AddLanguage()
            {
                Ext.Net.MVC.PartialViewResult p = new Ext.Net.MVC.PartialViewResult();
                p.SingleControl = true;
                return p;
            }
    
            public AjaxFormResult UploadLanguagePack()
            {
                Request.RequestContext.HttpContext.Application.Add("LongActionProgress", 0);
                ThreadPool.QueueUserWorkItem(LongAction);
                AjaxFormResult response = new AjaxFormResult();
                response.IsUpload = true;
                response.Success = true;
                return response;
            }
    
            private void LongAction(object state)
            {
                Request.Files[0].SaveAs("c:\\abc.txt");
    
                for (int i = 0; i < 50; i++)
                {
                    Thread.Sleep(500);
                    Request.RequestContext.HttpContext.Application["LongActionProgress"] = i + 1;
                }
            }
    
    
            public AjaxResult GetDeploymentStatus()
            {
    
                object progress = Request.RequestContext.HttpContext.Application["LongActionProgress"];       
    
                AjaxResult ajaxResult = new AjaxResult
                                            {
                                                Script =
                                                    string.Format("{0}.updateProgress({1}, {2});", "progressDeployment", ((int)progress) / 50f,
                                                                  string.Format("{0}%", (int)progress / 50f * 100))
                                            };
                return ajaxResult;
            }
        }
    
        public class LangaugePack
        {
            public String Language { get; set; }
            public String LanguageId { get; set; }
            public String Url { get; set; }
            public String DateAdded { get; set; }
        }
    
    }
  2. #2
    Hi,

    1. Please don't set CleanRequest="false" for DirectEvent with defined Url (it must be true)
    2. #{} syntax cannot handle controls outside the page.
    You set
    OnStop="#{btnDeploy}.setDisabled(false); #{btnClose}.setDisabled(false);">
    But btnDeploy and btnClose are placed inside another partial view therefore the page has no access to those buttons during rendering. Please use ID directly (remove #{}) and set IDMode="Explicit" for the buttons
    3. GetDeploymentStatus : you have to add quotes to text description (\"{2}\")
    string.Format("{0}.updateProgress({1}, \"{2}\");" .....
    or serialize text description (use JSON.Serialize)
    JSON.Serialize(string.Format("{0}%", (int)progress / 50f * 100))
    public AjaxResult GetDeploymentStatus()
            {
    
                object progress = HttpContext.Application["LongActionProgress"];       
                
     
                AjaxResult ajaxResult = new AjaxResult
                                            {
                                                Script =
                                                    string.Format("{0}.updateProgress({1}, {2});", "progressDeployment", ((int)progress) / 50f,
                                                                  JSON.Serialize(string.Format("{0}%", (int)progress / 50f * 100)))
                                            };
                return ajaxResult;
            }
    4. You have to pass submitted file to LongAction
    public AjaxResult UploadLanguagePack()
            {
                HttpContext.Application.Add("LongActionProgress", 0);
                
                ThreadPool.QueueUserWorkItem(LongAction, Request.Files);
                AjaxResult response = new AjaxResult();
                response.IsUpload = true;
                //response.Script = string.Format("alert({0});", Request.Files.Count);
                return response;
            }
     
            private void LongAction(object state)
            {
                (state as HttpFileCollectionBase)[0].SaveAs("c:\\abc.txt");
     
                for (int i = 0; i < 50; i++)
                {
                    Thread.Sleep(500);
                    HttpContext.Application["LongActionProgress"] = i + 1;
                }
            }
  3. #3
    Hi guys,

    This works great, thanks. please mark as solved

Similar Threads

  1. [CLOSED] Progress bar
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 11, 2010, 3:01 PM
  2. [CLOSED] Progress bar
    By CSG in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Nov 23, 2009, 9:16 AM
  3. [CLOSED] progress bar
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 09, 2009, 8:53 AM
  4. Progress Bar
    By fabiomarcos in forum 1.x Help
    Replies: 1
    Last Post: Jan 27, 2009, 12:18 PM
  5. Progress bar
    By flaviodamaia in forum 1.x Help
    Replies: 1
    Last Post: Sep 11, 2008, 12:31 PM

Tags for this Thread

Posting Permissions