How to update an onscreen price without refreshing page when using DDL - asp.net

Question

I am setting up a page to allow users to create their own pool cues. As they select a feature they want on their cue from a dropdown list it needs to update the price onscreen but not refresh the whole page. I'm guessing I would use an update panel ? Not sure where and how to add it. The selected value passed to the VB code is the extra price to pay (Eg: £10 extra for a jointed cue). Here's what I have so far..
FRONT END
<asp:DropDownList ID="ddlJoint" runat="server" AutoPostBack="true" RenderMode="Partial" style="margin-bottom:10px" height="33px" font-size="1.6em" OnSelectedIndexChanged="ddlJoint_SelectedIndexChanged">
<asp:ListItem Value="">Cue Joint:</asp:ListItem>
<asp:ListItem Value="10">3/4 Join</asp:ListItem>
<asp:ListItem Value="0">One Piece</asp:ListItem>
</asp:DropDownList>
<br>
<asp:Label ID="lblTotal" runat="server" Text="Price:"></asp:Label>
VB
Protected Sub ddlJoint_SelectedIndexChanged(sender As Object, e As System.EventArgs)
session("joint") = ddlJoint.SelectedValue
session("total") = session("joint") + session("tip")
lblTotal.Text = session("total") + 180
End Sub

Answer 1

Your gut feelings are correct. You need an update panel. Here is an article how to use update panel with drop down list:
http://www.c-sharpcorner.com/uploadfile/Dorababu742/drop-down-list-in-ajax-update-panel/

Answer 2

Using an update panel is a great was to “avoid” having to wire up your own AJAX calls and updates.
And it gets rid of post-backs rather nice.
(So hitting the browser back button does not go to a previous post back for that given web page).
Make a blank test web form.
In web form design mode, simply:
From tool box, simply drag + Drop in the scrip manager.
(You can search for script in search box, but you find this under AJAX Extensions.
Now drop in an update panel
(Again you find this under AJAX Extensions).
Now drop in a button and text box “inside” of the update panel.
And for fun, let’s drop in another button below (outside) of the update panel.
Double click on the first button (to bring up vb code editor).
Simply type in this code:
me.TextBox1.Text = "post without post back"
Behind that button again double click, and write this code
me.TextBox1.Text = "post back"
Your form will look like this:
Note how when you click the button inside the update panel, the browser does not show or “light up” the back button.
However, if you hit the button outside of the update panel, you see the browser “spin” – a post back occur and the back button becomes active.
For you existing page, you can drop in the scrip manager near the top.
Then where your controls are drop in an update panel.
Then select the controls you want and drag + drop (or even cut + paste into the update panel area).
The beauty of above is you really don’t have to change your coding habits or learn JavaScript to “wire” update areas of a web page that update without post-backs.
The resulting vb.net code looks like this:
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Me.TextBox1.Text = "hello"
End Sub
Protected Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
Me.TextBox1.Text = "hello with post"
End Sub