根据没有AutoPostBack的两个文本框值计算Label中的百分比

时间:2016-04-14 19:21:33

标签: asp.net vb.net html5

一天试图找出解决方案。但不成功。 我只是想为我的学生创建一个百分比计算表。 这是我的.aspx代码



<%@ Page Title="" Language="C#" ClientIDMode="Static" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $("#txt1").val("");
            $("#txt2").val("");
        });
        function txtHSpercentage() {
            ch1 = $("#txt1").val();
            ch2 = $("#txt2").val();
            ch3 = (ch1 / 100) * ch2;
            document.getElementById("#txthsP").value = (ch3.toFixed(2));
        }
    </script>
    <style>
        #table1
        {
            border: solid thin black;
        }

            #table1 td
            {
                border: solid thin black;
                width: 30px;
                text-align: center;
            }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <table id="table1" style="background-color: lightgray; width: 50%; border: solid thin black; margin-top: 100px">
        <tr>
            <td>HS</td>
            <td>
                <asp:TextBox ID="txt1" runat="server" Width="90%" onkeyup="txtHSpercentage()"></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="txt2" runat="server" Width="90%" onkeyup="txtHSpercentage()"></asp:TextBox>
            </td>
            <td>
                <asp:Label ID="txthsP" runat="server" Width="90%" ForeColor="Black" />
            </td>
        </tr>
    </table>
</asp:Content>
&#13;
&#13;
&#13;

它根本不起作用。我只想在用户在txthsMO中输入值时获取值。 它应该像计算器一样工作。 是否有可能。 请帮助.....

更新: - 在ViewpageSource中显示如下:

&#13;
&#13;
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
    <script type="text/javascript" src="http://ff.kis.scr.kaspersky-labs.com/1B74BD89-2A22-4B93-B451-1C9E1052A0EC/main.js" charset="UTF-8"></script><script type="text/javascript" src="js/jquery.js"></script>
   
    
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $("#txt1").val("");
            $("#txt2").val("");
        });
        function txtHSpercentage() {
            ch1 = $("#txt1").val();
            ch2 = $("#txt2").val();
            ch3 = (ch1 / 100) * ch2;
            document.getElementById("#txthsP").value = (ch3.toFixed(2));
        }
    </script>
    <style>
        #table1
        {
            border: solid thin black;
        }

            #table1 td
            {
                border: solid thin black;
                width: 30px;
                text-align: center;
            }
    </style>
</head>
<body>
    <form method="post" action="Default3.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="cHuYm1VLP9az8bfSVVpFYL2zGIUY+7Jr6iWOLhPF2jhHns5K4u5zhkPWMkN6qiw6WsTTsDIUJxBVutesBKtzOj66kjVPVjPxzF+wz+3Mhv4=" />
</div>

<div class="aspNetHidden">

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="8sEsxlU6EE+aaqKCbHV0992JS44nu7cKDzulDBEkeZthEts5PY0j05tUanKAHJUYfsL+0tG8j9r4ULWq62a4zj93fDQwm/vzykw31K+1sP1ly4FihsKHIqZ16Y1cXWKlNgOgZ9xj22pI9+Dc7uRCyw==" />
</div>
    <div>
        
    <table id="table1" style="background-color: lightgray; width: 50%; border: solid thin black; margin-top: 100px">
        <tr>
            <td>HS</td>
            <td>
                <input name="ctl00$ContentPlaceHolder1$txt1" type="text" id="txt1" onkeyup="txtHSpercentage()" style="width:90%;" />
            </td>
            <td>
                <input name="ctl00$ContentPlaceHolder1$txt2" type="text" id="txt2" onkeyup="txtHSpercentage()" style="width:90%;" />
            </td>
            <td>
                <span id="txthsP" style="display:inline-block;color:Black;width:90%;"></span>
            </td>
        </tr>
    </table>

    </div>
    </form>
</body>
</html>
&#13;
&#13;
&#13;

我还添加了ClientIDMode =&#34; Static&#34;在页面顶部 请帮忙......

1 个答案:

答案 0 :(得分:3)

首先:您应该在代码中使用list.get(1)txt1,而不是txt2Text1

由于每个TextBox的ID可能与容器的名称相结合(如@ schudel的注释中所述),因此以下语法是获取正确ID的更安全的方法:

Text2

另一种方法是将TextBox的var ch1 = $("#<%= txt1.ClientID %>").val(); var ch2 = $("#<%= txt2.ClientID %>").val(); var ch3 = (ch1 / 100) * ch2; $("#<%= txthsP.ClientID %>").text(ch3.toFixed(2)); 设置为ClientIDMode

Static

保留原始ID。然后,您可以使用它来检索控件:

<asp:TextBox ID="txt1" runat="server" ClientIDMode="Static" ... />