Apr 12, 2011, 10:50 AM
[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.
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; }
}
}