Comment lier une liste déroulante selon une autre liste déroulante sélectionnée en utilisant ajax dans aspnet webforms

Question

Nous avons une page .aspx avec deux éléments HTML SELECT et nous voulons charger les pays dans une liste déroulante et charger les villes d'un pays dans l'autre. Nous utilisons un cadre d'entité pour accéder aux données.

J'ai essayé PageMethods et & Ajax mais je n'ai pas pu accéder à ma liste déroulante de ville à partir d'une méthode web statique. c'est ce que nous avons jusqu'à présent:

<!-- Signup.aspx--> 
<select id="cmb_Region" runat="server" onchange="GetCitiesOfRegion();" datatextfield="region_title" datavaluefield="region_id"></select> 
<select runat="server" id="cmb_City" datatextfield="city_title" datavaluefield="city_id" class="ui dropdown"></select> 

<script type="text/javascript"> 
    function GetCitiesOfRegion(regionId) 
    { 
     $.ajax({ 
      url:"Signup.aspx/GetCities", 
      type:"POST", 
      data:'{}', 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (r) { 
       alert("success"); 
      } 
      }); 
    } 
</script> 

et ce code est en code-behind:

//Signup.aspx.cs 
[WebMethod] 
    public static List<City> GetCities(int RegionId) 
    { 
     behbimeh_informationEntities db = new behbimeh_informationEntities(); 
     return db.City.Where(i => i.region_id == RegionId).ToList(); 
    } 

En fait, le code est correct et je ne sais pas comment passer la cmb_region valeur sélectionnée à la webmethod ? et je ne sais pas comment lier le cmb_city à la Liste des villes retournée.

s'il vous plaît partagez vos connaissances. merci ...

Answer 1

Pour obtenir la valeur cmb_Region

var regionId = $('#<%= cmb_Region.ClientID %>').val(); 

Pour les villes par région et se lient au côté client

[WebMethod] 
public static string GetCities(int RegionId) 
{ 
    behbimeh_informationEntities db = new behbimeh_informationEntities(); 
    var cities= db.City.Where(i => i.region_id == RegionId).Select(item=>new { item.ValueField, item.TextField }).ToList(); 
    return Newtonsoft.Json.JsonConvert.SerializeObject(cities); 
} 
<script type="text/javascript"> 
function GetCitiesOfRegion(regionId) 
{ 
    $.ajax({ 
     url:"Signup.aspx/GetCities", 
     type:"POST", 
     data:'{"RegionId":'+regionId+'}',   
     success: function (r) { 
      var cities=JSON.parse(r.d); 
      var citiesOptions=""; 
      for(var i=0;i<cities.length;i++){ 
       citiesOptions+='<option value="'+cities[i].Value+'">'+cities[i].Text+'</option>'; 
      } 
      $('#<%= cmb_City.ClientID %>').html(citiesOptions); 
     } 
     }); 
} 

Answer 2

d'abord, vous devez effacer les données existantes, comme suit:

$('#cmb_city').empty(); 

suivant, vous devez charger la liste retournée à votre ddl.

$.ajax({ 
     url:"Signup.aspx/GetCities", 
     type:"POST", 
     data:'{"RegionId":'+$('#cmb_Region').val()+'}', 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (r) { 
       $.each(r, function() { 
        $('#cmb_city').append($('<option>').text(this.Name).attr('value', this.Id)); 
       }); 
      } 
     }); 

où Nom et Id sont respectivement vos champs de texte et de valeur.

vous devrez également probablement envoyer la région sélectionnée.

Answer 3

Voici votre réponse comme la façon de lier les données de base de données en utilisant Ajax php

