Change dropdownlist value without autopostback - asp.net

Question

How to change dropdownlist value based on another dropdownlist value without autopostback in asp.net using vb.net

Answer 1

Well, if you don't post-back, then no code can run.
You could start to use ajax calls. That allows you to call + use server side code without a page post-back. But this means you have to write some JavaScript code client side.
However, a post-back is not the end of the world here.
And there is a in-between choice, in which you ONLY post back the two combo boxes, and that results in quite much ONLY the two combo boxes being posted, and the rest of the page will remain un-touched.
This means asp.net DOES the ajax wire up for you!!!
So, way we have these two combo boxes. First one select city, and 2nd one a hotel in that city.
<div style="float:left">
<h3>Select City</h3>
<asp:DropDownList ID="cboCity" runat="server" Width="168px"
DataValueField="City" DataTextField="City" AutoPostBack="true"></asp:DropDownList>
</div>
<div style="float:left;margin-left:25px">
<h3>Select Hotel</h3>
<asp:DropDownList ID="cboHotels" runat="server" Width="168px"
DataValueField="ID" DataTextField = "HotelName"
></asp:DropDownList>
</div>
Ok, so note that our first combo box has auto post back.
And our code is this:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
' load up City combo
cboCity.DataSource = MyrstP(New SqlCommand("SELECT City from City ORDER BY City"))
cboCity.DataBind()
cboCity.Items.Insert(0, "") ' Add blank row selecting
End If
End Sub
and first combo box code is this:
Protected Sub cboCity_SelectedIndexChanged(sender As Object, e As EventArgs) Handles cboCity.SelectedIndexChanged
' cascade City and limit hotels from given city.
Using cmdSQL As New SqlCommand("SELECT ID, HotelName FROM tblHotels
WHERE City = #City ORDER BY HotelName")
cmdSQL.Parameters.Add("#City", SqlDbType.NVarChar).Value = cboCity.SelectedItem.Text
cboHotels.DataSource = MyrstP(cmdSQL)
cboHotels.DataBind()
cboHotels.Items.Insert(0, New ListItem("Select Hotel", 0))
End Using
And our helper routine to make life easy:
Public Function MyrstP(sqlCmd As SqlCommand) As DataTable
Dim rstData As New DataTable
Using sqlCmd
sqlCmd.Connection = New SqlConnection(My.Settings.TEST4)
sqlCmd.Connection.Open()
rstData.Load(sqlCmd.ExecuteReader)
End Using
Return rstData
End Function
(and NOTE VERY careful, how we NEVER created a connection object and then used it later, but we use the BUILT IN one inside of sql command.
Ok,
now lets change this to NOT full page post back.
Do this:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="float:left">
<h3>Select City</h3>
<asp:DropDownList ID="cboCity" runat="server" Width="168px"
DataValueField="City" DataTextField="City" AutoPostBack="true"></asp:DropDownList>
</div>
<div style="float:left;margin-left:25px">
<h3>Select Hotel</h3>
<asp:DropDownList ID="cboHotels" runat="server" Width="168px"
DataValueField="ID" DataTextField = "HotelName"
></asp:DropDownList>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Now give it a try!!! - note how the page does not post-back anymore.
This is still a partial page post back, but ONLY the combo box is sent back to the server, and only part is updated. In fact this is quite much how the new blazer pages with signalR quite much work.
So try the above. You will note that no page post back occurs.