dropdownlist pass parameter to webmethod in vb.net

Question

I googled on this a couple days and still cannot figure out the solution. I created 3 ASP dropdownlist, after the user select the string, pass the string to webmethod for SQL query in VB.net

Can anyone give me some hint on this?

Thank you.

herewith the code:

 function draw2CavitiesChart() {
            var options = {
                title: '2 Line VS Cavities',
                width: 1700,
                height: 700,
                //bar: { groupWidth: "95%" },
                //curveType: 'function',
                //isStacked: true
                pointSize: 8,
                hAxis: { title: 'Date', format: 'M/d/yy' },
                vAxis: { title: 'Total Cavities' },
                //colors: ['blue'],
                legend: { position: "bottom" }
            };
           

        var vs_SelectedLine1 = ddlSelectedLine1;
        var vs_SelectedLine2 = ddlSelectedLine2;
        var vs_SelectedLine3 = ddlSelectedLine3;
        
        $.ajax({
            type: "POST",
            url: "Chart.aspx/Get2CavitiesData",         
            date: { SelectedLine1: vs_SelectedLine1, SelectedLine2: vs_SelectedLine2, SelectedLine3: vs_SelectedLine3 },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = google.visualization.arrayToDataTable(r.d);
                var chart = new google.visualization.LineChart($("#div2CavitiesChart")[0]);
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }

and code behind: <WebMethod()> _ Public Function Get2CavitiesDate()

    Return (Me.ddlSelectedLine1.SelectedItem.ToString)
    Return (Me.ddlSelectedLine2.SelectedItem.ToString)
    Return (Me.ddlSelectedLine3.SelectedItem.ToString)

    Dim constring As String = ConfigurationManager.ConnectionStrings("LocalDBConnectionString").ConnectionString
    Dim chartData As New List(Of Object)()
    chartData.Add(New Object() {"SelectedDate", "(SelectedLine1)", "(SelectedLine2)", "(SelectedLine3)"})
    Using con As New SqlConnection(constring)
        Using cmd As New SqlCommand()
            cmd.CommandType = CommandType.StoredProcedure
            cmd.CommandText = "ChartReportDataTable"
            cmd.Connection = con
            con.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    chartData.Add(New Object() {sdr("SelectedDate"), sdr("(SelectedLine1"), sdr("(SelectedLine2)"), sdr("(SelectedLine3)")})
                End While
            End Using
            con.Close()
            Return chartData
        End Using
    End Using

End Function

and ASP:

<asp:DropDownList ID="ddlSelectedLine1" runat="server" AutoPostBack="false" /> <asp:DropDownList ID="ddlSelectedLine2" runat="server" AutoPostBack="false" /> <asp:DropDownList ID="ddlSelectedLine3" runat="server" AutoPostBack="false" /> <asp:Button ID="btnGenChart1" runat="server" Text="Plot Cavities" Width="100px" OnClientClick="draw2CavitiesChart()" /> <asp:TextBox ID="VS_SelectedLine1" runat="server" /> <asp:TextBox ID="VS_SelectedLine2" runat="server" /> <asp:TextBox ID="VS_SelectedLine3" runat="server" />

Answer 1

You are using the <asp:DropDownList> so the way to access this in the clientside JS is by using <%= ddlSelectedLine1.ClientID %> . So something like var vs_SelectedLine1 = document.getElementById('<%= ddlSelectedLine1.ClientID %>).value should do the trick.

Also you won't be able to Access the values of the controls in the code-behind as none of the normal page cycle will have executed such that the control will have the values loaded from the viewstate.

In your JS client-side ajax call you have code you have a typo:

data: "{ 'SelectedLine1': '" + vs_SelectedLine1 + "', 'SelectedLine2': '" + vs_SelectedLine2 + "', 'SelectedLine3': '" + vs_SelectedLine3 + "' }"

And your back end code signature will look like

public static <chartDataType> Get2CatvitiesDate(string SelectedLine1, string SelectedLine2, string SelectedLine3) { ... <rest of your function > }

I don't know the return type of your backend method but this should get you going.