asp.net 如何使用webmethod在多个按钮加载期间将两个变量从服务器发送到客户端?

y53ybaqx  于 2023-05-02  发布在  .NET
关注(0)|答案(1)|浏览(104)

假设我有一个包含其他三个按钮的Button1:

protected void Button1_Click(object sender, EventArgs e)
{
    Button2_Click(this, null);
    Button3_Click(this, null);
    Button4_Click(this, null);
}

Button2包含两个整数:

protected void Button2_Click(object sender, EventArgs e)
{
    int x = 10;
    int x2 = 5;
}

当我单击Button1时,它调用所有其他按钮。当Button1触发时,首先加载Button2,我希望这两个变量值发送到客户端JavaScript,以便在Button3加载之前接受它:

function TakeVariables()
{ 
    var x_javaS = document.getElementById('<%=x%>').value;
    var x2_javaS = document.getElementById('<%=x2%>').value;
}

有没有什么webmethod或pagemethod的解决方案可以做到这一点?

frebpwbc

frebpwbc1#

你不可能在一个来回里做到。当单击按钮1时,整个页面现在在服务器上打开。此时,调用2个或10个其他代码存根(可以是其他按钮存根,也可以只是代码例程)并不重要。
在此期间,页面在服务器上运行,除非您让整个页面生命周期完成,否则您不能将任何内容发送回客户端。
而且您“从不”从服务器发送值,服务器“响应”客户端的请求。那么,返回值的“概念”是什么?不,您在页面生命周期完成后返回网页。
一旦该页面在服务器上“启动”,则代码只能修改浏览器页面的“dom”。要将任何内容发送回客户端,您甚至可以使用多个“响应”方法,但它们都是构建的,并且当您的代码100%完成时,它们都会作为整个页面加载返回。
正如我在最后一个“长”回应中指出的那样?
你可以在页面上使用5个按钮,然后点击按钮1,回发,在页面生命周期完成之后,你可以点击按钮2(像我一样注入JavaScript代码存根)。在那个例子中,我最终点击了5次ONE按钮-每一步一次。
然而,这个例子是基于“使用”我们新发现的页面生命周期知识的概念“证明”。
我说,使用更新面板,并有一个按钮被点击一次又一次是“有点”更好,然后下降在5个按钮做同样的事情。
然而,如果你注意到关闭,我也建议/暗示/声明/暗示,要做这种类型的网页更新,我们更好地走上使用web方法的道路。这意味着 AJAX 调用,这意味着我们不使用页面回发。
因此,采用 AJAX 调用的“整体”想法是我们不使用也没有(或者有些人会说“遭受”回发,因此我们不处理页面往返)。
事实上,大多数新的网络技术都试图为用户提供类似桌面的体验,这意味着开发人员努力减少所谓的“往返”。因此,您可以更新屏幕的部分内容,而无需重新加载浏览器和往返。“更多”的代码,和“更多”的事情,你可以在浏览器中发生没有往返?然后,我们可以为最终用户提供更多类似桌面的体验。
实际上,正在发生的事情是开发人员正在将越来越多的服务器代码移动到客户端!!!但是,话又说回来,这往往会成为更多的工作。
因此,对于大多数基本页面,我们允许并具有往返。这使得Web开发变得非常简单。(这也是为什么这么多人喜欢Web表单的一个重要原因)。但是,“不利的一面”是你遭受了很多“往返”。
所以,长话短说?
在前面的例子中,我“故意”使用了很少或根本没有JavaScript,并且想要一个纯webforms的例子来说明如何更新我们想要运行的每个例程的“进度”。
然而,我也说过,再多一点努力,我更喜欢并认为 AJAX 之路是一条更好的道路。唯一的技巧,然后是设置一些代码,不打破银行编码明智的。
换句话说,假设我们想调用5个按钮,但我们删除了按钮,并创建了5个代码例程(代码隐藏)。如果我们将这5个例程标记为web方法,那么我们可以在js中运行一个循环客户端,并调用所有5个例程,并且更好的是代码流非常容易。
我们设置进度条,可能显示消息,然后调用一个服务器端方法。但我们不再使用按钮点击-而是一 AJAX 调用,因此没有往返。当代码完成后,js就可以“继续前进”到第2步。
由于没有发生回发,因此这工作得很好。唯一的技巧是我不想创建5个本地JavaScript例程来完成这个任务(或者8个例程)。
所以,我现在倾向于使用这种设计模式,它工作得相当好:
首先,我们的按钮单击现在没有服务器端代码事件存根。我们不打算用这个按钮做一个回发(没有往返)。
所以,我觉得这个设计效果很好:
所以在代码后面我们有5个步骤。我们将后面的代码标记为web方法。
那么,就像这样说:

