javascript - 回发后文本框失去值(value)

标签 javascript asp.net vb.net devexpress

我有一组文本框，允许用户自动计算总金额。计算正在工作，但是当页面回发时，所有文本框值都消失了。任何帮助将非常感激!谢谢!

请参阅下面我的代码。

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

最佳答案

抱歉，我无法发表评论，所以我只能通过答案进行回复。 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 采用了一种称为回调/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. Callback Panel
  2. The Concept of Callbacks

解决方案 3:您仍然遇到问题的方法，只需创建包含您的问题的示例应用程序，然后将其与问题一起发布到 Devexpress 论坛(如果您拥有许可帐户)。

谢谢

关于javascript - 回发后文本框失去值(value)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45231691/

上一篇：javascript - 如何打印 i 的值？

下一篇：javascript - Angularjs ng-click 在动态生成的列表标签中不起作用

相关文章：

javascript - 使用javascript动态更新表

c# - 如何使用 Math.Max、Math.Min 找到三个最大和三个最小的小数

c# - 让我的 userControl 在工具箱上有自己的图标

asp.net - RadGrid - 过滤文本框，有什么方法可以动态控制它们的宽度？

vb.net - 如何抑制 file.delete 上的错误消息？

javascript - 在 jQuery/JS 中全 Angular 数字转换为半 Angular 数字

javascript - 使用调试器时，如何强制 IE9 为 "see"最新的 javascript？

javascript - 文本显示不正确

c# - 如何使用带SQL的PagedDataSource进行分页？

c# - 缺少事件处理程序创建支持

©2024 IT工具网  联系我们