Заполнять выпадающий список с помощью selectlist в ViewData

Question

Я пытаюсь заполнить список HTML.Dropdownlist с помощью списка выбора, который заполняется полями строкового значения (адрес местоположения) и текста (описания местоположения) из вызова базы данных. Я передаю selectlist как viewdata к моему представлению. Выпадающее меню заполняется отлично, но когда я использую значение, оно равно нулю или пустое, как видно из предупреждения, которое я ввел в свою функцию javascript. Вот код Любые идеи, почему "this.locations.value" является нулевым:

Мой Посмотреть код:

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

My Controller Код:

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

Места является выбор и Безразлично» t имеет свойство value. Чтобы получить значение выбранного параметра, вам нужно использовать выбранный индекс, найти правильный вариант и указать значение параметра. Однако, если вы используете jQuery, вы можете получить значение select, используя метод val() объекта jQuery. Я предлагаю jQuery, так как это упростит код, и MS будет поддерживать его с помощью Visual Studio.

Пример использования 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

Вот код теперь работает:

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