[WebMethod()]
    public static string Step1()
    {
        System.Threading.Thread.Sleep(2000);
        return "done";
    }

    [WebMethod()]
    public static string Step2()
    {
        System.Threading.Thread.Sleep(2000);
        return "done";
    }

    [WebMethod()]
    public static string Step3()
    {
        System.Threading.Thread.Sleep(2000);
        return "done";
    }

    [WebMethod()]
    public static string Step4()
    {
        System.Threading.Thread.Sleep(2000);
        return "done";
    }

    [WebMethod()]
    public static string Step5()
    {
        System.Threading.Thread.Sleep(2000);
        return "done";
    }

当然,在上面,我“伪造”了一个2秒的处理延迟。
所以,现在,让我们使用“ AJAX ”,而不是使用post-back来调用上述5个步骤。
请注意,理论上每一步都可以返回多个值。我返回“done”,但你可以返回多个值!!!
因此,实际上,对于每个步骤,在一个步骤之间,您可以从服务器返回多个值。
现在我们的客户端代码看起来像这样:

function runajax() {
            mybar2()

            runFunctions =
                [
                { Method: "Step1", MyMessage: "Computer Starting" },
                { Method: "Step2", MyMessage: "Start Fuel Flow" },
                { Method: "Step3", MyMessage: "Wait for Turbine" },
                { Method: "Step4", MyMessage: "Engine at speed - generating power" },
                { Method: "", MyMessage: "Done - final message" }
                ]

            runPtr = 0
            runsteps()
        }

        function runsteps() {

            // update text box, show step
            $('#pmsgdiv').text(runFunctions[runPtr].MyMessage)

            var funcstep = runFunctions[runPtr].Method
            mybar2(runPtr + 1)
            if (funcstep == "") {
                // this is to ignore a blank fucntion - allows final step message
                return
            }
            var myurl = "StepProcess.aspx/" + funcstep

            $.ajax({
                type: "POST",
                url: myurl,
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (rData) {
                    // step done, move on to next one
                    runPtr++
                    if (runPtr < runFunctions.length) {
                        runsteps()
                    }
                },
                failure: function (rData) {
                    alert("error " + rData.d);
                }
            });
        }

所以,现在我们不使用页面生命周期。您会发现上面的运行“黄油”平滑,没有页面回发发生。
这一点:

是的,您可以使用上述方法为每个步骤返回多个值。
所以,我将尝试在这里发布更多的代码示例。
所以,我在这个例子中使用了上面的方法:

所以,web方法看起来像这样:
(this示例为 www.example.com ,但没关系)

<WebMethod>
Public Shared Function GetUpLoads() As Dictionary(Of String, String)

因此,我向 AJAX 调用返回一个值字典
最后的步骤如下所示:

Dim mValues As New Dictionary(Of String, String)
    mValues.Add("TotalFiles", TotalFiles)
    mValues.Add("PdfFiles", PdfFiles)
    mValues.Add("ZipFiles", ZipFiles)
    mValues.Add("FilesPerDay", FilesPerDay)

    Return mValues

End Function

因此,我向 AJAX 调用返回4个值。

因此, AJAX 调用可以在返回时做到这一点:

function gFiles(Data) {
        // file uploaded info
        gaugeFilesUpLoaded.refresh(Data.TotalFiles, Data.TotalFiles, 0)
        gaugePdfFiles.refresh(Data.PdfFiles,Data.TotalFiles, 0)
        gaugeZipFiles.refresh(Data.ZipFiles,Data.TotalFiles, 0)
        gaugeFilesPerDay.refresh(Data.FilesPerDay,10,0)
    }

所以,请注意我是如何从 AJAX 调用中返回4个值的。
所以,你没有让服务器“发送”多个值,但是你肯定可以 AJAX 调用从web方法“请求”值,并且你不限于一个返回值。
所以,总的来说?
对于这些类型的“进展”更新?然后 AJAX 在几乎所有的情况下都是一个更好的方法,然后说一个回发(往返),然后在往返的每次返回,我们使用js代码“点击”一个按钮来继续前进。
请注意,您现在甚至可以采用“轮询”方法。你可以有一段长时间运行的服务器代码,比如每隔1秒 AJAX 调用来获取/抓取当前的进度量(比如每隔1秒)。这是可能的,因为你不再使用往返和回发。

相关问题