ASP.NET Multiply in Datalist

I have a Datalist in my project and it have a two column("Price" and "Quantity")

Price is coming from database. I am using DropdownList for Quantity.

I wanna multiply these 2 column and get result dynamicly. The important point in here, if i change the quantity, result have to change without page refresh.

How can I do that? What is the event of datalist for do this?

Thanks.

My Code

 <asp:DataList ID="DataList1" DataKeyField="SIRANO" runat="server" 
                        onitemcommand="DataList1_ItemCommand"  >

Price:<asp:Label ID="Label5" runat="server" Text='<%#Eval("PRICE") %>'></asp:Label>
Quantity:<asp:DropDownList ID="DropDownList1" runat="server" Height="20px" Width="48px">
   <asp:ListItem>3</asp:ListItem>
  </asp:DropDownList>
<b> Total:<asp:Label ID="Label7" runat="server"></asp:Label></b>

Answers


You may need to write a JavaScript function to set the value.

DropDownList1.Attributes["onChange"] = "someJavaScriptFunction();";
DropDownList1.AutoPostBack =False;

Refer to Client side onchange event for dropdown list


You would be best off doing this client side with javascript. The easiest way would be with jQuery. An excelent library that make querying and manipulating the DOM very easy.

Start by adding some CSS classes to the elements we are interested in:

Price:<asp:Label ID="Label5" CssClass="price" runat="server" Text='<%#Eval("PRICE") %>'></asp:Label>
Quantity:<asp:DropDownList ID="DropDownList1 CssClass="quantity" runat="server" Height="20px" Width="48px">
   <asp:ListItem>3</asp:ListItem>
  </asp:DropDownList>
<b> Total:<asp:Label ID="Label7" runat="server"  CssClass="label"></asp:Label></b>

Next add the jquery library to your page. Then add the following in:

<script type="text/javascript"  >
     /*Wait until the document is loaded*/
     $(document).ready(function () { 

        /*Function to call when drop down with class quantity changes*/
                $(".quantity").change(function(){  

         //Get value from dropdown changed
         var quantity = parseFloat($(this).val()); 

         //Get text from sibling element with class price and clean it
         var price = $(this).siblings(".price").html();
         //Clean it
         price = price.replace("$","").replace(",",""); 
         /*Make it a number*/
         price = parseFloat(price);

         var total = price * quantity;

         /*the b tag is the sibling but we want to update the inner element
         with class total*/
         $(this).siblings("b").children(".total").html("$" +  total); 

       });
     }
</script>

See the javascript in action here

You will also probably want to format the output as currency: How can I format numbers as money in JavaScript?


Need Your Help

How to use CSV Data Set with junit request test in jmeter

junit jmeter

I have a problem and I stuck in it for two days, how can I add more than one argument constructor in “ Constructor String label” ?????

What is the correct value for SESSION_COOKIE_DOMAIN if my Django site is set up on a subdomain?

django cookies subdomain

I have constant problem with cookies on my Django site which is set up on a subdomain. It works for a couple of days, then message 'your browser doesn't accept cookies' appears on a login page. I n...