如何從 aspx 文件的 Javascript 事件處理程序獲取變量值到 aspx.cs 文件事件處理程序

Question

現在的情況：

• 這是一個頁面，其中電話號碼被要求輸入區號，因為用戶希望從下面的下拉列表中輸入 select，

• 每當點擊“發送請求”按鈕時，通過 JQuery（見下文）觸發 onClick 事件處理程序，並且輸入值更改為包含前端區號的數字，

這是相關的foo.aspx ；

<asp:TextBox ID="ClientPhone" runat="server" CssClass="form-control" type="tel" Visible="false"></asp:TextBox>

<div class="saveButtonLocation">
    <asp:Button ID="Submit" ValidationGroup="AddWebsiteWizard" runat="server" Text="Send Request" CssClass="btn btn-success" OnClick="Submit_Click" OnClientClick="this.disabled=true; this.value='Sending Request'" UseSubmitBehavior="false"/>
</div>

<script type="text/javascript">
    function pageLoad() {
        setupInput();
    }

    function setupInput() {

        var input = $("#<%=ClientPhone.ClientID %>")[0];

        if (input) {
            var iti = window.intlTelInput(input, {
                utilsScript: "../../node_modules/intl-tel-input/build/js/utils.js"
            });

            $("#<%=Submit.ClientID %>").on('click', function (e) {
                if (input.value.trim()) {
                    if (iti.isValidNumber()) {
                        var number = iti.getNumber(intlTelInputUtils.numberFormat.E164);
                        console.log(input);
                        input.value = number;
                    }
                }
            });
        }
    }
</script>

這是我在突出顯示**ClientPhone**時得到的結果，它是foo.aspx.cs上的Text值；

預期結果：

我想在foo.aspx.cs中獲取電話號碼，包括區號。

筆記：

• 作為前端開發人員，我也很想聽聽在后端處理此前端操作數據的可能方法和替代方案，

• 根據上面的代碼，有onClick方法屬於提交按鈕又名Send Request ，而不是用於ClientPhone本身的輸入字段，因為在提交之前，用戶應該可以隨意使用它多次。

Answer 1

好吧，在您將頁面發布回 web 服務器之前，隱藏的代碼無法觸及、知道、看到任何東西。

web 服務器就在那里，20 個人中的任何一個都可以“回發”web 頁面。 在此之前，您必須假設隱藏代碼不存在（頁面 class（隱藏代碼）尚不存在）。 因此頁面生命周期還沒有開始。

請記住，web 服務器是一台計算機，而不是每個人的台式計算機。 因此web服務器將開始對提交給web服務器的ONE頁面進行“處理”。

所以，你有這個：

該頁面只是坐在用戶的桌面上。 服務器上沒有 web 頁面 - 沒有，nada？！！ 一旦 IIS 將該頁面發送到客戶端瀏覽器？

然后在服務器端，頁面被轉儲。 並且后面的代碼（頁面 class 對象）被處理掉，扔出 memory。

此時，用戶可以合上筆記本電腦的蓋子，或單擊他們最喜歡的站點以瀏覽到不同的站點。 您的 web 服務器不關心，甚至不知道用戶繼續前進、關閉瀏覽器甚至關閉計算機。

那么，如果您“想要”在代碼隱藏中使用/享受/擁有/查看文本框的值？

然后你需要發布頁面。 在大多數情況下，一個簡單的 jane asp.net 按鈕就可以完成這項工作。

當您單擊該按鈕時 - 所謂的標准服務器控件，然后頁面生命周期開始。

發生這種情況：

一旦頁面到達服務器？

然后 IIS 和 .net 將加載頁面，創建頁面 class，初始化后面的代碼，然后開始運行后面的代碼。 請注意您的代碼背后如何只能更改瀏覽器頁面，而在此期間，用戶什么也看不到。 這就是為什么說如果您執行 for (i=1;i<= 10;i++) 循環來更新文本框值，用戶將始終只看到最終的“10”值。

實際上，在整個頁面生命周期完成之前，用戶永遠不會看到更改背后的代碼。

所以，你現在有這個：

注意非常接近，出於教學目的，我沒有顯示瀏覽器位於用戶桌面上（他們當然會看到瀏覽器的旋轉器/等待）。

只有在后面的所有代碼都 100% 完成之后，然后，並且只有在那時，整個頁面才會返回客戶端。

例如這個：

再次注意，我如何在上圖中不顯示/沒有位於服務器上的 web 頁面。 一旦頁面被發送回客戶端，然后在服務器端？

頁面被轉儲，頁面 class（以及代碼中的變量）被 100% 轉儲和處理。

現在，web 服務器正等待您或任何人按下按鈕或類似按鈕以重新開始這個所謂的“頁面生命周期”。

那么，要將那個簡單的文本框值返回給服務器端呢？ （連同任何其他控件、文本框、下拉菜單以及您擁有的任何東西？

你必須有另一個回發，整個頁面生命周期重新開始。

請記住，當那個全新的頁面返回到瀏覽器端時？

它被重新加載、重新繪制，甚至客戶端 JavaScript 代碼也被重新加載、重新初始化並從頭開始。

