回發后文本框失去價值

Question

我有一組文本框，允許用戶自動計算總金額。 計算工作正常，但是當頁面回發時，所有文本框值都消失了。 任何幫助將非常感激！ 謝謝！

請在下面查看我的代碼。

JavaScript的

$(document).ready(function () {
            Number.prototype.formatMoney = function (c, d, t) {
                var n = this,
                c = isNaN(c = Math.abs(c)) ? 2 : c,
                d = d == undefined ? "." : d,
                t = t == undefined ? "," : t,
                s = n < 0 ? "-" : "",
                i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))),
                j = (j = i.length) > 3 ? j % 3 : 0;
                return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
            };

        });

        $(document).ready(function () {
            $(this).keyup(function () {

                $("input[name='txtbx_less']").each(function (index) {
                    var txtbx_gross = $("input[name='ctl00$MainContent$txtbx_gross']").eq(index).val().replace(/,/g, "");
                    var txtbx_less = parseFloat(txtbx_gross) * 0.15;

                    if (!isNaN(txtbx_less)) {
                        $("input[name='ctl00$MainContent$txtbx_less']").eq(index).val(txtbx_less.formatMoney());
                    }

                });

                $("input[name='txtbx_net']").each(function (index) {
                    var txtbx_gross = $("input[name='txtbx_ctl00$MainContent$txtbx_grossgross']").eq(index).val().replace(/,/g, "");
                    var txtbx_less = $("input[name='ctl00$MainContent$txtbx_less']").eq(index).val().replace(/,/g, "");
                    var txtbx_net = parseFloat(txtbx_gross) - parseFloat(txtbx_less);

                    if (!isNaN(txtbx_net)) {
                        $("input[name='ctl00$MainContent$txtbx_net']").eq(index).val(txtbx_net.formatMoney());
                    }

                });

                $("input[name='ctl00$MainContent$txtbx_add']").each(function (index) {
                    var txtbx_net = $("input[name='ctl00$MainContent$txtbx_net']").eq(index).val().replace(/,/g, "");
                    var txtbx_add = parseFloat(txtbx_net) * 0.12;


                    if (!isNaN(txtbx_add)) {
                        $("input[name='ctl00$MainContent$txtbx_add']").eq(index).val(txtbx_add.formatMoney());

                    }

                });

                $("input[name='txtbx_billed']").each(function (index) {
                    var txtbx_net = $("input[name='txtbx_net']").eq(index).val().replace(/,/g, "");
                    var txtbx_add = $("input[name='txtbx_add']").eq(index).val().replace(/,/g, "");
                    var txtbx_billed = parseFloat(txtbx_net) + parseFloat(txtbx_add);

                    if (!isNaN(txtbx_billed)) {
                        $("input[name='txtbx_billed']").eq(index).val(txtbx_billed.toFixed(2));
                    }
                });


                $("input[name='txtbx_add1']").each(function (index) {
                    var txtbx_net1 = $("input[name='txtbx_net1']").eq(index).val().replace(/,/g, "");
                    var txtbx_add1 = parseFloat(txtbx_net1) * 0.12;


                    if (!isNaN(txtbx_add1)) {
                        $("input[name='txtbx_add1']").eq(index).val(txtbx_add1.formatMoney());
                    }

                });

                $("input[name='txtbx_billed1']").each(function (index) {
                    var txtbx_net1 = $("input[name='txtbx_net1']").eq(index).val().replace(/,/g, "");
                    var txtbx_add1 = $("input[name='txtbx_add1']").eq(index).val().replace(/,/g, "");
                    var txtbx_billed1 = parseFloat(txtbx_net1) + parseFloat(txtbx_add1);

                    if (!isNaN(txtbx_billed1)) {
                        $("input[name='txtbx_billed1']").eq(index).val(txtbx_billed1.formatMoney());
                    }
                });



            });


        }); 

