如何更新Ajax请求的内部状态的标签 [英] How to update a status label inside ajax request
问题描述
我有这个code：
<div style="padding: 0px 12px 12px 12px;">
<asp:UpdatePanel runat="server" ID="Panel">
<ContentTemplate>
<asp:Button ID="btnGenerate" CssClass="button" Style="float: right" runat="server"
Text="Go" OnClick="btnGenerate_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div>
<asp:UpdateProgress runat="server" ID="PageUpdateProgress">
<ProgressTemplate>
<img src="ajax-loader.gif" />
<asp:Label ID="lblStatus" runat="server" Text="Working..." CssClass="label" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
当我按一下按钮GIF动画显示...这是伟大的，但这个过程需要一分多钟，我想向用户展示（只要code不是复杂的）是怎么回事上。
When I click the button the animated gif shows... which is great, but the process takes over a minute and I would like to show the user (as long as the code is not complex) what is going on.
所以我把旁边的形象，并在当我尝试做后面的code标签：
So I put a label next to the image, and in the code behind when I try and do :
lblStatus.Text = "Doing xyz";
它给某种命名空间问题。任何想法如何，我可以达致这？
It gives some sort of namespace issue. Any ideas how I can acheive this?
更新： 错误是类型或命名空间lblStatus无法找到。
UPDATE : The error is "the type or namespace 'lblStatus' cannot be found".
推荐答案
您不能与.NET的UpdatePanel做到这一点，至少我不认为它很容易。虽然你可以使用2个独立的AJAX调用做到这一点。
You can't do this with the .net updatepanels, least I don't believe it to be easy. Though you can do it with 2 separate AJAX calls..
这个例子是使用JQuery的AJAX和code-背后，是在vb.net。
This example is using JQuery for the AJAX and the code-behind is in vb.net.
基本上是你需要做的是让你的第一个电话，开始了漫长的过程，然后拨打第二个电话，反反复复，采用第二种方法得到的长单的状态。
Essentially what you need to do is make your first call to begin the long process, then make a second call, repeatedly, using a second method to get the status of the long one.
AJAX
这是你的漫长的过程主要呼叫。如果需要的话，您将需要传递数据的方法。请注意，有一个processName。这应该是一个随机字符串的排序，以确保您得到的只是这个过程中的状态。其他用户将有一个不同的随机processName这样你就不会感到困惑的状态。
This is your main call to the long process. If needed, you will need to pass in the data to the method. Notice there is a processName. This should be a random string of sorts to ensure that you get the status of this process only. Other users will have a different random processName so you don't get confused status.
var processName = function GenerateProcessName() {
var str = "";
var alhpabet = "abcdefghijklmnopqrstuvwxyz";
for (i = 1; i < 20; i++) {
str += alhpabet.charAt(Math.floor(Math.random() * alhpabet.length + 1));
}
return str;
}
function StartMainProcess(){
$j.ajax({
type: "POST",
url: "/MyWebservice.asmx/MyMainWorker",
data: "{'processName' : '" + processName + "','someOtherData':'fooBar'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if (msg.d) {
// do a final timerPoll - process checker will clear everything else
TimerPoll();
}
}
});
TimerPoll();
}
你的第二个AJAX调用将是另一种方法来获得进展。这被称为每次XXX时间定时器的方法。
Your second AJAX call will be to another method to get the progress. This will be called every XXX time by a timer method.
这是TimerPoll功能;这将触发每3秒在这种情况下
This is the TimerPoll function; which will fire every 3 seconds in this case
function TimerPoll() {
timer = setTimeout("GetProgress()", 3000)
}
最后，GetProgress（）函数，那么，获得进步。我们必须通过在上面使用的同一processName，得到这个用户的过程中只调用
And finally, the GetProgress() function to, well, get the progress. We have to pass in the same processName used above, to get the process of this users call only
function GetProgress() {
// make the ajax call
$j.ajax({
type: "POST",
url: "/MyWebService.asmx/MyMainWorkerProgress",
data: "{'processName' : '" + processName + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// Evaulate result..
var process = msg.d
if (process.processComplete) {
// destroy the timer to stop polling for progress
clearTimeout(timer);
// Do your final message to the user here.
} else {
// show the messages you have to the user.
// these will be in msg.d.messages
// poll timer for another trip
TimerPoll();
}
});
}
现在，在后端，你将有一对夫妇的，你的AJAX与通信网络的方法。您还需要一个共享/静态对象来存储所有的进展的信息，以及任何你想传递给用户。
Now, in the back-end, you will have a couple of web methods that your AJAX communicates with. You will also need a shared/static object to hold all of the progress information, along with anything you want to pass back to the user.
在我的例子中，我创建了具有其属性填充并传回与每次调用MyMainWorkerProcess类。这看起来有点像这样。
In my case, i created a class which has its properties filled and passed back with every call to MyMainWorkerProcess. This looks a little like this.
Public Class ProcessData
Public Property processComplete As Boolean
Public Property messages As List(Of String) = New List(Of String)
End Class
我也有使用这个类的共享属性，它看起来像......（这个共享的属性是能够容纳多个过程进行多个用户 - 从而字典词典的关键将是进程名称的所有。进度数据将在类过程数据
I also have a shared property using this class, which looks like... ( this shared property is capable of holding multiple process progresses by multiple users - hence the dictionary. the key of the dictionary will be the process name. All progress data will be in the class ProcessData
Private Shared processProgress As Dictionary(Of String, ProcessData) = New Dictionary(Of String, ProcessData)
我的主要工作人员的功能看起来有点像这样。请注意，我们首先要确保没有其它processProgress具有相同
My main worker function looks a little like this. Notice that we first make sure there isn't another processProgress with the same
<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
Public Function MyMainWorker(ByVal processName as string, ByVal SomeOtherData as string) as Boolean
'' Create progress object - GUI outputs process to user
'' If the same process name already exists - destroy it
If (FileMaker.processProgress.ContainsKey(processName)) Then
FileMaker.processProgress.Remove(processName)
End If
'' now create a new process
dim processD as ProcessData = new ProcessData() with {.processComplete = false}
'' Start doing your long process.
'' While it's running and after whatever steps you choose you can add messages into the processData which will be output to the user when they call for the updates
processD.messages.Add("I just started the process")
processD.messages.Add("I just did step 1 of 20")
processD.messages.Add("I just did step 2 of 20 etc etc")
'' Once done, return true so that the AJAX call to this method knows we're done..
return true
End Function
现在所有剩下的就是调用进程method..All这是怎么回事要做的就是返回了我们之前设置相同processName字典过程数据。
now all that is left is to call the progress method..All this is going to do is return the dictionary processData that has the same processName we set up earlier..
<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
Public Function MyMainWorkerProgress(ByVal processName As String) As ProcessData
Dim serializer As New JavaScriptSerializer()
If (FileMaker.processProgress.ContainsKey(processName)) Then
Return processProgress.Item(processName)
Else
Return New ProcessData()
End If
End Function
和瞧...
因此，要回顾一下..
So to recap..
- 创建2 Web方法 - 人做了很长的过程和一个返回它的进步
- 创建2个独立的调用这些网络的方法。第一种是主工人，第二，它被重复XX秒，到一个将得到进展
- 在输出的消息，不过你看到用户配合...
免责声明... 我没有提供一个回答这个长在这儿之前。它可能没有遵循人们习惯看到的格式。很抱歉，如果这一切似乎有点混乱:)我抄大部分code从正在运行的项目，所以它应该工作..但不要拍我，如果有几个错别字：）
Disclaimer... I haven't provided an answer this long on here before.. It might not follow the format people are used to seeing. Sorry if it all seems a little confusing :) I have copied most of the code from a running project so it should work.. though don't shoot me if there are a few typos :)
这篇关于如何更新Ajax请求的内部状态的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