這個“每次”從頭開始？ 這就是我們所說的“無狀態”。

這意味着在大多數情況下，如果您觸發“往返”或所謂的頁面生命周期，那么您必須“假設”每次都從頭開始。 這也意味着您在“代碼隱藏”中的一些簡單代碼和變量也不會保留它們的值。 它們僅在頁面在正在處理的服務器上啟動的短時間內存在。

那么，今天經常進球和“嗡嗡聲”？

好吧，有很多工具可以讓您編寫（或至少嘗試）編寫更多代碼以在瀏覽器中運行。 這給出了“即時”響應（很像桌面程序）。 它響應良好，因為我們甚至根本不討論或使用服務器端代碼或系統（沒有往返發生——它們不僅速度較慢，而且在服務器負載方面代價高昂）。

但當然，不利的一面是您沒有使用那種美妙、簡單、可靠的服務器端代碼。 服務器端代碼可以做很多事情，例如填寫 gridview，可能是組合框（下拉列表）或數據庫中的任何內容。

客戶端代碼 (JavaScript) 不使用那些服務器資源，甚至不使用后面的代碼。 然而，正如我所指出的，人們“試圖”將更多代碼移至瀏覽器。 因此，您可以采用所謂的 web 方法或“ajax”調用。 這樣做是調用一些服務器端代碼，但不會導致整個頁面回發和往返。

因此，假設我們放入一個文本框、一個 label 和一個按鈕。

我們希望單擊按鈕從文本框中獲取文本，轉換為大寫，然后將結果推送到 label 中。

這將是 100% 服務器端代碼，因此使用上面的頁面生命周期。

所以，我們拖放上面的 3 個控件。

我們有這個：

            Enter some text :<asp:TextBox ID="TextBox1" runat="server" Width="400px"></asp:TextBox>
            <br />
            <br />
            <asp:Button ID="cmdServerSide" runat="server" Text="Server side code - run" />
            <br />
            <br />
            <asp:Label ID="Label1" runat="server" Text="Result:"></asp:Label>

在設計器視圖中，我們可以雙擊按鈕，瞬間跳轉到后面的代碼。

    protected void cmdServerSide_Click(object sender, EventArgs e)
    {
        string MyText = TextBox1.Text;
        MyText = MyText.ToUpper();

        Label1.Text = "Result = " + MyText;

    }

所以現在運行的結果是這樣的：

好的，做這個 100% 的客戶端怎么樣？ 沒有服務器端代碼？

好吧，讓我們放下另一個平面簡按鈕，但現在編寫 100% 的客戶端代碼。

事實上，讓我們拆分任務。 我們將獲取文本框，確認用戶輸入了至少 8 個或更多字符，轉換為大寫，然后調用服務器端代碼設置 label。

所以，讓我們放入另一個按鈕，我們現在有了這段代碼：

            <asp:Button ID="cmdSomeClientAndServer" runat="server" Text="client and server side Button"
                OnClick="cmdSomeClientAndServer_Click"
                OnClientClick="return myuppercheck()"                    
                />

            <script>
                function myuppercheck() {

                tBox = document.getElementById('<%= TextBox1.ClientID %>')
                strText = tBox.value
                    if (strText.length <= 5) {
                        alert("You must enter more then 5 characters")
                        return false
                    }
                    // ok, more then 5 chars, conver to upper case
                    // and put value BACK into text box
                    strText = strText.toUpperCase()
                    tBox.value = strText
                    return true   // let server side button code run
                }
            </script>

所以，現在該按鈕同時運行客戶端代碼，然后運行服務器端代碼。 然而，相當不錯的是，如果客戶端 js function 不返回 true，則服務器端代碼不會運行。

所以，客戶端：

我們檢查用戶輸入的字符是否超過 5 個。

然后我們將文本轉換為大寫，推回文本框，然后返回 TRUE。 返回 true 將允許我們附加到 SAME 按鈕的服務器端代碼運行。

服務器端代碼是這樣的：

    protected void cmdSomeClientAndServer_Click(object sender, EventArgs e)
    {
        // take the text box, and shove into the label

        Label1.Text = "Result = " + TextBox1.Text;
    }

所以，現在我們在運行時有這樣的效果：

那么問題往往是？

那么，我真的需要運行服務器端代碼嗎？ 如果我們想在服務器端使用文本框和值，那么我們必須允許/擁有該回發。

當然，我們可以調用服務器端代碼，而不是使用回發（和那個大往返），而是調用 web 方法，或者所謂的使用“ajax”。

但是，讓我們把它留到另一篇文章。

那么，從上面來看，我們將文本框傳遞給代碼的方式是什么？

好吧，我們真的不這樣做，而是將整個頁面發回，然后后面的代碼可以免費查看/獲取/獲取/更改 web 頁面上的任何控件，我們可以在該服務器端代碼中免費使用更改我們想要的任何控件，一旦該代碼運行，整個頁面就會重新發送回客戶端，客戶端將重新加載其代碼。 （在服務器端，隱藏的代碼和 web 頁面被丟棄、處理。服務器現在准備好接受您或任何其他用戶的回發）。