前端

    <table class = "billcomp">
        <tr>
        <td class = "prebiltd">GROSS AMOUNT :</td>
        <td class = "prebiltd">
        <dx:ASPxTextBox ID="txtbx_gross" runat="server" Width="170px" Theme="Material">
        <MaskSettings Mask="<0..99999999g>.<00..99>" AllowMouseWheel="false"/>
        </dx:ASPxTextBox>
        </td>
       </tr>

       <tr>
       <td class = "prebiltd">LESS: 15% ASF :</td>
       <td class = "prebiltd">
       <dx:ASPxTextBox ID="txtbx_less" runat="server" Width="170px" Theme="Material">
       <MaskSettings Mask="<0..99999g>.<00..99>" AllowMouseWheel="false"/>
       </dx:ASPxTextBox>
       </td>
       </tr>

       <tr>
       <td class = "prebiltd">NET AMOUNT :</td>
       <td class = "prebiltd">
       <dx:ASPxTextBox ID="txtbx_net" runat="server" Width="170px" Theme="Material">
       <MaskSettings Mask="<0..99999g>.<00..99>" AllowMouseWheel="false"/>
       </dx:ASPxTextBox>
       </td>
       </tr>

       <tr>
       <td></td>
       <td>
       <asp:CheckBox ID="chckbox_nonvat" runat="server" Text="NON-VAT"></asp:CheckBox>
       </td>
       </tr>

   <tr>
   <td class = "prebiltd">ADD 12% VAT :</td>
   <td class = "prebiltd">
   <dx:ASPxTextBox ID="txtbx_add" runat="server" Width="170px" Theme="Material" ClientInstanceName="txtbx_add">
   <MaskSettings Mask="<0..99999g>.<00..99>" AllowMouseWheel="false"/>
   </dx:ASPxTextBox>
   </td>
   </tr>

   <tr>
   <td class = "prebiltd">BILLED AMOUNT :</td>
   <td class = "prebiltd">
   <dx:ASPxTextBox ID="txtbx_billed" runat="server" Width="170px" Theme="Material">
   <MaskSettings Mask="<0..99999g>.<00..99>" AllowMouseWheel="false"/>
   </dx:ASPxTextBox>
   </td>
   </tr>

   </table>

后端代碼

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
 txtbx_gross.ClientSideEvents.Init = "function(s,e){   s.GetInputElement().name='txtbx_gross';   }"
        txtbx_less.ClientSideEvents.Init = "function(s,e){   s.GetInputElement().name='txtbx_less';   }"
        txtbx_net.ClientSideEvents.Init = "function(s,e){   s.GetInputElement().name='txtbx_net';   }"
        txtbx_add.ClientSideEvents.Init = "function(s,e){   s.GetInputElement().name='txtbx_add';   }"
        txtbx_billed.ClientSideEvents.Init = "function(s,e){   s.GetInputElement().name='txtbx_billed';   }"

        txtbx_net1.ClientSideEvents.Init = "function(s,e){   s.GetInputElement().name='txtbx_net1';   }"
        txtbx_add1.ClientSideEvents.Init = "function(s,e){   s.GetInputElement().name='txtbx_add1';   }"
        txtbx_billed1.ClientSideEvents.Init = "function(s,e){   s.GetInputElement().name='txtbx_billed1';   }"
End Sub

Answer 1

抱歉，我無法發表評論，所以只有我通過回答來回答。 Niranjan Kala所說的只是正確的。

在devexpress控件中，我們無法使用ID從客戶端獲取/設置文本框或任何輸入控件值。 因此，只有DevExpress提供的屬性稱為“ ClientInstanceName”。 使用它，我們可以從客戶端設置/獲取輸入控件的值。

嘗試跟隨

<dx:ASPxButton ...>
<ClientSideEvents Click="function(s, e) {
    alert(txtbx_gross.GetValue());
}" />

<dx:ASPxTextBox ID="txtbx_gross" ClientInstanceName="txtbx_gross" runat="server"/>

更新的答案：

原因：看來，如果您在客戶端通過javascript更改服務器控件的值，它將不會通過服務器端的回發傳播。 並且如果發生回發將被清除。

解決方案：為解決此回發問題，DevExpress具有一種稱為callback / ASPxCallbackPanel的技術（如asp更新面板）。

因此，您應該避免回發，而應使用回調技術來實現您的功能。 嘗試以下技術，

解決方案1： ComboBox控件上的OnCallBack事件

JS

function SelectedIndexChanged(s, e) {           
        var selectedVal = FilterCombo.GetText();
        var gross = txtbx_gross.GetValue();
        var less = txtbx_less.GetValue();

        var str = gross + ":" + less + ":" + selectedVal;

        FilterCombo.PerformCallback(str);
    }

我們可以通過與分隔符串聯來傳遞所需的參數。

.ASPx