<!-- edit.php --> 
<?php 
include("config.php"); 
$id=$_REQUEST['id']; 
echo $id; 
$query=mysqli_query($con,"SELECT * FROM register r 
INNER JOIN country c ON r.cuid = c.cuid 
INNER JOIN state s ON r.sid = s.sid 
INNER JOIN city ct ON r.cid = ct.cid where id='$id'"); 

while($r=mysqli_fetch_array($query)) 
{ 

    $fn=$r['firstname']; 
    $add=$r['address']; 
    $gn=$r['gender']; 
    $hobby=$r['hobby']; 
    $h=explode(',',$hobby); 
    $q=array('reading','traveling','cricket','drawing'); 
    $country=$r['cuid']; 
    $state=$r['sid']; 
    $city=$r['cid']; 
    echo $gn; 
    $edu= $r['education']; 
    $email=$r['email']; 
    $pass=$r['password']; 
    $conpass=$r['conpassword']; 
    $phno=$r['phoneno']; 
} 

?> 
<html> 
<head> 
    <script src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

    $('#country').on('change',function(){ 
     var countryID = $(this).val(); 
     if(countryID){ 
      $.ajax({ 
       type:'POST', 
       url:'ajaxData.php', 
       data:'cuid='+countryID, 
       success:function(html){ 
        $('#state').html(html); 
        $('#city').html(html); 
       } 
      }); 
     }else{ 
      $('#state').html(html); 
      $('#city').html(html); 
     } 
    }); 

    $('#state').on('change',function(){ 
     var stateID = $(this).val(); 
     if(stateID){ 
      $.ajax({ 
       type:'POST', 
       url:'ajaxData.php', 
       data:'sid='+stateID, 
       success:function(html){ 
        $('#city').html(html); 
       } 
      }); 
     }else{ 
      $('#city').html(html); 
     } 
    }); 
}); 
</script> 
</head> 
    <body> 
     <form method="post" action="update.php"> 
      <table border="1" align="center"> 
      <caption>Edit user data</caption> 
      <tr> 
       <td>First name</td> 
       <td><input type="text" name="fn" value="<?php echo $fn;?>"></td> 
      </tr> 
      <tr> 
       <td>Address</td> 
       <td><input type="text" name="add" value="<?php echo $add;?>"></td> 
      </tr> 
      <tr> 
       <td>Gender</td> 
       <td><input type="radio" name="gn" value="male" <?php echo ($gn=='male')?'checked':'' ; ?> size="17">Male 
       <input type="radio" name="gn" value="female" <?php echo ($gn=='female')?'checked':'' ; ?> size="17">Female 
       </td> 
      </tr> 
      <tr> 
       <td>Hobby</td> 
       <td><input type="checkbox" name="hobby[]" value="reading" <?php if(in_array('reading',$h)){echo ("checked:'checked'");}?> >reading 
       <input type="checkbox" name="hobby[]" value="traveling" <?php if(in_array('traveling',$h)){echo ("checked:'checked'");}?> >traveling 
       <input type="checkbox" name="hobby[]" value="cricket" <?php if(in_array('cricket',$h)){echo ("checked:'checked'");}?> >cricket 
       <input type="checkbox" name="hobby[]" value="drawing" <?php if(in_array('drawing',$h)){echo ("checked:'checked'");}?> >drawing</td> 
      </tr> 
      <?php 
      $query = mysqli_query($con,"SELECT * FROM country"); 

      //Count total number of rows 
      $rowCount = mysqli_num_rows($query); 
      ?> 
      <td>Country</td> 
      <td><select name="country" id="country"> 
       <option value="<?php echo $country;?>"><?php echo $country;?></option> 
       <?php 
       if($rowCount > 0) 
       { 
        while($row = mysqli_fetch_array($query)) 
        { 
         echo '<option value="'.$row['cuid'].'">'.$row['country'].'</option>'; 
        } 
       } 
       else 
       { 
        echo '<option value="">Country not available</option>'; 
       } 
       ?> 
      </select> 
      </td></tr> 
      <tr> 
      <td>State</td> 
      <td> 
      <select name="state" id="state"> 
       <option value="<?php echo $state;?>"><?php echo $state;?></option> 

      </select> 
      </td></tr> 
      <tr> 
      <td>City</td> 
      <td> 
      <select name="city" id="city"> 
       <option value="<?php echo $city;?>"><?php echo $city;?></option> 

      </select> 
      </td> 
      </tr> 
      <tr> 
       <td>Education</td> 
       <td><input type="text" name="edu" value="<?php echo $edu;?>"></td> 
      </tr> 
       <td>Email</td> 
       <td><input type="text" name="email" value="<?php echo $email;?>"></td> 
      </tr> 
      <tr> 
       <td>Password</td> 
       <td><input type="text" name="pass" value="<?php echo $pass;?>"></td> 
      </tr> 
      <tr> 
       <td>Confirm password</td> 
       <td><input type="text" name="conpass" value="<?php echo $conpass;?>"></td> 
      </tr> 
      <tr> 
       <td>Phone no</td> 
       <td><input type="text" name="phno" value="<?php echo $phno;?>"></td> 
      </tr> 
      <tr> 
       <td><input type="hidden" name="id" value="<?php echo $id;?>"> 
       <input type="submit" name="update" value="update"></td> 
      </tr> 
      </table> 
     </form> 
    </body> 
</html> 


-------------------- 

<!--ajaxData.php--> 
<?php 
//Include database configuration file 
include("config.php"); 

if(isset($_POST["cuid"]) && !empty($_POST["cuid"])) 
{ 
    //Get all state data 
    $query = mysqli_query($con,"SELECT * FROM state WHERE cuid = ".$_POST['cuid'].""); 

    //Count total number of rows 
    $rowCount = mysqli_num_rows($query); 

    //Display states list 
    if($rowCount > 0) 
    { 
     echo '<option value="">Select state</option>'; 
     while($row = mysqli_fetch_array($query)) 
     { 
      echo '<option value="'.$row['sid'].'">'.$row['state'].'</option>'; 
     } 
    } 
    else 
    { 
     echo '<option value="">State not available</option>'; 
    } 
} 

if(isset($_POST["sid"]) && !empty($_POST["sid"])) 
{ 
    //Get all city data 
    $query = mysqli_query($con,"SELECT * FROM city WHERE sid =".$_POST['sid'].""); 

    //Count total number of rows 
    $rowCount = mysqli_num_rows($query); 

    //Display cities list 
    if($rowCount > 0) 
    { 
     echo '<option value="">Select city</option>'; 
     while($row = mysqli_fetch_array($query)) 
     { 
      echo '<option value="'.$row['cid'].'">'.$row['city'].'</option>'; 
     } 
    } 
    else 
    { 
     echo '<option value="">City not available</option>'; 
    } 
} 
?>