ASP.NET Multiply in Datalist

Question

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>

score 0 · Answer 1 · answered Mar 11 '14 at 03:06

0

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

answered Mar 11 '14 at 03:06

DevProve

190
1
16

score 0 · Answer 2 · edited May 23 '17 at 12:13

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?

It s not working how can i catch the problem? I am not getting result. — user3404273, Mar 11 '14 at 09:27
Have a look at the error console. I haven't actually tested this one so there could be syntax errors in there some where. If that doesn't work add `console.log` commands at various points to debug the code. — Jon P, Mar 11 '14 at 22:19

ASP.NET Multiply in Datalist

2 Answers2