3
Answers

FILL ASP.NET DROPDOWN CONTROL FROM JQUERY

Abraham Olatubosun

Abraham Olatubosun
5y
639
1

My Dear Gurus,

Hope this message meets you all in good health, I know topic like may have been answered, due to time line of the project made me to ask again, may be the answer may also add to helping someone too.

I am trying to load data into a asp.net dropdown control via Jquery AJAX, find below my HTML code:
 
  1. <table class="auto-style1">  
  2.       <tr>  
  3.           <td> </td>  
  4.           <td class="auto-style2"> </td>  
  5.           <td> </td>  
  6.       </tr>  
  7.       <tr>  
  8.           <td> </td>  
  9.           <td class="auto-style2">  
  10.             
  11.               <table class="auto-style1 table ">  
  12.                   <tr>  
  13.                       <td class="text-capitalize text-center bg-primary"><h4>RADET GENERATING TOOL</h4></td>  
  14.                   </tr>  
  15.                   <tr>  
  16.                       <!-- OnSelectedIndexChanged="DrpState_SelectedIndexChanged" -->  
  17.                       <td class="text-center">State Name  :<asp:DropDownList ID="DrpState" runat="server" AutoPostBack="False"  Width="30%">  
  18.                           </asp:DropDownList>  
  19.                       </td>  
  20.                   </tr>  
  21.                   <tr>  
  22.                       <td class="text-center">  
  23.                                   Facility Name  :<asp:DropDownList ID="DrpFacName" runat="server" Width="30%">  
  24.                                   </asp:DropDownList>  
  25.                       </td>  
  26.                   </tr>  
  27.                   <tr>  
  28.                       <td class="text-center">  
  29.                             
  30.                           Current Date : <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
  31.                       </td>  
  32.                   </tr>  
  33.                   <tr>  
  34.                       <td style="text-align: center" colspan="2">  
  35.                           
  36.                          <%-- <div id="progressbar" class="progressBar">  
  37.                                <span id="progressbar-Text" class="progressBarText">Processing ......</span>  
  38.                             </div>  
  39.                           <div>  
  40.                               <!-- Display number of pages -->  
  41.                               Number of pages  <div id="PageNum"> </div>  
  42.                          </div>--%>  
  43.                             
  44.                       </td>  
  45.                   </tr>  
  46.                   <tr>  
  47.                       <td class="text-center">  
  48.   
  49.                            <!-- Call by JQUERY -->  
  50.                             <button id="btnhide" class="btn btn-primary" type="button" disabled>  
  51.                              <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>  
  52.                                     Executing.....  
  53.                            </button>  
  54.                              
  55.                           <!--  -->  
  56.                           <button type="submit" class="btn btn-info has-spinner" id="btn_RADET" runat="server" onserverclick="btn_RADET_Click"  >Generate Radet</button>          
  57.                           <button type="submit" class="btn btn-danger " id="btn_Reset" runat="server" onserverclick="btn_Reset_Click">Clear</button>  
  58.                       </td>  
  59.                   </tr>  
  60.                   <tr>  
  61.                       <td> </td>  
  62.                   </tr>  
  63.                   <tr>  
  64.                       <td> </td>  
  65.                   </tr>  
  66.               </table>  
  67.             
  68.           </td>  
  69.           <td> </td>  
  70.       </tr>  
  71.       <tr>  
  72.           <td> </td>  
  73.           <td class="auto-style2"> </td>  
  74.           <td> </td>  
  75.       </tr>  
  76.   </table>  
 And my jquery Ajax code :
  1. <script src="Scripts/js/jquery-3.4.1.min.js"></script>  
  2.      
  3.   
  4.     <script type="text/javascript">  
  5.         $(function ()  
  6.         {  
  7.                
  8.                   $.ajax({  
  9.                         type: "POST",  
  10.                         url: "WebService_Defaulters.asmx/GetSate",  
  11.                         data: '{}',  
  12.                         contentType: "application/json; charset=utf-8",  
  13.                         dataType: "json",  
  14.                         success: function (response) {  
  15.                               
  16.                             var ddropState = $("#DrpState");  
  17.                               ddropState.empty();  
  18.                               ddropState.append('<option selected="selected" value="0">---Please select state---</option>');  
  19.                               //for (var i = 0; response.d.length; i++) {  
  20.                               //    ddropState.append($('<option>'+response.d[i]+'</option>'));  
  21.                               //}  
  22.                               $.each(response.d, function (key, value) {  
  23.                                   ddropState.append($("<option></option>").val(value.id).html(value.StateName));  
  24.                               });  
  25.                         },  
  26.                       failure: function (e) {  
  27.                              
  28.                           alert("Failed: " + e.d);  
  29.                       }  
  30.                   });//--- AJAX  
  31.             });  

Also, my web services to load from database

  1. <System.Web.Script.Services.ScriptService()>  
  2. <WebService(Namespace:="http://tempuri.org/")> _  
  3. <WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _  
  4. <Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _  
  5. Public Class WebService_Defaulters  
  6.     Inherits System.Web.Services.WebService  
  7.   
  8.     Dim GC As New GetConnection()  
  9.   
  10. <WebMethod()>  
  11.     Public Sub GetSate()   'As List(Of String)  
  12.         Dim SQL As String = "SELECT distinct state FROM New_States order by state"  
  13.         Dim DCL As List(Of StateClass) = New List(Of StateClass)()  
  14.         Dim i As Int32 = 1  
  15.         Dim DD As New DataTable()  
  16.         DD = GC.GetSQL(SQL)  
  17.         For Each r In DD.Rows  
  18.             Dim DCLs As New StateClass()  
  19.             DCLs.id = i  
  20.             DCLs.StateName = r!State.ToString().Trim()  
  21.             i += 1  
  22.             DCL.Add(DCLs)  
  23.         Next  
  24.         Dim Js As New JavaScriptSerializer()  
  25.         Context.Response.Write(Js.Serialize(DCL))  
  26.         'Return DCL  
  27.     End Sub  
  28.   
  29. End Class  
 

All attempt to get to work faild I have tried all sample in google search not fruitful result

That is why I came to you my guru’s to help me.

Thank you in advance

Answers (3)
Next Recommended Forum