Remplissage dropdownlist avec selectlist dans ViewData

Question

J'essaie de remplir une liste HTML.Dropdown avec une liste de sélection qui est remplie avec une valeur de chaîne (une adresse de localisation) et des champs de texte (une description d'emplacement) d'un appel de base de données. Je passe la liste de sélection en tant que viewdata à ma vue. La liste déroulante se remplit bien mais quand je vais utiliser la valeur, elle est vide ou vide comme vu par une alerte que j'ai mis dans ma fonction javascript. Voici le code Toutes les idées pourquoi "this.locations.value" est nulle:

Mon Voir code:

<script type="text/javascript"> 
    var map; 
    var gdir; 
    var geocoder = null; 
    var addressMarker; 

    function setDirections(fromAddress, toAddress, locale) { 
     alert(toAddress); 
     gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": locale }); 
    } 
</script> 

<div id="maincontent2"> 
    <form action="#" onsubmit="setDirections(this.from.value, this.locations.value, 'en_US'); return false"> 
     <table> 
      <tr> 
       <th align="left">From:&nbsp;</th> 
       <td align="left" ><input type="text" id="fromAddress" name="from" size="35px" value="King of Prussia, PA"/></td> 
       <th align="left">&nbsp;&nbsp;To:&nbsp;</th> 
       <td align="left"> <%= Html.DropDownList("locations",(SelectList)ViewData["OfficeLocations"])%></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td align="left"> 
        <br /> 
        <input name="submit" type="submit" value="Get Directions!" /> 
       </td> 
      </tr> 
     </table> 
     <table> 
      <tr> 
       <td valign="top"><div id="drv_directions" style="width: 250px"></div></td> 
       <td valign="top" style="padding-top:15px"><div id ="map_canvas"></div></td> 
      </tr> 
     </table>  
    </form> 
</div> 

Mon code Contrôleur:

public ActionResult Directions() 
{ 
    uls_dbDataContext ulsdb_dc = new uls_dbDataContext(); 
    ViewData["OfficeLocations"] = new SelectList(ulsdb_dc.GetOfficeLocations(),"location_address", "location_name"); 
    ViewData["Title"] = "Directions"; 

    return View(); 
} 

Answer 1

Emplacements est une sélection et doesn » t avoir une propriété value. Pour obtenir la valeur de l'option sélectionnée, vous devez utiliser l'index sélectionné, trouver l'option correcte et référencer la valeur de l'option. Si vous utilisez jQuery, vous pouvez cependant obtenir la valeur d'un select en utilisant la méthode val() de l'objet jQuery. Je suggère jQuery car cela rendra le code plus simple et MS le supportera avec Visual Studio.

Exemple avec jQuery:

<script type='text/javascript'> 
    $(document).ready(function() { 
     $('form').submit(function() { 
      var fromAddress = $(this).find('#from').val(); 
      var toAddress = $(this).find('#locations').val(); 
      var locale = 'en-US'; 

      .... 
      return false; 
     }); 
    }); 
</script> 

    <form action="#"> 

    <table> 
    <tr><th align="left">From: </th> 

    <td align="left" ><input type="text" id="fromAddress" name="from" size="35px" 
    value="King of Prussia, PA"/></td> 
    <th align="left"> To: </th> 
    <td align="left"> <%= Html.DropDownList("locations",(SelectList)ViewData["OfficeLocations"])%></td> 

    ... 

Answer 2

Voici le code qui travaille maintenant:

<script type="text/javascript"> 

    var map; 
    var gdir; 
    var geocoder = null; 
    var addressMarker; 

    function setDirections(fromAddress, toAddress, locale) { 

     gdir.load("from: " + fromAddress + " to: " + toAddress, 
     { "locale": locale }); 
    } 

    $(document).ready(function() { 
     if (GBrowserIsCompatible()) { 
      map = new GMap2(document.getElementById("map_canvas")); 
      gdir = new GDirections(map, document.getElementById("drv_directions")); 
      GEvent.addListener(gdir, "load", onGDirectionsLoad); 
      GEvent.addListener(gdir, "error", handleErrors); 

      setDirections("King of Prussia", "1302 Conshohocken Road, Conshohocken, PA 19428", "en_US"); 
     } 
     $('form').submit(function() { 
      var fromAddress = $(this).find('#from').val(); 
      var toAddress = $(this).find('#locations').val(); 
      var locale = 'en-US'; 
      alert(fromAddress); 
      alert(toAddress); 
      setDirections(fromAddress, toAddress, locale); 
      return false; 
     }); 

    }); 

</script>