如何在不使用 c# 中的提交按钮的情况下将两个选择选项的值相乘 asp.net

本文关键字：两个 选择 选项 asp net 情况下 按钮 提交 | 更新日期: 2023-09-27 17:57:23

我的目标是使用两个下拉框来选择服务和折扣金额。这将在两个文本框中显示折扣和总计。我对 asp.net 和 c# 相当陌生，并且对如何进行此计算感到困惑。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Part2.aspx.cs" Inherits="WebApplication2.Part2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<div style ="text-align: CENTER">
Please Select A Service: <select id="numA" onchange="totalA(this.value);">
    <option value="">Select your service</option>
    <option value="125">Makeover</option>
    <option value="60">Hair Styling</option>
    <option value="35">Manicure</option>
    <option value="200">Permanent Makeup</option>   
</select>
<br/><br/>
Select Your Discount: <select id="NumB" onchange="totalB(this.value);">
    <option value="">Select the discount</option>
    <option value="0">0%</option>
    <option value=".1">10%</option>
    <option value=".2">20%</option>  
    </select>
    <br/><br/>
Discount Coupon: <input id="discount" name="showTotal" type="text" value="$0.00" size="10" readonly="";/>
Grand Total: <input id="total" name="showTotal" type="text" value="$0.00" size="10" readonly=""/>
<br/><br/>     
        </div>
    </form>
  </body>
</html>

这是我正在处理.cs，我知道我必须使用如果（！IsPostBack） { 但我不知道如何以我需要的方式实现它。

namespace WebApplication2
{
public partial class Part2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack) { 
        }
    }
}
}

这是 HTML 中的工作项目以供参考。

<!DOCTYPE html>
<html>
<head>
<script>
var numA = 0;
function totalA(valA) {
    if (valA) {
        numA = Number(valA);}
    var disc = numB*numA;
    var totalCost = (numA - disc); 
        document.getElementById("total").value = "$" + totalCost.toFixed(2);
        document.getElementById("discount").value = "$" + disc.toFixed(2);}
var numB = 0;
function totalB(valB) {
    if (valB) {
        numB = Number(valB);}
    var disc =  numB*numA;
    var totalCost = (numA - disc);
    document.getElementById("total").value = "$" + totalCost.toFixed(2);
    document.getElementById("discount").value = "$" + disc.toFixed(2);}   
</script>       
</head>
<div align="center">
<br>
<form name id="Main">
<select id="numA" placeholder="Please select a service" onchange="totalA(this.value);">
    <option value="" disabled selected>Select your service</option>
    <option value="125">Makeover</option>
    <option value="60">Hair Styling</option>
    <option value="35">Manicure</option>
    <option value="200">Permanent Makeup</option>   
</select>
<br><br>
<select id="NumB" placeholder="Please select the discount" onchange="totalB(this.value);">
    <option value="" disabled selected>Select the discount</option>
    <option value="0">0%</option>
    <option value=".1">10%</option>
    <option value=".2">20%</option>  
    </select>
    <br><br>
<td>Discount Coupon: <input id="discount" name="showTotal" type="text" value="$0.00" size="10" readonly/></td>
<td>Grand Total: <input id="total" name="showTotal" type="text" value="$0.00" size="10" readonly=""/></td>
<br><br>
</form>
<hr>
</div>
</html>

如何在不使用 c# 中的提交按钮的情况下将两个选择选项的值相乘 asp.net

我不明白你的问题，但我会尝试一下..

制作一个如下所示的函数

function multi()
{
  var drop1=document.getElementById("numA").value;
  var drop2=document.getElementById("NumB").value;
  var disc = drop1*drop2;
  var totalCost = (drop1- disc); 
  document.getElementById("total").value = "$" + totalCost.toFixed(2);
  document.getElementById("discount").value = "$" + disc.toFixed(2);
}

您的下拉菜单将像

<select id="numA" onchange="multi();">
<option value="">Select your service</option>
<option value="125">Makeover</option>
<option value="60">Hair Styling</option>
<option value="35">Manicure</option>
<option value="200">Permanent Makeup</option>   
</select>
<select id="NumB" placeholder="Please select the discount" onchange="multi();">
<option value="" disabled selected>Select the discount</option>
<option value="0">0%</option>
<option value=".1">10%</option>
<option value=".2">20%</option>  
</select>

语法可能是错误的，我只是给你一个想法。

我希望它有帮助...

更新

让我举个例子，如果你会使用服务器控制

您的.aspx页面将如下所示

<asp:DropDownList ID="ddlNumA" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlnumA_SelectedIndexChanged">
    <asp:ListItem Value="-1">Select your service</asp:ListItem>
    <asp:ListItem Value="125">Makeover</asp:ListItem>
    <asp:ListItem Value="60">Hair Styling</asp:ListItem>
    <asp:ListItem Value="35">Manicure</asp:ListItem>
    <asp:ListItem Value="200">Permanent Makeup</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlNumB" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlNumB_SelectedIndexChanged">
    <asp:ListItem Value="-1">Select the discount</asp:ListItem>
    <asp:ListItem Value="0">0%</asp:ListItem>
    <asp:ListItem Value=".1">10%</asp:ListItem>
    <asp:ListItem Value=".2">20%</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="txtdiscount" runat="server"></asp:TextBox>
<asp:TextBox ID="txttotal" runat="server"></asp:TextBox>

这是您的 C# 文件 

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        multi();
    }
}
public void  multi()
{
  if(ddlnumA.SelectedValue!="-1" && ddlNumB.SelectedValue!="-1")
  {
    Decimal NumA=Convert.ToDecimal(ddlNumA.SelectedValue);
    Decimal NumB=Convert.ToDecimal(ddlNumB.SelectedValue);
    Decimal disc = NumA*NumB;
    Decimal totalCost = (NumA- disc ); 
    txttotal.Text = "$" + totalCost.ToString();
    txtdiscount.Text = "$" + disc.ToString();
  } 

}
//here are the change events of dropdown
protected void ddlnumA_SelectedIndexChanged(object sender, EventArgs e)
{
   multi();    
}
protected void ddlNumB_SelectedIndexChanged(object sender, EventArgs e)
{
   multi();    
}
相关文章：