Popup-Dropdownliste mit Auswahlliste in ViewData

Question

Ich versuche, eine HTML.Dropdownlist mit einer Auswahlliste zu befüllen, die mit einem Zeichenfolge-Wert (Standortadresse) und Textfeldern (Standortbeschreibung) aus einem Datenbankaufruf gefüllt wird. Ich gebe die Auswahlliste als Sichtdaten an meine Ansicht weiter. Das Drop-down-Popup füllt sich gut, aber wenn ich den Wert verwende, ist es null oder leer, wenn ich eine Warnung sehe, die ich in meine JavaScript-Funktion einfüge. Hier ist der Code Irgendwelche Ideen, warum "this.locations.value" null ist:

My View 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> 

Mein Controller-Code:

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

Standorte ist eine ausgewählte und doesn‘ t haben eine Werteigenschaft. Um den Wert der ausgewählten Option zu erhalten, müssen Sie den ausgewählten Index verwenden, die richtige Option suchen und den Wert der Option referenzieren. Wenn Sie jQuery verwenden, können Sie jedoch den Wert einer Auswahl mit der Methode val() des jQuery-Objekts ermitteln. Ich schlage jQuery vor, da es den Code einfacher macht und MS es mit Visual Studio unterstützt.

Beispiel 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

Hier ist der Code jetzt arbeiten:

<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>