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控件

与上面相同但有一些差异，在回调面板中包含控件并执行回调而不是回发。请参阅以下链接

Callback Panel
The Concept of Callbacks

解决方案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 vs ClientInstanceName
How to use ASPxTextBox client-side API / ClientIDMode="Static"
How to use the ClientInstanceName and Name properties when they contain special characters

Answer 3

正如您previous question中所述，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占位符作为命名容器，因此其中的控件的id属性已更改，即使它是DevExpress控件。

要防止出现这种情况，您需要将ClientIDMode="Static"定义为Niranjan Kala在帖子中提到的，但这次用于master page level：

<%@ 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>

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

参考：

ASPxTextBox does not persist its value on a postback if MaskSettings.Mask contains a dot

回发后文本框失去价值

3 个答案: