I'm developing an application in asp.net webforms w an SQL server backend. I have a drop-down that contains "agency names". When I select the agency from the drop-down, it populates 7 other read-only textboxes with related data like address, phone number, etc. This currently works by using ADO recordset when the SelectedIndexChanged event fires for the drop-down, but it also posts the page back and reloads everything, which is not what I want.
I know there are ajax controls in ASP webforms like updatepanel and triggers that are supposed to help me set up an asynchronous event to pull this data without reloading the page. How do I implement this? The drop-down is populated using an SQL datasource tag in the aspx HTML file.
Here is the current code in the code behind file:
Protected Sub cboRprtngAgncy_SelectedIndexChanged(sender As Object, e As System.EventArgs) Handles cboRprtngAgncy.SelectedIndexChanged
If cboRprtngAgncy.SelectedValue <> "" Then
'Fill in the agency details
Dim Cnn As SqlConnection
Dim Cmd As SqlCommand
Dim Rdr As SqlDataReader
Dim strRprtdPhn As String
Dim strAltPhn As String
'Set the objects and parameters up
Cnn = New SqlConnection
'Connection string deleted for security purposes.
Cmd = New SqlCommand
Cmd.CommandType = Data.CommandType.StoredProcedure
'Populate all the fields from the decedent table
Cmd.CommandText = "spAgncyDtls_Slct"
Cmd.Parameters.Add("@AgncyNmID", Data.SqlDbType.Int).Value = IIf(Trim(cboRprtngAgncy.SelectedValue) = "", System.DBNull.Value, Trim(cboRprtngAgncy.SelectedValue))
'Execute the objects and retrieve the decedent data
Cnn.Open()
Cmd.Connection = Cnn
Rdr = Cmd.ExecuteReader
Rdr.Read()
strRprtdPhn = Rdr("AgncyPhnMn").ToString
If strRprtdPhn <> "" Then strRprtdPhn = Left(strRprtdPhn, 3) + "-" + Mid(strRprtdPhn, 4, 3) + "-" + Right(strRprtdPhn, 4)
strAltPhn = Rdr("AgncyPhnAlt").ToString
If strAltPhn <> "" Then strAltPhn = Left(strAltPhn, 3) + "-" + Mid(strAltPhn, 4, 3) + "-" + Right(strAltPhn, 4)
txtRprtdPhnNmbr.Text = strRprtdPhn
txtRprtdAltPhn.Text = strAltPhn
txtRprtngAddrss.Text = Rdr("AgncyStrt").ToString
txtRprtngZp.Text = Rdr("AgncyZp").ToString
txtRprtngCty.Text = Rdr("AgncyCty").ToString
txtRprtngStt.Text = Rdr("AgncyStt").ToString
txtAgncyNmbr.Text = Rdr("AgncyFx").ToString
Rdr.Close()
If Cnn.State = Data.ConnectionState.Open Then Cnn.Close()
Cnn.Dispose()
Cmd.Dispose()
End If
End Sub
And here is the code in the aspx HTMLfile:
<label>Reporting Agency</label><br />
<asp:DropDownList ID="cboRprtngAgncy" runat="server" DataSourceID="sqldsAgncyNms" DataTextField="AgncyNm" DataValueField="AgncyNmID" Width="350px" Font-Names="Arial" Font-Size="16px" Font-Bold="True" TabIndex="25" AutoPostBack="True" Enabled="true" /><br />
<label>Agency #</label><br />
<asp:TextBox ID="txtAgncyNmbr" runat="server" Font-Names="Arial" Font-Size="12px" Font-Bold="True" Width="150px" TabIndex="26" ReadOnly="true" BackColor="#E8EDEE" BorderStyle="Solid" BorderWidth="1px" BorderColor="#000000" ForeColor="#727372" CssClass="border-field" /><br />
</div>
<div class="col-7">
<label>Reported By</label><br />
<asp:TextBox ID="txtRprtdBy" runat="server" Font-Names="Arial" Font-Size="12px" Font-Bold="True" Width="150px" TabIndex="27" ReadOnly="False" BackColor="#ffffff" BorderStyle="Solid" BorderWidth="1px" BorderColor="#000000" ForeColor="#000000" /><br />
<label>Reported Phone</label><br />
<asp:TextBox ID="txtRprtdPhnNmbr" runat="server" Font-Names="Arial" Font-Size="12px" Font-Bold="True" Width="150px" TabIndex="28" ReadOnly="true" BackColor="#E8EDEE" BorderStyle="Solid" BorderWidth="1px" BorderColor="#000000" ForeColor="#727372" /><br />
<label>Alternate Phone</label><br />
<asp:TextBox ID="txtRprtdAltPhn" runat="server" Font-Names="Arial" Font-Size="12px" Font-Bold="True" Width="150px" TabIndex="29" ReadOnly="true" BackColor="#E8EDEE" BorderStyle="Solid" BorderWidth="1px" BorderColor="#000000" ForeColor="#727372" CssClass="border-field" /><br />
</div>
<br />
</div>
<br />
<div class="row">
<div class="col-7">
<label>Reporting Address</label><br />
<asp:TextBox ID="txtRprtngAddrss" runat="server" Font-Names="Arial" Font-Size="12px" Font-Bold="True" Width="500px" TabIndex="30" ReadOnly="true" BackColor="#E8EDEE" BorderStyle="Solid" BorderWidth="1px" BorderColor="#000000" ForeColor="#727372" /><br />
<label>City</label><br />
<asp:TextBox ID="txtRprtngCty" runat="server" Font-Names="Arial" Font-Size="12px" Font-Bold="True" Width="150px" TabIndex="31" ReadOnly="true" BackColor="#E8EDEE" BorderStyle="Solid" BorderWidth="1px" BorderColor="#000000" ForeColor="#727372" /><br />
<label>State</label><br />
<asp:TextBox ID="txtRprtngStt" runat="server" Font-Names="Arial" Font-Size="12px" Font-Bold="True" Width="150px" TabIndex="32" ReadOnly="true" BackColor="#E8EDEE" BorderStyle="Solid" BorderWidth="1px" BorderColor="#000000" ForeColor="#727372" /><br />
<label>Zip Code</label><br />
<asp:TextBox ID="txtRprtngZp" runat="server" Font-Names="Arial" Font-Size="12px" Font-Bold="True" Width="150px" TabIndex="33" ReadOnly="true" BackColor="#E8EDEE" BorderStyle="Solid" BorderWidth="1px" BorderColor="#000000" ForeColor="#727372" />
</div>
I'm thinking I need to use javascript to set up an asynchronous event to grab the data and throw it into those 7 textboxes. I'm familiar but still new to Javascript, can anyone tell me how to set that up?
Thanks in advance.
I wound up using three different methods to run asynchronous events: the UpdatePanel built in control for ASP webforms, a javascript event using an API, and a javascript event using an exposed method in the code behind file for the page. I will try to post examples for each of these methods some time in the near future.