Получение DropDownList для BInd данных с сервера

Question

У меня возникла проблема с заполнением моего ASP DropDownList данными из базы данных, я пытаюсь использовать ajax и jquery, последовать за учебником, но добавил свои собственные данные. Проблема, с которой я столкнулась, заключается в том, что при загрузке страницы выпадающий список пуст, код ниже.

код HTML Часть

<div id="mainitem1" class="mainItem" style="background-color: #000"> 

       <div class="box" style="top: 20%; position: absolute; width: 60%; z-index: 1; height: 70%; background-color: #e8e8e8; left: 32%; font-weight: bold; font-size: 1.3vw;"> 
        <div id="divdistSearch" style="position: relative; width: 100%; height: 100%; top: 0px; left: 0px;"> 
           <table> 
            <tr> 
             <td></td> 
             <td> 
              <asp:DropDownList ID="ddlStates" runat="server"></asp:DropDownList> 
             </td> 
            </tr> 
           </table> 
        </div> 
       </div> 
       <img id="mainitem1-image" alt="" src="/powertap/images/Background1.jpg" style="position: absolute; top: 0px; left: 0px" /> 
       <img id="mainitem1-image1" alt="" src="/powertap/images/taps-and-text.png" style="position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0;" /> 
      </div> 
     </div> 

Вот Jquery часть, у меня есть это в separaet .js файле, но я связан с ним, в головной части

$(function() { 
$.ajax({ 
    type: "POST", 
    url: "Default.aspx/GetStates", 
    data: '{}', 
    contenType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function (r) { 
     var ddlStates = $("[id*=ddlStates]"); 
     ddlStates.empty().append('<option selected="selected" value="0">Please select</option>'); 
     $.each(r.d, function() { 
      ddlStates.append($("<option></option>").val(this['Value']).html(this['Text'])); 
     }); 
     } 
    }); 
}); 

И здесь это часть кода, находящаяся в VB, не могу понять, что мне не хватает.

Imports System.Data 
Imports System.Web.Services 
Imports System.Configuration 
Imports System.Data.SqlClient 
Public Class _Default103 
    Inherits System.Web.UI.Page 
       Protected Sub Page_Load(ByVal sender As Object, ByVal e As  System.EventArgs) Handles Me.Load 
    If Not Session("isLoggedIn") Then 
     price_file.Visible = False 
     checkstock_icon.Visible = False 
     checkstock_title.Visible = False 
    End If 
    End Sub 

<WebMethod()> _ 
Public Shared Function GetStates() As List(Of ListItem) 
    Dim query As String = "SELECT Id, State FROM States" 
    Dim constr As String = ConfigurationManager.ConnectionStrings("DistData").ConnectionString 
    Using con As New SqlConnection(constr) 
     Using cmd As New SqlCommand(query) 
      Dim states As New List(Of ListItem)() 
      cmd.CommandType = CommandType.Text 
      cmd.Connection = con 
      con.Open() 
      Using sdr As SqlDataReader = cmd.ExecuteReader() 
       While sdr.Read() 
        states.Add(New ListItem() With { 
           .Value = sdr("Id").ToString(), _ 
           .Text = sdr("State").ToString() _ 
           }) 
       End While 
      End Using 
      con.Close() 
      Return states 
     End Using 
    End Using 
    End Function 
End Class 

Answer 1

Я не вижу никакой ценности, связанной с использованием JSON в вашем образце. Но в любом случае вы не привязали свой выпадающий список в первую очередь. Исходное связывание может быть добавлено в событие загрузки страницы.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As  System.EventArgs) Handles Me.Load 
If !IsPostBack//Make sure this is only filled if the page is not posted back 
GetStates();