<dx:ASPxComboBox runat="server" ID="FilterCombo" ClientInstanceName="FilterCombo" Width="70px" DropDownWidth="70px" ValueType="System.Int32"
                            OnCallback="FilterCombo_Callback"  DropDownStyle="DropDownList" SelectedIndex="0">
                            <Items>
                                <dx:ListEditItem Value="3" />
                                <dx:ListEditItem Value="20" />
                                <dx:ListEditItem Value="25" />
                                <dx:ListEditItem Value="50" />
                            </Items>
                            <ClientSideEvents SelectedIndexChanged="SelectedIndexChanged" />
                        </dx:ASPxComboBox>

后面的代碼 ：：我對VB.Net沒有經驗。 所以我用C＃在ASP.NET中派生了

protected void FilterCombo_Callback(object sender, CallbackEventArgsBase e)
    {
        string[] paramlist = e.Parameter.Split(':');
        if (paramlist.Length > 0)
        {
            decimal gross = Convert.ToDecimal(paramlist[0].ToString());
            decimal less = Convert.ToDecimal(paramlist[1].ToString());
            string dropdown = paramlist[2].ToString();

            //Do your logic here
        }
    }

解決方案2： 使用ASPxCallBackPanel控件

與上述相同，但有一些區別，將控件包括在回調面板中並執行回調而不是回發。 請參考以下鏈接，

1. 回調面板
2. 回調的概念

解決方案3：仍然使用問題手段，只要有問題，就可以創建示例應用程序，如果有許可帳戶，則將有問題的問題發布到Devexpress論壇中。

謝謝

Answer 2

您無需在Page_Load事件上設置控件名稱/ id屬性。 您可以使用ClientInstanceName屬性。 參見以下示例：

<dx:ASPxButton ...>
    <ClientSideEvents Click="function(s, e) {
        alert(txtDevExpress.GetText());
    }" />
</dx:ASPxButton>
<dx:ASPxTextBox ClientInstanceName="txtDevExpress">
</dx:ASPxTextBox>

請參考以下內容：
ASPxTextBox-getElementById與ClientInstanceName
如何使用ASPxTextBox客戶端API / ClientIDMode =“ Static”
當它們包含特殊字符時如何使用ClientInstanceName和Name屬性

Answer 3

如上一個問題所述， ClientInstanceName屬性應用於DevExpress控件的客戶端事件。

但是，關於顯示為ctl00$[placeholder_name]$[control_name]的控件ID命名，這是我從Microsoft Docs獲得的解釋：

正如我們所討論的，呈現的id屬性的ctl00部分構成了母版頁的ID值，但是您可能想知道該ID值是如何產生的。 我們沒有在母版頁或內容頁的任何地方指定它。 通過該頁面的聲明性標記顯式添加ASP.NET頁面中的大多數服務器控件。

其他控件（例如母版頁本身）未在聲明性標記中定義。 因此，必須為我們自動生成其ID值。 ASP.NET引擎會在運行時為尚未顯式設置其ID的控件設置ID值。 它使用命名模式ctlXX，其中XX是順序增加的整數值。

因此，由於您使用的是帶有主頁的asp:Content占位符作為命名容器，因此即使其中是一個DevExpress控件，其內部的控件也會更改其id屬性。

為了防止這種行為，您需要將Nieljan Kala定義為ClientIDMode="Static"是Niranjan Kala在其帖子中提到的，但這一次用於母版頁 ：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" 
    ClientIDMode="Static" %>

還要在web.config中設置相同的參數：

<system.web>
    ...
    <pages clientIDMode="Static"></pages>
    ...
</system.web>

此外，關於回發后丟失的文本框值，我發現您使用帶小數點的MaskSettings ，但未指定IncludeLiterals ：

<%-- missing IncludeLiterals in MaskSettings --%>
<dx:ASPxTextBox ID="txtbx_add" runat="server" Width="170px" Theme="Material" ClientInstanceName="txtbx_add">
   <MaskSettings Mask="<0..99999g>.<00..99>" AllowMouseWheel="false"/>
</dx:ASPxTextBox>

正確的用法如下所示：

<dx:ASPxTextBox ID="txtbx_add" runat="server" Width="170px" Theme="Material" ClientInstanceName="txtbx_add">
   <MaskSettings Mask="<0..99999g>.<00..99>" IncludeLiterals="DecimalSymbol" AllowMouseWheel="false" />
</dx:ASPxTextBox>  

注意：如果DecimalSymbol不起作用，則可以使用IncludeLiterals="None" 。

參考：

如果MaskSettings.Mask包含一個點，則ASPxTextBox不會在回發中保留其值