Hi RichardSa,
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<link href="https://fonts.googleapis.com/css2?family=Otomanopee+One&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Encode+Sans+SC:wght@300&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Valera+Round&display=swap" rel="stylesheet" />
<style type="text/css">
.wrapper {
font-family: Nunito;
background-repeat: no-repeat;
height: 100%;
background-position: center;
background-size: cover;
overflow: hidden;
position: relative;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
<div class="wrapper">
<div class="row" style="width: 95%; height: 100%; font-family: Nunito; margin: 0 auto; padding: 5px;">
<div class="col-md-9">
<div class="card shadow p-3 mb5 bg-white rounded">
<div class="card-body" style="width: 100%; margin: 0 auto;">
<!--put update panel here-->
<asp:UpdatePanel ID="panel" runat="server">
<ContentTemplate>
<div class="row" id="producthead" style="width: 100%;">
<div class="col-md-5">
<asp:Label ID="Label5" runat="server" Text="Product" Font-Bold="true"></asp:Label>
</div>
<div class="col-md-1">
</div>
<div class="col-md-2">
<asp:Label ID="Label2" runat="server" Text="Unit Price" Font-Bold="true"></asp:Label>
</div>
<div class="col-md-2">
<asp:Label ID="Label6" runat="server" Text="Quantity" Font-Bold="true"></asp:Label>
</div>
<div class="col-md-2">
<asp:Label ID="Label3" runat="server" Text="Sub Total" Font-Bold="true"></asp:Label>
</div>
<hr style="width: 100%; border: 1px solid #DCDCDC;" />
</div>
<table style="width: 100%;">
<tr style="width: 100%;">
<td style="width: 100%;">
<div class="row" style="width: 100%;">
<div class="col-md-5">
<label>Product1</label>
</div>
<div class="col-md-1">
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged" />
</div>
<div class="col-md-2">
<asp:Label ID="unitprice1" runat="server" Text="100"></asp:Label>
</div>
<div class="col-md-2">
<asp:DropDownList ID="Product1DropDown" runat="server" CssClass="form-control" AutoPostBack="true" Width="80" Enabled="false" OnSelectedIndexChanged="Product1DropDown_SelectedIndexChanged">
<asp:ListItem Selected="True" Text="Qty"></asp:ListItem>
<asp:ListItem Value="1"></asp:ListItem>
<asp:ListItem Value="2"></asp:ListItem>
<asp:ListItem Value="3"></asp:ListItem>
<asp:ListItem Value="4"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-md-2">
<asp:Label ID="Qty1" runat="server" Visible="false" Text=""></asp:Label>
<asp:Label ID="Subtotal1" runat="server" Text=""></asp:Label>
</div>
</div>
</td>
</tr>
<tr>
<td>
<hr style="width: 100%; border: 1px solid #DCDCDC;" />
</td>
</tr>
<tr style="width: 100%;">
<td style="width: 100%;">
<div class="row" style="width: 100%;">
<div class="col-md-5">
<label>Product2</label>
</div>
<div class="col-md-1">
<asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBox2_CheckedChanged" />
</div>
<div class="col-md-2">
<asp:Label ID="unitprice2" runat="server" Text="200"></asp:Label>
</div>
<div class="col-md-2">
<asp:DropDownList ID="Product2DropDown" runat="server" CssClass="form-control" AutoPostBack="true" Width="80" Enabled="false" OnSelectedIndexChanged="Product2DropDown_SelectedIndexChanged">
<asp:ListItem Selected="True" Text="Qty"></asp:ListItem>
<asp:ListItem Value="1"></asp:ListItem>
<asp:ListItem Value="2"></asp:ListItem>
<asp:ListItem Value="3"></asp:ListItem>
<asp:ListItem Value="4"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-md-2">
<asp:Label ID="Qty2" runat="server" Visible="false" Text=""></asp:Label>
<asp:Label ID="Subtotal2" runat="server" Text=""></asp:Label>
</div>
</div>
</td>
</tr>
<tr>
<td>
<hr style="width: 100%; border: 1px solid #DCDCDC;" />
</td>
</tr>
<tr style="width: 100%;">
<td style="width: 100%;">
<div class="row" style="width: 100%;">
<div class="col-md-5">
<label>Product 3</label>
</div>
<div class="col-md-1">
<asp:CheckBox ID="CheckBox3" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBox3_CheckedChanged" />
</div>
<div class="col-md-2">
<asp:Label ID="unitprice3" runat="server" Text="100"></asp:Label>
</div>
<div class="col-md-2">
<asp:DropDownList ID="Product3DropDown" runat="server" CssClass="form-control" AutoPostBack="true" Enabled="false" Width="80" OnSelectedIndexChanged="Product3DropDown_SelectedIndexChanged">
<asp:ListItem Selected="True" Text="Qty"></asp:ListItem>
<asp:ListItem Value="1"></asp:ListItem>
<asp:ListItem Value="2"></asp:ListItem>
<asp:ListItem Value="3"></asp:ListItem>
<asp:ListItem Value="4"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-md-2">
<asp:Label ID="Qty3" runat="server" Visible="false" Text=""></asp:Label>
<asp:Label ID="Subtotal3" runat="server" Text=""></asp:Label>
</div>
</div>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<!-- update panel Ends -->
</div>
</div>
</div>
<div class="col-md-3">
<div class="card shadow p-3 mb5 bg-white rounded">
<div class="card-body" style="width: 100%; margin: 0 auto;">
<h5 style="text-align: center;">Order Summary</h5>
<table style="width: 100%;">
<tr style="width: 100%;">
<td style="width: 100%;">
<label id="Label12" runat="server" style="font-weight: 500;">Total Products</label>
<asp:Label ID="Label13" runat="server" Text=""></asp:Label>
<hr />
</td>
</tr>
<tr style="width: 100%;">
<td style="width: 100%;">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Label ID="Label18" runat="server" Text="GrandTotal: " Font-Bold="true"></asp:Label>
<asp:Label ID="LabelTOTAL" runat="server" Text="" Font-Bold="true" Font-Size="20pt"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<br />
</div>
</form>
</body>
</html>
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
unitprice1.Text = ("100").ToString();
unitprice2.Text = ("200").ToString();
unitprice3.Text = ("100").ToString();
CalculateTotal();
}
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
Product1DropDown.Enabled = CheckBox1.Checked;
Product1DropDown.SelectedIndex = CheckBox1.Checked ? 0 : -1;
Subtotal1.Text = ("0").ToString();
CalculateTotal();
}
protected void CheckBox2_CheckedChanged(object sender, EventArgs e)
{
Product2DropDown.Enabled = CheckBox2.Checked;
Product2DropDown.SelectedIndex = CheckBox2.Checked ? 0 : -1;
Subtotal2.Text = ("0").ToString();
CalculateTotal();
}
protected void CheckBox3_CheckedChanged(object sender, EventArgs e)
{
Product3DropDown.Enabled = CheckBox3.Checked;
Product3DropDown.SelectedIndex = CheckBox3.Checked ? 0 : -1;
Subtotal3.Text = ("0").ToString();
CalculateTotal();
}
protected void Product1DropDown_SelectedIndexChanged(object sender, EventArgs e)
{
Qty1.Text = "0";
Subtotal1.Text = "0";
if (Product1DropDown.SelectedIndex > 0)
{
Qty1.Text = Product1DropDown.SelectedItem.Text;
Subtotal1.Text = Convert.ToString(Convert.ToInt32(Qty1.Text) * Convert.ToInt32(unitprice1.Text)).ToString();
}
CalculateTotal();
}
protected void Product2DropDown_SelectedIndexChanged(object sender, EventArgs e)
{
Qty2.Text = "0";
Subtotal2.Text = "0";
if (Product2DropDown.SelectedIndex > 0)
{
Qty2.Text = Product2DropDown.SelectedItem.Text;
Subtotal2.Text = Convert.ToString(Convert.ToInt32(Qty2.Text) * Convert.ToInt32(unitprice2.Text)).ToString();
}
CalculateTotal();
}
protected void Product3DropDown_SelectedIndexChanged(object sender, EventArgs e)
{
Qty3.Text = "0";
Subtotal3.Text = "0";
if (Product3DropDown.SelectedIndex > 0)
{
Qty3.Text = Product3DropDown.SelectedItem.Text;
Subtotal3.Text = Convert.ToString(Convert.ToInt32(Qty3.Text) * Convert.ToInt32(unitprice3.Text)).ToString();
}
CalculateTotal();
}
private void CalculateTotal()
{
Subtotal1.Text = !string.IsNullOrEmpty(Subtotal1.Text) ? Subtotal1.Text : "0";
Subtotal2.Text = !string.IsNullOrEmpty(Subtotal2.Text) ? Subtotal2.Text : "0";
Subtotal3.Text = !string.IsNullOrEmpty(Subtotal3.Text) ? Subtotal3.Text : "0";
LabelTOTAL.Text = (int.Parse(Subtotal1.Text) + int.Parse(Subtotal2.Text) + int.Parse(Subtotal3.Text)).ToString();
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
unitprice1.Text = ("100").ToString()
unitprice2.Text = ("200").ToString()
unitprice3.Text = ("100").ToString()
CalculateTotal()
End Sub
Protected Sub CheckBox1_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)
Product1DropDown.Enabled = CheckBox1.Checked
Product1DropDown.SelectedIndex = If(CheckBox1.Checked, 0, -1)
Subtotal1.Text = ("0").ToString()
CalculateTotal()
End Sub
Protected Sub CheckBox2_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)
Product2DropDown.Enabled = CheckBox2.Checked
Product2DropDown.SelectedIndex = If(CheckBox2.Checked, 0, -1)
Subtotal2.Text = ("0").ToString()
CalculateTotal()
End Sub
Protected Sub CheckBox3_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)
Product3DropDown.Enabled = CheckBox3.Checked
Product3DropDown.SelectedIndex = If(CheckBox3.Checked, 0, -1)
Subtotal3.Text = ("0").ToString()
CalculateTotal()
End Sub
Protected Sub Product1DropDown_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
Qty1.Text = "0"
Subtotal1.Text = "0"
If Product1DropDown.SelectedIndex > 0 Then
Qty1.Text = Product1DropDown.SelectedItem.Text
Subtotal1.Text = Convert.ToString(Convert.ToInt32(Qty1.Text) * Convert.ToInt32(unitprice1.Text)).ToString()
End If
CalculateTotal()
End Sub
Protected Sub Product2DropDown_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
Qty2.Text = "0"
Subtotal2.Text = "0"
If Product2DropDown.SelectedIndex > 0 Then
Qty2.Text = Product2DropDown.SelectedItem.Text
Subtotal2.Text = Convert.ToString(Convert.ToInt32(Qty2.Text) * Convert.ToInt32(unitprice2.Text)).ToString()
End If
CalculateTotal()
End Sub
Protected Sub Product3DropDown_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
Qty3.Text = "0"
Subtotal3.Text = "0"
If Product3DropDown.SelectedIndex > 0 Then
Qty3.Text = Product3DropDown.SelectedItem.Text
Subtotal3.Text = Convert.ToString(Convert.ToInt32(Qty3.Text) * Convert.ToInt32(unitprice3.Text)).ToString()
End If
CalculateTotal()
End Sub
Private Sub CalculateTotal()
Subtotal1.Text = If(Not String.IsNullOrEmpty(Subtotal1.Text), Subtotal1.Text, "0")
Subtotal2.Text = If(Not String.IsNullOrEmpty(Subtotal2.Text), Subtotal2.Text, "0")
Subtotal3.Text = If(Not String.IsNullOrEmpty(Subtotal3.Text), Subtotal3.Text, "0")
LabelTOTAL.Text = (Integer.Parse(Subtotal1.Text) + Integer.Parse(Subtotal2.Text) + Integer.Parse(Subtotal3.Text)).ToString()
End Sub
Screenshot
